Cocos2d-x 3.0を使ったゲーム “消滅都市” の開発事例

Copyright © 2015 Wright Flyer Studios, Inc. All Right Reserved.
WRIGHT FLYER STUDIOS Cocos2d-x 3.0を使⽤したゲーム “消滅都市”の開発事例 Cocos2d-x talks #2 (March 13, 2015)

• 渡部晋司 – リードエンジニア • 経歴 – 会津⼤学コンピュータ理⼯学部性能評価学講座 – 任天堂株式会社 (2007年〜) – グリー株式会社 (2012年〜) • GREE Platform事業 • 消滅都市自己紹介

ゲーム紹介 • 現代を舞台にしたスマートフォンゲーム – iOS & Android • 2014年5⽉下旬にリリース • おかげさまで350万ダウンロードぐらい • CM放映中︕

開発開始前の状況

開発体制プロデューサー 1名ディレクター 1名 PM 1名クライアントプログラマー 4名サーバープログラマー 3名アート 4名テクニカルアート 1名合計17名ゲームデザイナー 2名

スケジュール 2013年 10⽉ 2014年 11⽉ 12⽉ 1⽉ 2⽉ 3⽉ 4⽉ 5⽉プロト開発 α開発 - 主要機能完成 - β開発 - ひととおり完成 - 全社公開, 改善 QA G O A L 計7ヶ⽉アジャイルQA

• 3Dゲームだと厳しそうだった – 開発期間 – 開発メンバーの⼈数 • 本開発半年でのリリースが絶対条件 – ギャグかと思ったがマジだった開発開始前の状況

• 開発メンバーの構成 – C や C++ の開発経験者が多かった – Unityの開発経験者がいなかった • Cocos2d-x – 会社の内製プロダクトでは初の採⽤ – 少し触ってすぐに理解できた – 中が⾒えている安⼼感なぜ Cocos2d-x を選択したのか

• 消滅都市の開発開始当初 – 安定版 : 2.2.5 – 開発途中版 : 3.0 alpha0 • 判断基準 – 今後3.x系が主流になるのは⾒えてる – ロンチ時に正式版が出ているのか︖ Cocos2d-xのバージョン

• 使⽤したCocos2d-xの推移 – v2.2.5 (プロトタイプのみに使⽤) – v3.0 alpha0 (本開発開始後) – v3.0 beta2 – v3.0 rc1 • 消滅都市ロンチ時のCocos2d-x – v3.0 rc1 – 必要なパッチのcherry-pick – 幾つかの改造 Cocos2d-xのバージョン

• 苦労した点 – v2系とv3系だとクラスの名前が違う – v3.0 betaでディレクトリ構成が変わる – v3.0系最初の頃はやはり不安定だった • バージョンアップが結構つらかった – 作業に⼀週間弱程度かかった – ロンチ以降はバージョンアップはしていない Cocos2d-xのバージョン

Cocos2d-xとの付き合い⽅ -開発環境と周辺ライブラリ-

• ゲームエンジン…︖ – というよりはゲームフレームワーク – ツール類は標準のものがない – ⾃由に組み合わせて使う • ⻑所 – アプリ仕様やメンバー構成に応じて⾃由⾃在 – サードパーティSDKの組み込みやすさ • 短所 – 組み合わせを考えるのが⼤変 – 仕組みのセットアップが必要になる開発環境と周辺ライブラリ

• 消滅都市における選定基準 – 納期に間に合うこと (本開発期間半年) – メンバーの能⼒が最⼤限活きること – コストパフォーマンス • 時間的な意味とお⾦的な意味での開発環境と周辺ライブラリ

• メインのコーディング環境 – C++ 11 – MacOSX + Xcode – iOSデバイス or シミュレータで開発を⾏う • Androidの開発環境 – IDE等は使⽤していない – 問題が起こったらprintfデバッグ (笑) • ※そもそもあまり問題が起こらなかった開発環境と周辺ライブラリ

• libdispatch – バックグラウンド処理を書きやすく – 主に通信関係の処理の部分で使⽤開発環境と周辺ライブラリ • Cricket Audio – マルチプラットフォーム – 基本的な機能を備えている – サポートが⼿厚い (英語のみ) – 低コスト (無料 or 低額) http://www.crickettechnology.com/

