1. cocos2d-x上で
Box2Dを利用して
ゲームを作ってみよう！
株式会社TKS2 清水友晶

2. 清水 友晶
— 株式会社TKS2
http://tks2.net
— スマートフォンアプリ開発
(iOS, Android, Windows Phone 8)
Webコンテンツ開発
— cocos2d-xへの開発参加
cocos2d-xを利用したアプリ開発
講演活動
執筆活動
— Twitter: tks2shimizu
— Blog: http://tks2.net/memo
— SlideShare: http://www.slideshare.net/doraemonsss
— Facebook: http://www.facebook.com/doraemonsss

3. もうすぐ出版されます！
入�門編 応用編
CCOOMMIINNGG CCOOMMIINNGG
SSOOOONN SSOOOONN

4. おやこでスマほん
— 株式会社スマートエデュケーション

5. — http://cocos2d-x.jp
— cocos2d-x開発元Chukong Technologies社公認
— cocos2d-xのための自由なコミュニティー
— 入門者から上級者まで誰でもOK!!ぜひご参加を!
— cocos2d-xに関することなら何でも投稿できます!!
— https://www.facebook.com/groups/152840204871454/

6. — 4/17 第7回 shinjuku.cocos2d-x
— 4/20 cocos2d-xハンズオン勉強会
— 5/15 shinjuku.cocos2d-x初心者ハンズオン
∼MacでiOSアプリを作る開発環境を整えよう！∼
— 5/17 cocos2d-x公開講座 in 鹿児島
— 5/18 cocos2d-x実践講座 in 鹿児島
— 5/22 第8回 shinjuku.cocos2d-x
— 6/M shinjuku.cocos2d-x初心者ハンズオン
∼MacでAndroidアプリを作る開発環境を整えよう！∼
— 6/M 第9回 shinjuku.cocos2d-x

7. 目次
— cocos2d-xにおける物理エンジン
— Box2Dについて
— シェープを作成するツール「PhysicsEditor」
— Box2Dを利用してゲームを作ってみよう！
— PhysicsEditorでシェイプを作る
— cocos2d-xの縦画面表示
— 物理空間の作成
— ボールの作成
— フリッパーの作成
— 衝突判定

8. cocos2d-xにおける物理エンジン
— cocos2d-xではBox2DとChipmunkが利用できる
— 大きな違いは言語
— Box2D … C++
— Chipmunk … C言語
— どちらの方が優れているという明確な比較結果は見当
たらない
— 慣れている方を利用するのが良い
— JavaScript BindingsではChipmunkが利用されている

9. Box2Dについて
— 2D向けの物理シミュレーションライブラリ
— Box2Dホームページ
http://box2d.org/
— MKS単位系（密度:kg/m3, 加速度:m/s2）
— どんなことができるのか？
— FLASHで遊ぼう！ - API関連一覧
http://flashjp.com/apiindex.php
— cocos2d-xにおいては「project-creator」で作成した
プロジェクトは標準で利用可能

10. Box2Dについて
— Box2Dを利用するには、多くの設定が必要
— 例えば、cocos2d-xのiOS向けテンプレートプロジェクトに
は、1つの画像に対して物理構造を与えるのに17行分の記述
が書かれている
— HelloWorldクラスのaddNewSpriteAtPosition関数参照
— 複雑な物理構造を与えるには、コーディングでは難しい

11. PhysicsEditor
— 物理エンジンで利
用可能なシェイプ
を作成
— 条件によっては無
料で利用可能
http://www.codeandweb.com/physicseditor

12. PhysicsEditor
— PhysicsEditorで作成したシェイプをcocos2d-xで
利用するときは、
— 「Box2D generic (PLIST)」を選択して出力する
— GB2ShapeCache-xクラスを利用する
https://github.com/tks2shimizu/GB2ShapeCache-x

13. Box2Dを利用してゲームを作ろう！
— PhysicsEditorでシェイ
プを作る
— cocos2d-xの縦画面表示
— 物理空間の作成
— ボールの作成
— フリッパーの作成
— 衝突判定

14. プロジェクトの準備
— project-creatorによるプロジェクト作成
./create_project.py -project pinball -package net.tks2.pinball -
language cpp
— ゲームで使用する画像を「Resources」に配置
http://tks2.net/pinball/pinball.zip
— Xcodeの場合は、プロジェクトへ取り込む
— GB2ShapeCache-xクラスを「Classes」に配置
https://github.com/tks2shimizu/GB2ShapeCache-x
— Xcodeの場合は、プロジェクトへ取り込む
— Android向けは、Android.mkにGB2ShapeCache-x.cppを追加
cocos2d-2.1rc0-x-2.1.2/projects/pinball/proj.android/jni/Android.mk

