Más contenido relacionado
La actualidad más candente (20)
Similar a 消滅都市 Cocos2d-xでの演出・UIあれこれ (20)
消滅都市 Cocos2d-xでの演出・UIあれこれ
- 1. Copyright © 2014 Wright Flyer Studios, Inc. All Right Reserved.
WRIGHT FLYER STUDIOS
消滅都市
Cocos2d-xでの演出・UIあれこれ
- 2. Copyright © 2014 Wright Flyer Studios, Inc. All Right Reserved.
• Web業界でWebデザイナーを約8年
– デザイン、HTML/CSSコーディング、JavaScript、Flash
• 2012年5月グリー入社
– ネイティブゲーム案件でわりとFlashを使っています。
自己紹介
野口 隼
(Shun Noguchi)
- 3. Copyright © 2014 Wright Flyer Studios, Inc. All Right Reserved.
• 2014年5月末リリース
(iOS/Android)
• Cocos2d-x
• ドラマ×アクション×RPG
消滅都市について
- 5. Copyright © 2014 Wright Flyer Studios, Inc. All Right Reserved.
• アニメーション
• UI
• その他
目次
- 7. Copyright © 2014 Wright Flyer Studios, Inc. All Right Reserved.
• LWF
– Flashアニメーションの再生エンジン
• マルチプラットフォーム
– HTML5, Unity, Cocos2d-x
• ActionScriptは一部使用可能
– グリー社内で開発
– オープンソース
• どなたでもフリーで使えます
これを利用することで、アニメーションは
Flashで作っています。
アニメーション
- 8. Copyright © 2014 Wright Flyer Studios, Inc. All Right Reserved.
• LWF使用箇所
– キャラクター(バイク)
– エフェクト
– 演出(ガチャ、合成、タイポグラフィ etc.)
アニメーション
- 9. Copyright © 2014 Wright Flyer Studios, Inc. All Right Reserved.
キャラクター(バイク)
•タイムラインアニメ
– フレームラベルを設定してプログラムから制御。
(gotoAndPlay/Stop)
– プログラムとの連携はイベント送出。
(fscommand)
アニメーション
- 10. Copyright © 2014 Wright Flyer Studios, Inc. All Right Reserved.
エフェクト
•AfterEffects等で作った連番+モーショントゥ
イーン
– エフェクト再生終了はイベントでプログラムに通知。
– モーショントゥイーンを活用して連番を減らすことでテク
スチャ削減できる。
– 加算合成はFlash上の設定が反映される。
•Cocosのパーティクルシステムはパフォーマンス
的に使用を見送り
アニメーション
- 11. Copyright © 2014 Wright Flyer Studios, Inc. All Right Reserved.
演出
•タイムラインアニメーションで
– 動的に差し代わる部分は空のムービークリップにCocosのSprite
を追従(座標、スケール、アルファ)
– 他エフェクトやサウンドのタイミングはイベントで通知
•エンジニアさんはコード書いてアニメーションし
たくない
アニメーション
- 12. Copyright © 2014 Wright Flyer Studios, Inc. All Right Reserved.
• LWFのメリット
– Flashユーザーなら学習コストはほぼゼロ
– Flashでモックをつくったものをそのまま使い
回せる
アニメーション
- 13. Copyright © 2014 Wright Flyer Studios, Inc. All Right Reserved.
Jenkins
LWF制作フロー
アニメーション
LWF仮素材(Flash)
実装(Eng)
LWF本素材(Flash)
git push(swf,png)
git push(swf,png)
LWF変換
(swf2lwf.rb)
テクスチャアトラス
(Texture Packer)
開発verに反映
実機確認
修正
- 14. Copyright © 2014 Wright Flyer Studios, Inc. All Right Reserved.
LWF制作フロー
• swf,png画像をgitにpushするとJenkinsの一連
のジョブが走り、終わったら開発バージョンの
アプリに反映される(ゲーム開始時に更新差分
がダウンロードされる)
• 実装後の微調整はFlash制作者で完結できる
アニメーション
- 15. Copyright © 2014 Wright Flyer Studios, Inc. All Right Reserved.
Jenkins?
•繰り返しおこなう何らかの仕事(ジョブ)を自動化す
る
– 設定次第でどんなことでも
– いろんなものをトリガーにできる(gitへのpush、手動で実行
etc.)
– ジョブを連鎖
– エラーも検知
•サーバーで24時間365日稼働
アニメーション
- 16. Copyright © 2014 Wright Flyer Studios, Inc. All Right Reserved.
パフォーマンス関係
•テクスチャ統合を自動化
– フォルダ名で配下の複数LWFのテクスチャアトラス化を指
定
• バッチレンダリングで描画負荷軽減
• ただし同じレイヤーに描画されるものだけ
•圧縮テクスチャ
– PVRTC(iOS), ATITC(Android)
– 基本、劣化するので、目立たないエフェクト系でのみ適用
• OPTPiX imestaのClearPVRTCをJenkinsサーバーで動かせれば
良かったが…
アニメーション
- 17. Copyright © 2014 Wright Flyer Studios, Inc. All Right Reserved.
パフォーマンス関係
•アプリにバンドルされるものは小さめに
– 消滅都市の場合、チュートリアル中にバックグラウンドで
アセットダウンロードをおこなう
=チュートリアルまでのアセットがアプリにバンドル
• 火・水・木属性の1段階目とか
アニメーション
- 19. Copyright © 2014 Wright Flyer Studios, Inc. All Right Reserved.
UI組み込みフロー
UI
UI素材(Photoshop)
Cocos2d-x
Photoshop
スクリプト(jsx)
json png
- 20. Copyright © 2014 Wright Flyer Studios, Inc. All Right Reserved.
Photoshopスクリプトの詳細
•レイヤーの命名規則で設計
– レイヤー名にCocosでのクラス名(Sprite?Button?)、tag番号
等の情報を持たせる
– その要素に必要な情報をレイヤーの描画で表現
• e.g.
ScrollViewのスクロール領域を矩形描画で指定
ボタンの各状態(normal, disabled…)の画像を子レイヤーで指定
• JSONからUI構築する仕組みをエンジニア側で
用意
UI
- 22. Copyright © 2014 Wright Flyer Studios, Inc. All Right Reserved.
UI
• UIの仕様の一部をデザイナー側で定義していることになる
– デザイナーの負担・増 (^_^;)
– コミュニケーションコスト・減 (^-^)/
– トータルで効率化
ルールに沿ってレイヤー名
を設定
Class毎に必要なレイヤーを
用意
PSD
- 23. Copyright © 2014 Wright Flyer Studios, Inc. All Right Reserved.
Photoshopスクリプトの詳細
• テキスト(デバイスフォント/ビットマップフォント)
もフォトショのテキストレイヤーで
– フォント名(ビットマップフォント)はレイヤー名に含める
• 汎用(複数画面で共通)パーツ指定もできるように
UI
- 24. Copyright © 2014 Wright Flyer Studios, Inc. All Right Reserved.
ビットマップフォント
• ノベルシーン(会話)等、ゲーム中で使われる文字列の
原稿はExcelに入力
– 自作ツールでExcelからデータを抽出して「BMFont」に流して
フォント生成
– 運営中、会話が追加され使用文字が増えるとフォント更新
(ExcelをgitにpushするとJenkinsで処理が自動的に走る)
UI
- 25. Copyright © 2014 Wright Flyer Studios, Inc. All Right Reserved.
• 当初はCocosBuilder, Coco(s)Studioも検討
– ツールの完成度、学習コスト等メリデメ検討の結果
スクリプト自作
• PSDはDropboxで共有
– エンジニア側でも修正することがある
• 減色や圧縮テクスチャは適用せず
UI
- 26. Copyright © 2014 Wright Flyer Studios, Inc. All Right Reserved.
課題
• UIアニメーション
– UIアニメーションの制作がパイプラインに組み込め
ていない
• エンジニア側で巻き取り(つらい)
• 理想は
Photoshop(UIデザイナー)
↓
アニメーションツール(UIデザイナー/アニメーター)
↓
Cocos2d-x(エンジニア)
UI
- 27. Copyright © 2014 Wright Flyer Studios, Inc. All Right Reserved.
Cocos2d-x開発を振り返って
- 28. Copyright © 2014 Wright Flyer Studios, Inc. All Right Reserved.
• Unityみたいにエディタが無いのでデザイナーに
はブラックボックスで恩恵を受けにくい
– 開発環境構築がムズい
• エンジニアさんにいろいろ自動化してもらうと
幸せ
Cocos2d-x開発を振り返って
- 29. Copyright © 2014 Wright Flyer Studios, Inc. All Right Reserved.
以上、消滅都市の事例紹介でした
ありがとうございました
Notas del editor
- 0:10
- 0:30
- 0:30
- 0:30
- 0:05
- 2:00
・Web, Unityでも使われている
- 1:00
・エフェクトはヒットエフェクトとかUI系(CHAIN)とか
・タイポグラフィはBOSS BATTLEとかGAME OVERとか
- 1:30
- 2:00
・Cocosでエフェクト実装となると連番になりがち
- 2:30
・
- 2:00
・アニメーションオーサリングツールとしてFlashを超える物はまだないんじゃないか
・ほかのツールでアニメーション作る場合でもFlashでモックを作るという話もきく
- 3:00
- 1:00
- 1:00
・全プロジェクトで使われている気がする
- 1:30
・メモリ消費量に関するもの
・統合するテクスチャはこちらで判断
- 2:00
- 0:05
- 0:30
- 2:00
- 1:00
・解像度は16:9で
- 2:00
- 2:00
- 1:30
・Glyph Designerも検討
- 1:00
・Cocosはプログラミングのフレームワークなのでエディタが無い
- 1:00
- 0:05
- 1:00
・Cocosはプログラミングのフレームワークなのでエディタが無い
- 0:05