• LWF for Cocos2d-x – FlashデータをCocos2d-x上で再⽣ • 消滅都市での使⽤部分 – ゲーム中のキャラクター – 攻撃エフェクト – ガチャの演出開発環境と周辺ライブラリ

Cocos2d-xとの付き合い⽅ -UI制作環境-

• UI作成の環境整備 – ゲームの画⾯数が多い – UI制作スピードがプロジェクトの成否を左右 • Cocos2d-x向けのUIツール – Cocos Builder – Cocos Studio (旧称 : CocoStudio) – などなど UI制作環境

• 新しいツールを覚えるのは負担… – そもそも画⾯デザインはPhotoshopで作る – 作ったのをツール上で再配置︖するの︖え︖ • 最初からPhotoshopで作れればいい – JSXでレイヤー構造をエクスポートする UI制作環境

UI制作環境 PhotoshopによるUI制作

UI制作環境 psdファイルのレイヤー構造

UI制作環境 UI部分のプログラムを実装してゲーム画⾯に

• UI系アニメーション – Photoshopで全体的な画⾯構成は出来た – でもアニメーション付けは無理 • プログラマが適当につけた – 雰囲気で – ⻑さとか距離とかカーブとか適当に空気読んで – あまりにも酷い時はダメだししてもらう UI制作環境

• デザイナーの意向がそのままゲームに – ゲーム画⾯を直感的に作りこめた – 新しくツールを覚える必要がなかった • イマイチ – テクスチャがアトラス化されない (未対応) • やれば出来るけど本気出してないだけ – フォントの⾒た⽬が若⼲違う – エクスポートが遅い • 横展開 – Cocos2d-xで開発中の他ゲームでも使⽤ – レイヤー構造仕様にデザイナが慣れつつある UI制作環境

パフォーマンス関連

• 消滅都市はアクションゲーム – ぬるぬる動く状態(60FPS)を⽬指したい • パフォーマンス – CPU, GPU – データ⼊出⼒ (ディスク、ネットワークetc) – メモリ消費量 • 重要なこと – パフォーマンスに囚われるとゲームは出ない – 消滅都市は4⽉〜5⽉に最適化を実施パフォーマンス関連

• CPUパフォーマンスの向上 – Xcode Instrumentsを使⽤して調査 • アプリ側のコードでの問題を修正 – オブジェクトの頻繁な作成と削除 • Sprite / Node → うまく使いまわす • ゲーム⽤のオブジェクト – ゲーム中にディスクアクセスをしていた – ⾒えていないLWFアニメーションが動いてたパフォーマンス関連

• パーティクルエフェクトを削除 – ちょっとCPU的な負荷が⼤きかった – Cocos2d-xの最新版でどうなってるかな︖ – LWFアニメーションで代替 • SpriteBatchNodeの明⽰的な使⽤ – ドローコールを削減する機能 – ⾃動にドローコールをまとめる機能がある • Cocos2d-x 3.x系以降 – 明⽰的に使うとCPU負荷が下がったパフォーマンス関連

• GPUのパフォーマンス調査ツール – Xcode • フレームデバッガ機能 • Instruments – Adreno Profiler – PerfHUD ES パフォーマンス関連

• GPUパフォーマンスの向上 – 頂点 (2Dゲームの場合はほぼ考慮不要) – ピクセルフィル (⼤きく影響) – ドローコール数 • CPU最適化によっても…︖ – GPUがCPUの熱の影響を受ける – OS側から周波数ダウンのペナルティ • アプリ側が割り込む隙は無いパフォーマンス関連

パフォーマンス関連

• 消滅都市において⾒えてきた問題 – 無駄な透明レイヤーが表⽰されてた (oh…) – ピクセルのオーバードローが多かった • ステージ背景の描画⽅法を⼯夫して対処 – ドローコールがまとまっていなかった • 階層構造にしてしまった影響パフォーマンス関連

• ⾼速シェーダの追加 – ごく⼀部の端末に効果がある – Cocos2d-xの機能が制限されるパフォーマンス関連 Cocos2d-xデフォルトのフラグメントシェーダ (出力色) = (テクスチャ色) × (頂点色) 高速化版 (出力色) = (テクスチャ色)

• glClearの呼び出し – レターボックスの範囲に留める • 全体を塗らなくすることで⾼速化 – ⼀部の端末で効果がある – 背景の絵などですべてのピクセルを塗る • 塗り忘れると悲惨なことに – Cocos2d-xを少し改造する必要パフォーマンス関連

