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

by gree_tech

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

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のバージョン

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

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);

Slide 37

Slide 37 text

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Slide 44

Slide 44 text

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;

Slide 45

Slide 45 text

Slide 46

Slide 46 text

Slide 47

Slide 47 text

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Slide 50

Slide 50 text

Slide 51

Slide 51 text

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

Slide 63

Slide 63 text

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 );