『消滅都市』を例にしたCocos2d-xでのスマホアプリ開発の効率化テクニック

文：そみん

　2月6日に渋谷ヒカリエで“Game Graphics Groove #1”が行われました。そこで行われたiOS/Android用アプリ『消滅都市』に関するプログラムをレポートします。

　本イベントはDeNA、グリー、ポケラボの主催で行われたゲームグラフィッククリエイター向けのセミナーで、さまざまなアプリ開発者やグラフィッカーが登壇し、非常に興味深い講演が行われました。この記事では“『消滅都市』Cocos2d-xでの演出・UIあれこれ”のプログラムをクローズアップしてレポートしていきます。

　登壇したのはグリー株式会社 Japan Game事業本部 Wright Flyer Studios部に所属するマネージャー/リードアニメーターの野口隼氏。ランゲームを軸にしつつ本格的なストーリー演出も楽しめる人気アプリ『消滅都市』のUIに関するトークが展開しました。

　最初に『消滅都市』ゲーム概要の紹介が行われ、アニメーション制作に関する技術的な話題へと移っていきました。

　『消滅都市』のアニメ演出はLWFというグリー社内で開発したエンジンで作られています。Flashをベースとしており、HTML5、Unity、Cocos2D-Xといった、アプリ開発の主流となるさまざまなエンジンに対応しているとのこと。このエンジンはオープンソースとなっており、誰でもフリーに使うことができます。

　要点としては、Flashをベースとできるので作業工程を短縮できるとのことでした。このLWFはキャラクター（バイク）やエフェクト、各種演出（ガチャ、合成、タイポグラフィなど）に使われているとのこと。

　この時、一部のAction Scriptを使えることもポイントとなっており、複数の要素をプログラムで管理できるそうです。

　エフェクトなどについてはCocosのパーティクルシステムを使うことも考えたそうですが、『消滅都市』はアクション性が強いゲームなので、パーティクルシステムでの管理はパフォーマンス的に難しいと判断したとのこと。その点、LWFはモーショントゥイーンを活用することで連番での管理を減らすことができ、テクスチャを軽減できるメリットが大きかったとのこと。

　例えばガチャや合成など、一部のグラフィックが動的にさしかわる場合は、CocosのSpriteを追従させるスタイルを取ったそうです。サウンドなどの管理もプログラム上で行えるので、作業がかなりスムーズに進められると語っていました。

　Cocosを普通に使うと、エンジニアがコードを書いてアニメを作ることになるそうですが、LWFは基本的にFlashで管理できることもあり、大きな作業軽減につながったようです。

　そういったことのまとめとして、“Flashユーザーなら学習コストはほぼゼロ”、“Flashでモックをつくったものをそのまま使いまわせる”という部分をLWFのメリットとしてあげていました。

　野口氏も自身の経験を例にあげつつ、開発初期のテストやプレゼン用のモックはFlashで作り、その後に別の形式で最適化をして本番へと移行するケースが多かったそうです。モック版をそのまま本番へと流用できるLWFのメリットは大きいと実感しているようでした。

　実際のアニメーションの制作フローにおいても、仮素材をエンジニアに渡しておけば、のちほど開発バージョンのアプリにSWFやPNG画像を更新させることができる仕組みになっている部分が便利とのこと。実装後はエンジニア側で大部分を管理できるので、やりとりの手間などを減らせるそうです。

　便利なツールとしては“Jenkins”を例にあげていました。設定しだいでさまざまな仕事（ジョブ）を自動化でき、サーバーで24時間365日稼働できるので、非常に重宝しているそうです。

　ちなみにスクリーンの右側に映っているMac ProはJenkinsの管理用に使っているものとのこと。初期は普通の性能のPCだったそうですが、最近はかなり高性能のPCを使っているそうです。

　パフォーマンスについてはテクスチャ統合を自動化できる部分や、圧縮テクスチャを使用できることについても言及していました。ただ、圧縮テクスチャは基本的に劣化するので、プレイヤーがじっくり見るストーリー演出系のアニメで使うことは避けて、目立たない部分で使うのが妥当とのことでした。

　こういったパフォーマンスも意識して、アプリ本体の容量をなるべく減らすことが大事とも語られました。『消滅都市』では、最初のダウンロードではチュートリアルの終了くらいまでのアニメデータ（各属性の低レベルのエフェクトなど）を組み込んでおき、続きはあとで追加ダウンロードしていく形式にしているそうです。

　UIについては、デザイナーが素材を作って、それをJSONなどで吐き出して組み込んでいくとのこと。この時、ベースとなる素材をPhotoshopなどで作る際に、そのレイヤー名にCocosでのクラス名の情報を含めて管理しているそうです。

　つまり、UIの仕様の一部をデザイナー側で定義していることになります。これによりデザイナーの負担は増えましたが、別チームとのやりとりの手間を減らせたので、トータルではかなりの効率化になったと語っていました。

　ゲーム中のセリフについてはExcelで作成したものを使える形で、任意の改行位置なども反映される仕様になっているとのこと。使用文字が増えた場合はJenkinsによる自動処理で、新たなフォントを更新していく仕組みになっているそうです。

　当初は他社製のツールを使うことも検討したそうですが、開発をスタートした時期的にまだ客観的な評価が定まっていなかったため、採用を見送ったとのこと。

　現在考えている課題は、UIアニメーションの制作がパイプラインに組み込めていないこと。理想はUIデザイナーがPhotoshopで作ったデータをアニメーションツールに移行して、それをエンジニアがCocosに組み込む流れにしたいと語っていました。

　講演のまとめとして、Cocos2d-xでの開発はメリットが大きいが、Unityと比べた時にエディタがないため、開発環境の構築が難しいと語っていました。そのため、特にデザイナーは大変なようです。

　それを踏まえて、開発の際にはエンジニアときちんと話をして自動化をしてもらい、きちんとした開発環境を整備していくことも大事だと話していました。

　アクションゲームをベースとしながら、ステージ中に本格RPGレベルのストーリー演出が展開していく『消滅都市』。本当にキャラがよく動き、かっこいい技のエフェクトが多いゲームだとは思っていましたが、そのクオリティが実現できていたのは、しっかりした開発環境の整備があったからこそだったんですね。

　開発の舞台裏を知らなくてもゲームは楽しめますが、個人的にはそういったテクニカルな話や開発の裏話を聞くと、よりゲームへの愛着が湧いてきます。開発者向けのセミナーである“Game Graphics Groove”は今後も開催を予定しているそうなので、機会があればまた取材をしてこようと思います！

(C)Wright Flyer Studios

• 『消滅都市』公式サイトはこちら

データ

関連サイト

• 『消滅都市』公式サイト