消滅都市　Cocos2d-xでの演出・UIあれこれ

Copyright © 2014 Wright Flyer Studios, Inc. All Right Reserved.
WRIGHT FLYER STUDIOS
消滅都市
Cocos2d-xでの演出・UIあれこれ

• Web業界でWebデザイナーを約8年
– デザイン、HTML/CSSコーディング、JavaScript、Flash
• 2012年5月グリー入社
– ネイティブゲーム案件でわりとFlashを使っています。
自己紹介
野口隼
（Shun Noguchi）

• 2014年5月末リリース
（iOS/Android）
• Cocos2d-x
• ドラマ×アクション×RPG
消滅都市について

• アニメーション
• UI
• その他
目次

アニメーション

• LWF
– Flashアニメーションの再生エンジン
• マルチプラットフォーム
– HTML5, Unity, Cocos2d-x
• ActionScriptは一部使用可能
– グリー社内で開発
– オープンソース
• どなたでもフリーで使えます
これを利用することで、アニメーションは
Flashで作っています。

• LWF使用箇所
– キャラクター（バイク）
– エフェクト
– 演出（ガチャ、合成、タイポグラフィ etc.）

キャラクター（バイク）
•タイムラインアニメ
– フレームラベルを設定してプログラムから制御。
（gotoAndPlay/Stop）
– プログラムとの連携はイベント送出。
（fscommand）

エフェクト
•AfterEffects等で作った連番＋モーショントゥ
イーン
– エフェクト再生終了はイベントでプログラムに通知。
– モーショントゥイーンを活用して連番を減らすことでテク
スチャ削減できる。
– 加算合成はFlash上の設定が反映される。
•Cocosのパーティクルシステムはパフォーマンス
的に使用を見送り

演出
•タイムラインアニメーションで
– 動的に差し代わる部分は空のムービークリップにCocosのSprite
を追従（座標、スケール、アルファ）
– 他エフェクトやサウンドのタイミングはイベントで通知
•エンジニアさんはコード書いてアニメーションし
たくない

• LWFのメリット
– Flashユーザーなら学習コストはほぼゼロ
– Flashでモックをつくったものをそのまま使い
回せる

Jenkins
LWF制作フロー
LWF仮素材(Flash)
実装(Eng)
LWF本素材(Flash)
git push(swf,png)
git push(swf,png)
LWF変換
(swf2lwf.rb)
テクスチャアトラス
(Texture Packer)
開発verに反映
実機確認
修正

LWF制作フロー
• swf,png画像をgitにpushするとJenkinsの一連
のジョブが走り、終わったら開発バージョンの
アプリに反映される（ゲーム開始時に更新差分
がダウンロードされる）
• 実装後の微調整はFlash制作者で完結できる

Jenkins?
•繰り返しおこなう何らかの仕事（ジョブ）を自動化す
る
– 設定次第でどんなことでも
– いろんなものをトリガーにできる（gitへのpush、手動で実行
etc.）
– ジョブを連鎖
– エラーも検知
•サーバーで24時間365日稼働

パフォーマンス関係
•テクスチャ統合を自動化
– フォルダ名で配下の複数LWFのテクスチャアトラス化を指
定
• バッチレンダリングで描画負荷軽減
• ただし同じレイヤーに描画されるものだけ
•圧縮テクスチャ
– PVRTC(iOS), ATITC(Android)
– 基本、劣化するので、目立たないエフェクト系でのみ適用
• OPTPiX imestaのClearPVRTCをJenkinsサーバーで動かせれば
良かったが…

パフォーマンス関係
•アプリにバンドルされるものは小さめに
– 消滅都市の場合、チュートリアル中にバックグラウンドで
アセットダウンロードをおこなう
＝チュートリアルまでのアセットがアプリにバンドル
• 火・水・木属性の１段階目とか

UI

UI組み込みフロー
UI
UI素材(Photoshop)
Cocos2d-x
Photoshop
スクリプト（jsx）
json png

Photoshopスクリプトの詳細
•レイヤーの命名規則で設計
– レイヤー名にCocosでのクラス名（Sprite?Button?）、tag番号
等の情報を持たせる
– その要素に必要な情報をレイヤーの描画で表現
• e.g.
ScrollViewのスクロール領域を矩形描画で指定
ボタンの各状態(normal, disabled…)の画像を子レイヤーで指定
• JSONからUI構築する仕組みをエンジニア側で
用意
UI

UI
PSD
16:9

UI
• UIの仕様の一部をデザイナー側で定義していることになる
– デザイナーの負担・増 (^_^;)
– コミュニケーションコスト・減 (^-^)/
– トータルで効率化
ルールに沿ってレイヤー名
を設定
Class毎に必要なレイヤーを
用意
PSD

Photoshopスクリプトの詳細
• テキスト（デバイスフォント／ビットマップフォント）
もフォトショのテキストレイヤーで
– フォント名（ビットマップフォント）はレイヤー名に含める
• 汎用（複数画面で共通）パーツ指定もできるように
UI

ビットマップフォント
• ノベルシーン（会話）等、ゲーム中で使われる文字列の
原稿はExcelに入力
– 自作ツールでExcelからデータを抽出して「BMFont」に流して
フォント生成
– 運営中、会話が追加され使用文字が増えるとフォント更新
（ExcelをgitにpushするとJenkinsで処理が自動的に走る）
UI

• 当初はCocosBuilder, Coco(s)Studioも検討
– ツールの完成度、学習コスト等メリデメ検討の結果
スクリプト自作
• PSDはDropboxで共有
– エンジニア側でも修正することがある
• 減色や圧縮テクスチャは適用せず
UI

課題
• UIアニメーション
– UIアニメーションの制作がパイプラインに組み込め
ていない
• エンジニア側で巻き取り（つらい）
• 理想は
Photoshop（UIデザイナー）
↓
アニメーションツール（UIデザイナー／アニメーター）
↓
Cocos2d-x（エンジニア）
UI

Cocos2d-x開発を振り返って

• Unityみたいにエディタが無いのでデザイナーに
はブラックボックスで恩恵を受けにくい
– 開発環境構築がムズい
• エンジニアさんにいろいろ自動化してもらうと
幸せ
Cocos2d-x開発を振り返って

以上、消滅都市の事例紹介でした
ありがとうございました

消滅都市　Cocos2d-xでの演出・UIあれこれ

Recommended

More Related Content

What's hot (20)

Similar to 消滅都市　Cocos2d-xでの演出・UIあれこれ (20)