パフォーマンス関連 glEnable(GL_SCISSOR_TEST); float bottomAreaHeight = viewRect.origin.y; if (bottomAreaHeight != 0.0f) { glScissor(0,0,frameSize.width, (int)bottomAreaHeight+1); glClear(GL_COLOR_BUFFER_BIT); } // (中略) glDisable(GL_SCISSOR_TEST);

• 圧縮テクスチャの使⽤ – メモリ消費量の低減 / ⾼速化 – 品質劣化が起こる – 使⽤した箇所は限定的 • 背景 • エフェクト⽤テクスチャ – 各GPUごとにテクスチャを⽤意 • アルファチャンネルも使⽤するためパフォーマンス関連

• Android ハードウエアスケーラ – (ほぼ︖) ノーコストで引き伸ばしが可能 – ⾼解像度端末で効果⼤ • 特にタブレット向け • FPS37→60弱まで改善した端末も – API呼び出しによりバッファサイズを変更 • SDK : setFixedSize • NDK : ANativeWindow_setBufferGeometry パフォーマンス関連

• Android ハードウエアスケーラ – Cocos2d-xの改造が⼀部必要 • 最新版では︖ – 改造⽅法 (コードは省略) • JNI経由で物理サイズとバッファサイズ両⽅渡す • GLViewProtocol::_screenSizeの意味を変える • タッチ位置座標の計算⽅法を変更パフォーマンス関連

• Android ハードウエアスケーラ – 物理ピクセル数依存の計算に注意 • getFrameSizeの意味が変わる • 消滅都市のスワイプ判定はDPIで計算 – 消滅都市では3⽉末リリース予定パフォーマンス関連

• フォントデータのスリム化 – 運⽤により肥⼤化していく問題 – テクスチャサイズを⼤きくすると • メモリ消費量の増⼤ • 速度低下︖ (実感としては無かった) –8bppにしても内部で32bppに変換される • Cocos2d-xを改造して8bppのまま扱えるように • 最新版では︖ パフォーマンス関連

• フォントデータのスリム化 – PNG_COLOR_TYPE_GRAY – PixelFormat::I8からPixelFormat::A8に変更 • I8の場合、その後32bppに変換される – フォントの場合のみA8を使⽤するように • 引数としてフラグを追加パフォーマンス関連

• 縁ありフォントの8bpp化 – Bitmap Font Generatorのオプション – ビット単位データの意味を変えられる • 4bitで縁、残り4bitでグリフパフォーマンス関連 – 階調が少なくなる – 描画⽤シェーダの追加

パフォーマンス関連 float texVal = texture2D(CC_Texture0, v_texCoord).a; float intensity = texVal > 0.5 ? texVal * 2.0 - 1.0 : 0.0; vec4 color = vec4(intensity, intensity, intensity, texVal > 0.5 ? 1.0 : texVal * 2.0); gl_FragColor = v_fragmentColor * color;

カスタムシェーダとゲーム内表現

• セピア⾊にする機能 – そんなに複雑なことはしてないのですぐできる – ノベル画⾯の回想シーンで使⽤ – ※ネタバレ注意※ (ストーリーシナリオ4章) カスタムシェーダとゲーム内表現

• HSB調整シェーダ – そんなに複雑なことは(以下略) – 同⼀リソースをパラメータで⾊変え – レーザーバリア演出で使⽤ (上級者向けスキル) カスタムシェーダとゲーム内表現

• シェーダ追加の注意点 – Androidでシェーダの再⽣成が必要 • EVENT_COME_TO_FOREGROUNDのハンドリング – いろんなタイミングで発⽣ • スリープ復帰時 • クレードルに乗せたとき – 独⾃アプリが⽴ち上がるものがある – 忘れるとシェーダが無効なままゲーム続⾏ • クラッシュすることは無い • 絵が崩れるカスタムシェーダとゲーム内表現

カスタムシェーダとゲーム内表現

Cocos2d-xとアクションゲーム -設計失敗談-

• 消滅都市 – グリー社内で初のCocos2d-xゲーム • 社内にノウハウが少ない – Cocos2d-xを使った「良い設計」とは…︖ • Cocos2d-xの便利な機能 “runAction” – これを使って書いていくのが”Cocos流” – 消滅都市でもたくさん使っていました – 普通のゲームではupdateで少しずつ更新 Cocos2d-xとアクションゲーム

