braindots-開発秘話- cocos2d-x3.5 開発事例 -
TRANSCRIPT
-Cocos2d-x3.5での開発事例-
株式会社トランスリミット
Cocos Talks #5 (2015/07/23)
アジェンダ
会社概要 ゲーム概要 開発環境
物理ゲームの 開発
その他 苦労したこと
まとめ
会社紹介
提供サービス1300万DL 100万DL
アジェンダ
開発環境
物理ゲームの 開発
その他 苦労したこと
まとめ
ゲーム概要会社概要
ゲーム概要
今度は描く脳トレ!
BrainDotsの遊び方
線を描いて
ぶつける
BrainDotsの遊び方
BrainDotsの遊び方
ペンの種類は30種類以上
300以上のステージ
プレイ動画共有
ユーザーのプレイ動画
俺のプレイ動画
グローバルで流行ると…
自己紹介川端 和樹
(Kawabata_Lemon)
株式会社トランスリミット 2015年度新卒入社
@Kawabata_Lemon
クライアントサイドエンジニア
アジェンダ
物理ゲームの 開発
その他 苦労したこと
まとめ
開発環境ゲーム概要会社概要
開発環境
開発期間は2ヶ月ちょっと
基本的な機能 ブラッシュアップ
社内ライブラリの開発も並行して実装
開発環境
Cocos2d-x
Translimit-core(社内ライブラリ)
ゲーム部分(BrainDots)
SNSシェア、通信処理、プレイ録画、 広告、サウンド、暗号化、課金、ローカライズ
開発環境物理エンジン
Cocos2d-x 3.0から標準実装されている 物理エンジンを使用
こちらは使わず。
開発環境
->当初は最新だった3.6をベースに開発開始
当初は最新版であったCocos2d-x3.6で開発開始したが… ピクつき問題に遭遇した
開発環境->試しにCocos2d-xのcpp-testで3.5と3.6で
試してみると3.5なら発生しないことが発覚
＿人人人人人人人人人人人人人人人人人＿ ＞ Cocos2d-x3.5にダウングレード ＜ ￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣
動画共有EveryPlayを使用
->Cocosのオーディオが録音できない(Android)
->Cricket Audio Engineを導入
アジェンダ
その他 苦労したこと
まとめ
開発環境ゲーム概要会社概要
物理ゲームの 開発
物理システムを使った開発
PhysicsWorld
PhysicsBody
PhysicsShape
PhysicsContact
PhysicsJoint
Cocos2d-xの物理エンジン(Chipmunk) が提供するもの
->重力とかを持つ物理世界
->オブジェクトの剛体
->剛体に含まれる単位図形
->オブジェクトとの衝突イベント
->物体を世界に繋ぎとめるもの
描いたものに剛体を与えるPhysicsShapeで作成できる図形
Circle Box Polygon
この図形のみで描いた物に剛体を作る
描いたものに剛体を与える
タッチした点を保存
onTouchBegan,onTouchMoved
描いたものに剛体を与える
図形を図形で結ぶ
手を離したタイミングで..
onTouchEnded
最適化が必要だったこの工程だと追加された点に合わせて図形が
めちゃ増える
iPod Touch 4Genで重くなるくらい 剛体の計算が辛くなった
ましてやAndroidなんて…(ボソッ
剛体を減らすような工夫が必要でした。
最適化1図形の描画はするけど剛体は追加しない
見た目
剛体
なんか違和感
最適化2四角形を追加する最低距離を長めに取る
あんまり長く取り過ぎたら違和感
最終的に
中間の丸をすべて取り除く
結果として剛体は約半分に
->Androidのミッドレンジ端末でもまあまあ動く
ギミックの開発
スイッチとレーザー
ベルトコンベア
動くオブジェクト
ピン
物理のイベント
onContactBegin
onContactSeparate
onContactPresolve
onContactPostSolve
物体がぶつかり合う時にはイベントが発生する
衝突したとき
離れたとき
衝突中
衝突後
ベルトコンベア
上に乗っているオブジェクトを加速(減速)
ベルトコンベアベルトコンベアに乗ったら配列に追加
Updateで配列中のオブジェクトをベルトコンベアの速度になるように調整する
onContactBegin
ベルトコンベア
ベルトコンベアに離れたら配列から外す
onContactSeparate
スイッチとレーザー
T
ノード(スイッチ)が他のノード(レーザー) に影響を与える
スイッチとレーザー
Tレーザーを先に生成して
スイッチを生成
スイッチとレーザー
T
ボールとスイッチがぶつかったら
onContactBegin
スイッチとレーザー
T
レーザーを消す
動くオブジェクトAction(MoveByとか)で移動するオブジェクト
剛体もついてくるためアニメーションさせるだけで 簡単にリフトなどが実装できた
ピン(PhysicsJoint)オブジェクトを空間内に止めるためのオブジェクト
ボールが上に乗ると
ピン(PhysicsJoint)オブジェクトを空間内に止めるためのオブジェクト
重みで回転する
動くオブジェクトとピンの注意点
PhysicsJointも、剛体のrunActionもPhysicsWorld が存在しない状態で生成すると落ちる
onEnterTransitionDidFinish()->オブジェクトのでピンを追加するようにしたり、runActionを開始
アジェンダ
まとめ
開発環境ゲーム概要会社概要
物理ゲームの 開発
その他 苦労したこと
苦労したその他の点
Androidで画面が黒くなる
AndroidでClippingNodeが効かない
Androidで 画面やオブジェクトが黒くなる現象は2つのパターンがあった
1.動画広告から戻ってきた時にラベルやスプライトが真っ黒になる
2.RenderTextureで生成したテクスチャが バックグラウンドからもどると…
1.動画広告から戻ってきた時にラベルやスプライトが真っ黒になる
原因:動画広告のコールバック時にはOpenGLのContextが存在していなかった
Cocos
Java
動画広告
Cocos
Java
Callback
解決策JavaからうけたコールバックをCocosの Scheduler処理で実行するようにした。
Director::getInstance()->getScheduler()-> schedule(CC_SCHEDULE_SELECTOR(Callback::doCallback), this, 0, false);
// Cocosのスケジューラで実行するためOpenGLの復帰後に必ず実行される
2.RenderTextureで生成したテクスチャがバックグラウンドからもどると真っ黒になる
ゲーム内で使用する方眼紙の背景はRenderTextureで動的に生成している。
(端末によって解像度が違うため)
->内部でキャッシュ機構を作って解像度ごとにテクスチャをマッピングして持っておくよ
うに実装した。
2.RenderTextureで生成したテクスチャがバックグラウンドからもどると…
ところがバックグラウンドに入って戻ってくるとそのテクスチャが解放されて真っ黒に
原因:AndroidのOpenGLの挙動でバックグラウンド時に入った際、一旦テクスチャ情報がリセットされていた
画像ファイルから作られたテクスチャ類は復活されるが動的に生成したテクスチャは復活されない
->結局、必要な方眼パターンを初回時にRenderTextureですべて生成し画像ファイルで保存
して使うようにした。
解決策
AndroidでClippingNodeが効かない
解決法1.AppActivity.javaの設定をいじる
2.RenderTextureのオプションを設定
@Override public Cocos2dxGLSurfaceView onCreateView() { // ClippingNodeのバグ対応 glSurfaceView = new Cocos2dxGLSurfaceView(this); this.hideSystemUI(); glSurfaceView.setEGLConfigChooser(5, 6, 5, 0, 16, 8); return glSurfaceView; }
RenderTexture::create(paddedSize.width, paddedSize.height, Texture2D::PixelFormat::RGBA8888, GL_DEPTH24_STENCIL8_OES);
アジェンダ
開発環境ゲーム概要会社概要
物理ゲームの 開発
その他 苦労したこと
まとめ
まとめ物理ゲームは楽しいけどパフォーマンス的に
制約が求められることになるため グローバルで作るのはなかなか難しい
->剛体をいかにして減らすかなどの最適化が 必要となる。
まとめクロスプラットフォームゲームエンジン
とはいえ Android(iOS)にしか起こらない問題は
付きまとう
->OS固有のみならず、端末固有の問題など それもまた最適化が必要となるため
完全にすべての端末に対応することは難しい。
まとめそれでもやっぱり便利ではあるので
Cocos2d-xはオススメです。
->中のコードも見える
->必要に応じてカスタマイズもできる
アジェンダ
開発環境ゲーム概要会社概要
物理ゲームの 開発
その他 苦労したこと
まとめ
世界に響くサービスを作りたい エンジニア/デザイナー募集中！
https://www.wantedly.com/projects/21002
ご清聴ありがとうございました