Cocos Talk #5で話したものです

1. -Cocos2d-x3.5での開発事例-
株式会社トランスリミット
Cocos Talks #5 (2015/07/23)

2. アジェンダ
会社概要 ゲーム概要 開発環境
物理ゲームの
開発
その他
苦労したこと
まとめ

3. 会社紹介

4. 提供サービス
1300万DL 100万DL

6. アジェンダ
開発環境
物理ゲームの
開発
その他
苦労したこと
まとめ
ゲーム概要会社概要

7. ゲーム概要
今度は描く脳トレ!

8. BrainDotsの遊び方
線を描いて
ぶつける

9. BrainDotsの遊び方

10. BrainDotsの遊び方
ペンの種類は30種類以上
300以上のステージ

11. プレイ動画共有

12. ユーザーのプレイ動画

13. 俺のプレイ動画

14. グローバルで流行ると…

16. 自己紹介
川端 和樹
(Kawabata_Lemon)
株式会社トランスリミット
2015年度新卒入社
@Kawabata_Lemon
クライアントサイドエンジニア

17. アジェンダ
物理ゲームの
開発
その他
苦労したこと
まとめ
開発環境ゲーム概要会社概要

18. 開発環境
開発期間は2ヶ月ちょっと
基本的な機能 ブラッシュアップ
社内ライブラリの開発も並行して実装

19. 開発環境
Cocos2d-x
Translimit-core(社内ライブラリ)
ゲーム部分(BrainDots)
SNSシェア、通信処理、プレイ録画、
広告、サウンド、暗号化、課金、ローカライズ

20. 開発環境
物理エンジン
Cocos2d-x 3.0から標準実装されている
物理エンジンを使用
こちらは使わず。

21. 開発環境
->当初は最新だった3.6をベースに開発開始
当初は最新版であったCocos2d-x3.6で開発開始したが…
ピクつき問題に遭遇した

22. 開発環境
->試しに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￣

23. 動画共有
EveryPlayを使用
->Cocosのオーディオが録音できない(Android)
->Cricket Audio Engineを導入

24. アジェンダ
その他
苦労したこと
まとめ
開発環境ゲーム概要会社概要
物理ゲームの
開発

25. 物理システムを使った開発
PhysicsWorld
PhysicsBody
PhysicsShape
PhysicsContact
PhysicsJoint
Cocos2d-xの物理エンジン(Chipmunk)
が提供するもの
->重力とかを持つ物理世界
->オブジェクトの剛体
->剛体に含まれる単位図形
->オブジェクトとの衝突イベント
->物体を世界に繋ぎとめるもの

26. 描いたものに剛体を与える
PhysicsShapeで作成できる図形
Circle Box Polygon
この図形のみで描いた物に剛体を作る

27. 描いたものに剛体を与える
タッチした点を保存
onTouchBegan,onTouchMoved

28. 描いたものに剛体を与える
図形を図形で結ぶ
手を離したタイミングで..
onTouchEnded