• アクションゲームの部分でも多⽤ – 通常のupdate処理 + runActionを併⽤ – だんだんとワケガワカラナイヨ状態に… • なぜ︖ – 急に⼊るゲーム中の割り込み処理 – スキル発動時のカットイン演出 – チュートリアル – ポーズボタン Cocos2d-xとアクションゲーム

• 割り込み対応 (ロンチ時) – ノードに対してpause関数を使⽤して⽌める • 問題が頻発 – 2回pauseしたあと1回resume – 動き出すタイミングでない状態での開始 • その場しのぎのパッチで乗り切る – だんだんとコードがカオス化 – QAで発覚するバグが頻発 (リリース遅延) – 「俺、ゲーム部分触りたくない」と⾔われる Cocos2d-xとアクションゲーム

• 2014年秋にゲーム部分の全作り直し – ほぼ「消滅都市２」に – updateループによって動く設計に変更 • ⽌める場合はupdate呼び出さない • いわゆる「普通のゲーム」の作り⽅ – runActionを使⽤しないように • 引き続きゲーム画⾯以外では使⽤ Cocos2d-xとアクションゲーム

• とは⾔えrunActionは便利︕ – update駆動で停⽌再開系コードはスッキリ – 軌道計算等の記述が⾯倒に… • 裏ワザ︖ – update駆動にしつつActionを使⽤する – いいとこ取りできる Cocos2d-xとアクションゲーム

Cocos2d-xとアクションゲームアクションの開始コード pAction->startWithTarget(pSprite); pAction->retain(); 毎フレーム実行するコード pAction->step(delta); if (pAction->isDone()) { pAction->release(); }

おまけ : iOS8とプチフリ問題

• iOS8以降でプチフリ問題が発⽣ – ゲーム開始5分後に1秒少々ハングする – 以後、ゲームを再起動するまで起きなくなる – アクションゲームでは致命的 • β版でも認識していた – 正式版で直るだろうと放置 – 正式版でも起こってしまい絶望 – その後のバージョンアップでも直る気配がない iOS8とプチフリ問題

• タイミングが悪かった (同時期) iOS8とプチフリ問題 – iOS8のリリース – 消滅都市のランキング機能追加 • 「プチフリのせいで失敗」報告が続出 • 本当にごめんなさいぃぃ…(´︔ω︔｀) • 原因全く掴めず – ⾒当もつかない – ⾟く憂鬱な年末年始を過ごす

• 調査によって状況は判明 – EAGLContext presentRenderBuffer – 制御が返ってこなくなる • 30FPSに落とす実験 – プチフリが起こらなくなる(︕) – とは⾔え、クオリティが低すぎて話にならない • 60FPSと30FPSの差異はなんだろう︖ – presentRenderBufferにかかる時間 iOS8とプチフリ問題

• 修正⽅法を検討 – CPU負荷が⾼過ぎるのか… ︖ – GPU負荷が⾼過ぎるのか… ︖ – メモリ消費量が多すぎるのか…︖ – glFlushすると何とかなるのか…︖ – 適当にsleep⼊れてみればいいか︖ (ヤケクソ) iOS8とプチフリ問題

• ⻑期の調査によって修正⽅法が判明 iOS8とプチフリ問題 if (_skipNextFrame) { _skipNextFrame = false; return; } CFTimeInterval frameStartTime = CACurrentMediaTime(); [EAGLContext setCurrentContext: [(CCEAGLView*)director->getOpenGLView() ->getEAGLView() context]]; director->mainLoop(); CFTimeInterval elapsed = CACurrentMediaTime() - frameStartTime; CFTimeInterval frameTime = [(CADisplayLink*)_displayLink duration] * [(CADisplayLink*)_displayLink frameInterval]; _skipNextFrame = ( frameTime < elapsed );

おまけ終わりここから本編です

• ネイティブゲーム開発者積極採⽤中 – 未だ⾒ぬIPを⼀緒に作り上げませんか︖ 本編 (宣伝) 詳細は http://jobs.gree.net/jp/ja/ まで！

WRIGHT FLYER STUDIOS ご清聴ありがとうございました︕ このあと懇親会をお楽しみください︕

Cocos2d-x 3.0を使ったゲーム “消滅都市” の開発事例

Cocos2d-x 3.0を使ったゲーム “消滅都市” の開発事例

More Decks by gree_tech

Other Decks in Technology

Featured

Transcript