Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Cocos2d-x Talks #2(2015/3/13)発表資料
https://atnd.org/events/62594

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

発表者
グリー株式会社 Wright Flyer Studios部 リードエンジニア 渡部晋司

概要
“消滅都市” はCocos2d-x 3.0を使い少人数、短期間で開発されたスマートフォン向けゲームです。
本セッションでは、その開発、運用プロセスにおいて得られた経験を元に良かった点、悪かった点を実際の事例を交えて紹介し、皆様のお役に立てればと思います。

gree_tech

March 13, 2015
Tweet

More Decks by gree_tech

Other Decks in Technology

Transcript

  1. Copyright © 2015 Wright Flyer Studios, Inc. All Right Reserved.

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

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

    ゲーム紹介 • 現代を舞台にしたスマートフォンゲーム – iOS & Android • 2014年5⽉下旬にリリース • おかげさまで350万ダウンロードぐらい • CM放映中︕
  4. Copyright © 2015 Wright Flyer Studios, Inc. All Right Reserved.

    開発体制 プロデューサー 1名 ディレクター 1名 PM 1名 クライアント プログラマー 4名 サーバー プログラマー 3名 アート 4名 テクニカル アート 1名 合計17名 ゲーム デザイナー 2名
  5. Copyright © 2015 Wright Flyer Studios, Inc. All Right Reserved.

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

    • 3Dゲームだと厳しそうだった – 開発期間 – 開発メンバーの⼈数 • 本開発半年でのリリースが絶対条件 – ギャグかと思ったがマジだった 開発開始前の状況
  7. Copyright © 2015 Wright Flyer Studios, Inc. All Right Reserved.

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

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

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

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

    Cocos2d-xとの付き合い⽅ -開発環境と周辺ライブラリ-
  12. Copyright © 2015 Wright Flyer Studios, Inc. All Right Reserved.

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

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

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

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

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

    Cocos2d-xとの付き合い⽅ -UI制作環境-
  18. Copyright © 2015 Wright Flyer Studios, Inc. All Right Reserved.

    • UI作成の環境整備 – ゲームの画⾯数が多い – UI制作スピードがプロジェクトの成否を左右 • Cocos2d-x向けのUIツール – Cocos Builder – Cocos Studio (旧称 : CocoStudio) – などなど UI制作環境
  19. Copyright © 2015 Wright Flyer Studios, Inc. All Right Reserved.

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

    UI制作環境 PhotoshopによるUI制作
  21. Copyright © 2015 Wright Flyer Studios, Inc. All Right Reserved.

    UI制作環境 psdファイルのレイヤー構造
  22. Copyright © 2015 Wright Flyer Studios, Inc. All Right Reserved.

    UI制作環境 UI部分のプログラムを実装してゲーム画⾯に
  23. Copyright © 2015 Wright Flyer Studios, Inc. All Right Reserved.

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

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

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

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

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

    • GPUのパフォーマンス調査ツール – Xcode • フレームデバッガ機能 • Instruments – Adreno Profiler – PerfHUD ES パフォーマンス関連
  29. Copyright © 2015 Wright Flyer Studios, Inc. All Right Reserved.

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

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

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

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

    パフォーマンス関連 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);
  34. Copyright © 2015 Wright Flyer Studios, Inc. All Right Reserved.

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

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

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

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

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

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

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

    パフォーマンス関連 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;
  42. Copyright © 2015 Wright Flyer Studios, Inc. All Right Reserved.

    カスタムシェーダとゲーム内表現
  43. Copyright © 2015 Wright Flyer Studios, Inc. All Right Reserved.

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

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

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

    カスタムシェーダとゲーム内表現
  47. Copyright © 2015 Wright Flyer Studios, Inc. All Right Reserved.

    カスタムシェーダとゲーム内表現
  48. Copyright © 2015 Wright Flyer Studios, Inc. All Right Reserved.

    Cocos2d-xとアクションゲーム -設計失敗談-
  49. Copyright © 2015 Wright Flyer Studios, Inc. All Right Reserved.

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

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

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

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

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

    Cocos2d-xとアクションゲーム アクションの開始コード pAction->startWithTarget(pSprite); pAction->retain(); 毎フレーム実行するコード pAction->step(delta); if (pAction->isDone()) { pAction->release(); }
  55. Copyright © 2015 Wright Flyer Studios, Inc. All Right Reserved.

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

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

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

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

    • ⻑期の調査によって修正⽅法が判明 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 );
  60. Copyright © 2015 Wright Flyer Studios, Inc. All Right Reserved.

    おまけ終わり ここから本編です
  61. Copyright © 2015 Wright Flyer Studios, Inc. All Right Reserved.

    • ネイティブゲーム開発者積極採⽤中 – 未だ⾒ぬIPを⼀緒に作り上げませんか︖ 本編 (宣伝) 詳細は http://jobs.gree.net/jp/ja/ まで!
  62. Copyright © 2015 Wright Flyer Studios, Inc. All Right Reserved.

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