15. PhysicsEditor
— PhysicsEditorのホームページよりダウンロード
http://www.codeandweb.com/physicseditor

16. PhysicsEditor
— PhysicsEditorを起動
— プロジェクト保存
— 初期設定
— Exporter
— Exporter … Box2D generics (PLIST)
— Global parameters
— PTM-Ratio (Pixel To Meter) … 1024

17. PhysicsEditor
— 「Resources」の画像を、PhysicsEditorの左ペイン
へドラッグアンドドロップ
— background.png
— ball.png
— flipper_left.png
— flipper_right.png

18. PhysicsEditor
— シェイプの作成

19. PhysicsEditor
— パラメータ設定
— アンカーポイント
— 密度
— 反発係数
— 摩擦係数
— センサー
— 任意の文字列
— ファイル出力 … Publicボタン
— 出力されたplistファイルを「Resources」ディレクトリへ配置
— Xcodeの場合は、プロジェクトへ取り込む

20. cocos2d-xの縦画面表示
— iOS
— Supported Interface Orientations
— RootViewController.mm
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)in
return UIInterfaceOrientationIsPortrait( interfaceOrientation );!
}!
!
// For ios6, use supportedInterfaceOrientations & shouldAutorotate instea
- (NSUInteger) supportedInterfaceOrientations{!
#ifdef __IPHONE_6_0!
return UIInterfaceOrientationMaskPortrait;!
#endif!
}!

21. cocos2d-xの縦画面表示
— Android
— AndroidManifest.xml
<activity android:name=".NyanBall"!
android:label="@string/app_name"!
android:screenOrientation="portrait"!
android:theme="@android:style/Theme.NoTitleBar.
android:configChanges="orientation">!
<intent-filter>!
<action android:name="android.intent.action.MAIN"
<category android:name="android.intent.category.L
</intent-filter>!
</activity>

22. 背景画像の表示
— 今回は1つの画像のみを利用して、マルチレゾリュー
ション対応を行う
— AppDelegate.cpp
bool AppDelegate::applicationDidFinishLaunching() {!
CCDirector* pDirector = CCDirector::sharedDirector();!
CCEGLView* pEGLView = CCEGLView::sharedOpenGLView();!
!
pDirector->setOpenGLView(pEGLView);!
pDirector->setDisplayStats(true);!
pDirector->setAnimationInterval(1.0 / 60);!
!
CCSize winSize = CCDirector::sharedDirector()->getWinSize();!
pDirector->setContentScaleFactor(1024 / winSize.height);!
!
CCScene *pScene = HelloWorld::scene();!
pDirector->runWithScene(pScene);!
!
return true;!
}!

23. 背景画像の表示
— background.pngの表示
— ソース編集
— HelloWorldScene.h
— HelloWorldScene.cpp
https://gist.github.com/tks2shimizu/
17994a67fdbcf89435bf

24. 物理空間の作成
— b2Worldクラスによる物理空間
（本ハンズオンでは必要最小限の設定のみとする）
— 重力の設定
— 毎フレーム更新
— 毎フレームの更新にupdate関数を利用する
— ソース編集
— HelloWorldScene.h
— HelloWorldScene.cpp
https://gist.github.com/tks2shimizu/d8c3df1f72d75d2b21ca

25. 背景画像に物理構造を与える
— シェイプデータの読込み
— 「pinball.plist」を読込む
— b2BodyDefの定義
— type
— position … PTM Ratioで割ることに注意
— userData … CCSpriteを追加
— ソース編集
— HelloWorldScene.h
— HelloWorldScene.cpp
https://gist.github.com/tks2shimizu/e69d420bc53675d982c3

26. ボールの作成
— タップを有効
— 毎フレーム処理
— ボール作成処理
— ソース編集
— HelloWorldScene.h
— HelloWorldScene.cpp
https://gist.github.com/tks2shimizu/
57e6ca5ff1494a66421e

27. フリッパーの作成
— フリッパー作成処理
— ジョイント追加
— ジョイントの制限
— ソース編集
— HelloWorldScene.h
— HelloWorldScene.cpp
https://gist.github.com/tks2shimizu/
faa011e28d9cf95df0db

28. 点数の表示
— 衝突判定
— b2ContactListenerクラス
— ソース編集
— HelloWorldScene.h
— HelloWorldScene.cpp
https://gist.github.com/tks2shimizu/
beb45a3a5e6625eb679f

29. おわり
— 次回「cocos2d-x JavaScript Bindings」について
C++とJavaScriptの違いを中心に見てみます