29. 最適化が必要だった
この工程だと追加された点に合わせて図形が
めちゃ増える
iPod Touch 4Genで重くなるくらい
剛体の計算が辛くなった
ましてやAndroidなんて…(ボソッ
剛体を減らすような工夫が必要でした。

30. 最適化1
図形の描画はするけど剛体は追加しない
見た目
剛体
なんか違和感

31. 最適化2
四角形を追加する最低距離を長めに取る
あんまり長く取り過ぎたら違和感

32. 最終的に
中間の丸をすべて取り除く
結果として剛体は約半分に
->Androidのミッドレンジ端末でもまあまあ動く

33. ギミックの開発
スイッチとレーザー
ベルトコンベア
動くオブジェクト
ピン

34. 物理のイベント
onContactBegin
onContactSeparate
onContactPresolve
onContactPostSolve
物体がぶつかり合う時にはイベントが発生する
衝突したとき
離れたとき
衝突中
衝突後

35. ベルトコンベア
上に乗っているオブジェクトを加速(減速)

36. ベルトコンベア
ベルトコンベアに乗ったら配列に追加
Updateで配列中のオブジェクトをベルトコンベ
アの速度になるように調整する
onContactBegin

37. ベルトコンベア
ベルトコンベアに離れたら配列から外す
onContactSeparate

38. スイッチとレーザー
T
ノード(スイッチ)が他のノード(レーザー)
に影響を与える

39. スイッチとレーザー
T
レーザーを先に生成して
スイッチを生成

40. スイッチとレーザー
T
ボールとスイッチがぶつかったら
onContactBegin

41. スイッチとレーザー
T
レーザーを消す

42. 動くオブジェクト
Action(MoveByとか)で移動するオブジェクト
剛体もついてくるためアニメーションさせるだけで
簡単にリフトなどが実装できた

43. ピン(PhysicsJoint)
オブジェクトを空間内に止めるためのオブジェクト
ボールが上に乗ると

44. ピン(PhysicsJoint)
オブジェクトを空間内に止めるためのオブジェクト
重みで回転する

45. 動くオブジェクトとピンの
注意点
PhysicsJointも、剛体のrunActionもPhysicsWorld
が存在しない状態で生成すると落ちる
onEnterTransitionDidFinish()->オブジェクトの
でピンを追加するようにしたり、runActionを開始

46. アジェンダ
まとめ
開発環境ゲーム概要会社概要
物理ゲームの
開発
その他
苦労したこと

47. 苦労したその他の点
Androidで画面が黒くなる
AndroidでClippingNodeが効かない

48. Androidで
画面やオブジェクトが黒くなる
現象は2つのパターンがあった
1.動画広告から戻ってきた時にラベルやスプライトが
真っ黒になる
2.RenderTextureで生成したテクスチャが
バックグラウンドからもどると…

49. 1.動画広告から戻ってきた時にラベルやスプ
ライトが真っ黒になる
原因:動画広告のコールバック時にはOpenGLの
Contextが存在していなかった
Cocos
Java
動画広告
Cocos
Java
Callback

50. 解決策
JavaからうけたコールバックをCocosの
Scheduler処理で実行するようにした。
Director::getInstance()->getScheduler()->
schedule(CC_SCHEDULE_SELECTOR(Callback::doCallback),
this, 0, false);
// Cocosのスケジューラで実行するためOpenGLの復帰後に必ず実行される

51. 2.RenderTextureで生成したテクスチャが
バックグラウンドからもどると真っ黒になる
ゲーム内で使用する方眼紙の背景は
RenderTextureで動的に生成している。
(端末によって解像度が違うため)

52. ->内部でキャッシュ機構を作って解像度ごと
にテクスチャをマッピングして持っておくよ
うに実装した。
2.RenderTextureで生成したテクスチャが
バックグラウンドからもどると…
ところがバックグラウンドに入って戻ってく
るとそのテクスチャが解放されて真っ黒に

53. 原因:AndroidのOpenGLの挙動でバックグラウンド時
に入った際、一旦テクスチャ情報がリセットされていた
画像ファイルから作られたテクスチャ類は復活されるが
動的に生成したテクスチャは復活されない
->結局、必要な方眼パターンを初回時に
RenderTextureですべて生成し画像ファイルで保存
して使うようにした。
解決策

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

55. アジェンダ
開発環境ゲーム概要会社概要
物理ゲームの
開発
その他
苦労したこと
まとめ

56. まとめ
物理ゲームは楽しいけどパフォーマンス的に
制約が求められることになるため
グローバルで作るのはなかなか難しい
->剛体をいかにして減らすかなどの最適化が
必要となる。

57. まとめ
クロスプラットフォームゲームエンジン
とはいえ
Android(iOS)にしか起こらない問題は
付きまとう
->OS固有のみならず、端末固有の問題など
それもまた最適化が必要となるため
完全にすべての端末に対応することは難しい。

58. まとめ
それでもやっぱり便利ではあるので
Cocos2d-xはオススメです。
->中のコードも見える
->必要に応じてカスタマイズもできる

59. アジェンダ
開発環境ゲーム概要会社概要
物理ゲームの
開発
その他
苦労したこと
まとめ

60. 世界に響くサービスを作りたい
エンジニア/デザイナー募集中！
https://www.wantedly.com/projects/21002

61. ご清聴ありがとうございました