育成やカード演出の部分は2Dとなっていますが、このパートの開発にはウェブテクノロジのアニメーションツール「OPTPiX SpriteStudio」が工数の短縮に大きな貢献を果たしています。
本インタビューでは、運営型ゲームアプリ開発におけるSpriteStudioの有効性と魅力をテーマに、バンダイナムコ スタジオの開発チームにお話を伺いました。
なお、本作は「SpriteStudio Ver.5.8.3.6625」で開発されており、最新版である「SpriteStudio Ver.6.2」とは機能については若干違いがあることをご了承ください。
【インタビュー・ライティング】：株式会社ヘッドハイ 一條貴彰
SpriteStudio導入のキッカケは、Flash技術者の活用からはじまった
――まずは自己紹介からお願いいたします。
池田氏バンダイナムコスタジオ 技術統括本部の池田早人といいます。「ミリシタ」ではクライアントエンジニアのリーダーとして参加しました。
Unityを使ってクライアント部分を作る担当になりますが、コーディングというより開発チーム全体の進行管理や方向性決めを行っていました。開発チームが詰まったり、悩んだりしたときにサポートする役割です。
星野氏同じく技術統括本部の星野將信です。私はSpriteStudioのUnity SDKに関する組み込み部分と機能拡張を担当していました。組み込みだけでなく、SpriteStudioのツールを使ったオーサリング作業にも参加しています。
岡田氏VA統括本部の岡田政治と申します。「ミリシタ」にはビジュアルアーティストとして参加しました。インターフェイスデザインと、2Dのアニメーション演出を担当しています。SpriteStudioを使ったデータ作成は私が主に担当していました。
――「ミリシタ」ではSpriteStudioをどのように使用していますか？
池田氏2Dでアニメーションする箇所の大部分に使用しています。画面全体の演出、例えばキャラクターのカットインや、エフェクト、大ぶりの絵が動いたりするところです。
最初にプレイヤーが目にするのは「ログインボーナス」のスタンプ演出かと思います。それから「レッスン」の成功演出、「覚醒」などのカードに関する演出、「ランクアップ」時の演出もSpriteStudioを使って開発しています。「ガシャ」の一連の演出も、SpriteStudio上で動きを作ってUnity側のスクリプトから制御しています。
3Dのライブシーン以外の多くの場面の演出でSpriteStudioが使われている、という形ですね。
――今回、SpriteStudioを導入した背景などをお教えください。
池田氏SpriteStudioを我々のチームで導入したのは、実は今回が初めてです。プロジェクトが始まった当時、どんなツールを使って2D部分の演出を作るかを色々検証していました。
社内のデザイナーにはFlashを使える人間が多かったので、プロジェクトではその力を活用したいと考え、はじめはFlashベースで作ろうとしていました。そこで、Unity Asset Storeで販売されているFlashのインポータやコンバート系のツールを試してみました。
しかし、検証の結果として、Flashコンバート系のツールでは、実現したい演出に対して機能が十分ではなく、もし機能拡張のために自分たちで手を入れた場合にどこまでサポートしてくれるのか、そして最新のUnityのバージョンに追従してくれるのか、などの不安がありました。さらに調べてみると、コンバート用サーバーを自分たちで立てる必要があり、そして、それらの問合せが英語になってしまうというハードルもありました。
こういう状況だったので、いったんFlashを使用する選択から離れて何か手段がないか、特に国内で簡単に問合せできそうなものがないかと、岡田とあらためて相談しました。
岡田氏そのタイミングで、SpriteStudioのことを思い出しました。当時は名前だけしか聞いたことがなかったのですが、まずは使ってみましょうと調査を開始しました。
初めて触ってみて分かったことは、Flashユーザーから大変とっつきやすいインターフェースであるということです。ツールとしても全体的にシンプルな構成で、Flashがわかる人なら、２～３日ラーニングすれば必要最低限の作業要件で覚えてもらえそうな感触だったので、本採用を提案しました。
――Unity内の機能を使ってアニメーション演出をすることは検討されましたか？
池田氏アーティストからすると、Unity標準のアニメーションシステムを拡張して触ってもらうのは敷居が高いと判断しました。
星野氏プロジェクト開始当時はUnityのTimeline機能が出たばかりで不安定で、そうするとMecanimベースで組むことになるのですが、非常に複雑なシステムになってしまうことは明らかでした。
ガシャで必要になってくる、時系列に進行して複数の演出を組み合あわせたりする仕組み作りに、Mecanimのようなステート管理系のシステムを転用するのは無理があるなと。
そして、アーティスト側が触る部分にタイムラインUIがあり、フレーム単位で演出を作っていくエディタも用意しなくてはいけない。Unityだけでやろうとすると、エンジニアチームとの作業のコンフリクトも発生してしまいます。SpriteStudioを導入することで、Unity側の作業と並行して演出開発を走らせることができるようになったところが大きいです。
岡田氏演出開発は私を含めたスタッフ2名でほとんどを作っています。少ない人数で回すことができたのは、SpriteStudioのツールのおかげだといえます。ゲーム中のデータはすべてを３～４か月の間に作ることができました。
おそらくUnityのみで機能を作ろうとして居たら、もっと大規模なチームを組まなくてはならなかったでしょう。
作品のクオリティアップに貢献したSpriteStudio
――実際に導入してみて、開発ではいかがでしたか。
岡田氏まずはツールの使いやすさです。繰り返しになってしまうのですが、Flashと操作フィーリングがとても近いことが助かりました。時間短縮になりますし、分業体制のおかげでイテレーションコストが稼げます。
池田氏開発中には、エフェクト画面が組めてきて全体が見えてきたときに、後から「こういう演出入れたほうがいいよね」という意見が出ることが多いです。ガシャ演出の調整もギリギリまで試行錯誤をすることができました。
岡田氏ちなみに、ガシャ演出についてはすべてのパターンをSpriteStudioではワンプロジェクトで作成しています。ルートのアニメーションの下に、SRやSSRの演出パーツを含めて入れ、Unity SDK側から制御している形です。
ガシャ用のデータは一番大きく、1ファイル内に600ほどパーツが入っています。本来は演出パターンごとにばらして作った方が取り回しはいいかもしれないのですが、分業体制で作っていたこともあり、アーティストが手元で一連の流れを確認できる利便さのほうが勝ちました。
Unity側でパーツやパターンを組みあわせる場合ですと、エンジニアさんに「ここに配置してください」とやり取りをたくさんしなくてはいけないので。
星野氏1つのファイルに多数のパーツを入れる使い方をしていますので、SpriteStudioPlayerにはかなり手を加えています。どんなカードが出るか、動的に変更させるためですね。たとえば「セル」内のテクスチャ部分を動的に差し替える機能などを足しています。
筆者注：SpriteStudioPlayer = SpriteStudioのアニメーションデータをUnityで使用するためのRuntime。githubで公開されている
あとは、Flashで言うところのActionScript(アクションスクリプト)風の機能を作っています。
SpriteStudioのツールには文字列を埋め込むことができる「ユーザーデータ」領域がありますが、「ここでストップ」「ここでジャンプ」「ここでSEを鳴らす」などの指示を入れて制御に使っています。
池田氏サポートについても、非常に助かりました。おもにパフォーマンス改善の部分をSpriteStudioの開発チームに見てもらいました。
岡田氏SpriteStudioは実行環境に組み込まれることが前提で作られているツールだと思いますので、パフォーマンスを上げる時にアトラス化することは必須です。しかし、パフォーマンス部分はだいたい後回しで、おおむねのシステムが組みあがった後で最適化を模索することになりがちですね。
池田氏最初は、実機で絵がきちんと出ることを重視していますからね。開発の途中で、軽量化や高速化について思案する必要が出てきて。でも悩むよりも先に相談したほうが早いと思って、SpriteStudio開発チームに話を聞きに行きました。そこでデータの効率的なまとめ方や、軽量化のコツの情報をいただきました。
筆者注：現在、ウェブテクノロジではサポートサイトにも軽量化のコツを公開している。https://www.webtech.co.jp/help/ja/spritestudio/guide/reference/processingfailure/
SpriteStudioの今後に求めること
――今後SpriteStudioに期待したいことはありますか？
岡田氏フレームコントロール時にEnterキーで再生を開始してほしいですね！Flashだとエンターキーでそのフレームから再生、というキーアサインでしたので。
筆者注：“SsKeyBindingEditor”というツールでショートカットの編集はできるものの、Enterキーは割当対象外。
それから、データ構造の中にフォルダー機能のようなものがあればと思います。レイヤー分けといいますか、出力データに影響しない形で分類ができればと。現在はnullパーツをつかって分類しているのですが、これは微細ながら無駄なデータが増えてしまいますので。
星野氏ツール部分で言えば、ラベルのリネームをダブルクリックして編集したいですね。今は右クリックで名前を変更しているのですが、多用していると少し手間が多いです。
ラベルは本プロジェクトでは重要な機能で、制御がスプライトスタジオ内で完結していない処理の部分は、ラベルが指示制御になっています。「Sレア時にはこのカード演出を再生する」などのジャンプ部分などですね。
――最後に、SpriteStudioをプロジェクトに導入した感想をお聞かせください。
池田氏SpriteStudioの導入によって、2Dの演出については工数を抑えつつ、手軽にイテレーションをまわしていける環境を作ることができました。いわゆるガシャ抽選の演出はモバイルゲームにとって非常に大事なところですので、開発環境の選択においては重要なジャッジポイントです。
何より日本語サポートの安心感が大きかったですね。結果、短期間ながらSpriteStudioを導入してから最後まで大きなトラブルなく、想定通りの工数となったので助かりました。
岡田氏ツールの使いやすさがとにかくよかったです。もう一人の担当者からも特に不満はなく、「普通にできました」という感想でした。Flashを使っていた方ならばSpriteStudioをすぐに使えて、必要なものが手早く作れるのではないかなと思います。
もちろん完全に一緒ではないですが、タイムラインなどの感覚が近いため、違和感が少なかった印象です。
星野氏私もバリバリのFlasherだったので、慣れた環境に近いツールを使ってゲームを作り込んでいけたのは良かったですね。ゲームと連携して動的に変化する部分についてはSpriteStudioPlayerに結構手を入れたので、今後はそういった部分にはぜひ進化してもらいたいと思っています。
――ありがとうございました！
配信元：株式会社バンダイナムコエンターテインメント (c)窪岡俊之 (c)BANDAI NAMCO Entertainment Inc.
■OPTPiX SpriteStudio ： https://www.webtech.co.jp/spritestudio/
■株式会社ウェブテクノロジ ： https://www.webtech.co.jp/index.html
●OPTPiX SpriteStudioアニメーションコンテスト 特設ページ
「OPTPiX SpriteStudioクリエイター創作支援プロジェクト」としてアニメーションコンテストを実施中！コンテストの参加資格は“どなたでも”。この機会にぜひ参加してしてみてください。
コンテストへの参加はこちら！
