1. cocos2dとBox2Dの何か
第8回 Sendai WorldWide Developer Conference - @tototti
Date 2012/08/25

2. 自己紹介

3. 自己紹介
✤ twitter : @tototti
✤ iOSとかjQueryで何かをカチャカチャ...ッターンと作っ
てます。

4. 宣伝

5. 宣伝
✤ SocialBeer by AMBER RONDO
✤ 仙台オクトーバーフェスト2012 対応版が出ます
✤ ビール図鑑に、13種追加されます
✤ 2012年9月14日（金）∼23日（日）
✤ 毎日行って、一日1.3杯飲めばコンプリート！

6. cocos2d
✤ ゲーム用のフレームワーク
✤ ゲーム以外にも使えるよ
✤ OpenGLを使いやすくしているよ
✤ 名前の通り2次元だよ
✤ 簡単に高速な描画を実現
✤ そう、cocos2dならね

7. Box2D
✤ 物理エンジン
✤ ぶつかったり・跳ね返ったりをシミュレーション
✤ 加速度、摩擦、衝突などを計算してくれるよ
✤ 簡単に物理シミュレーションを実現
✤ そう、Box2Dならね

8. 参考図書
✤ cocos2dで作る iPhone＆iPadゲームプロ
グラミング
✤ 3,990円

9. その１・インストール

10. インストール
✤ cocos2d公式サイトより
✤ http://www.cocos2d-iphone.org/download
✤ ver1.0.1 をダウンロード
✤ install-templates.sh を実行して、プロジェクトテンプ
レートもインストールしよう

11. 新規プロジェクト作成

12. 新規プロジェクト実行
✤ 何やらそれっぽいものが動きます

13. その２：Box２D基礎

14. Box2D
✤ C++で記述されているライブラリ
✤ Objective-Cではないので汎用的
✤ iPhone以外でも使用可能
✤ 拡張子を .mm にする必要あり

15. 特徴
✤ 縦横のスケールはピクセルではない
✤ なぜかメートル単位
✤ defaultでは 32pixel = 1m に定義されている
✤ 物理演算機能のみ。描画は行わない。
✤ 今回は、描画はcocos2dで行う
✤ 言い換えれば、描画は任意のフレームワークで可能

16. フレームごとの処理
1/60 sec毎の処理
Box2Dで物体の座標を演算
cocos2dで各物体を描画

17. その３：Box２D解析

18. templateファイル

19. 2種類の物体
✤ 静的ボディ
✤ 座標が固定の物体。動かない物体。
✤ 動的ボディ
✤ 他の物理影響を受けて、動く物体。

20. 物体の性質
✤ 密度(density) = 重さ
✤ 動的ボディの場合、落下速度などに影響
✤ 摩擦(friction)
✤ 表面を移動するときなどに影響
✤ 反発(restitution)
✤ 衝突した際の、跳ね返りなどに影響

21. b2Worldクラス
すべての物体を管理するコンテナ。The World。
// 宣言
@interface HelloWorldLayer : CCLayer
{
b2World* world;
GLESDebugDraw *m_debugDraw;
}
// 初期化
// gravity = 重力
// doSleep = 他と接していない物体の物理演算をする？フラグ
world = new b2World(gravity, doSleep);

22. ボディの形状(shape)
✤ b2PolygonShape
✤ SetAsEdge(x, y)
✤ SetAsBox(width, height)
✤ Set(array, array)
✤ b2CircleShape

23. 4辺に静的ボディが配置されてる
// Define the ground body.
b2BodyDef groundBodyDef;
groundBodyDef.position.Set(0, 0); // bottom-left corner
b2Body* groundBody = world->CreateBody(&groundBodyDef);
b2PolygonShape groundBox;
// bottom
groundBox.SetAsEdge(b2Vec2(0,0), b2Vec2(screenSize.width/
PTM_RATIO,0));
groundBody->CreateFixture(&groundBox,0);
// top
groundBox.SetAsEdge(b2Vec2(0,screenSize.height/PTM_RATIO),
b2Vec2(screenSize.width/PTM_RATIO,screenSize.height/PTM_RATIO));
groundBody->CreateFixture(&groundBox,0);
// left
......

24. A,B,C,Dの箱は動的ボディ
// Define the dynamic body.
//Set up a 1m squared box in the physics world
b2BodyDef bodyDef;
bodyDef.type = b2_dynamicBody;
bodyDef.position.Set(p.x/PTM_RATIO, p.y/PTM_RATIO);
bodyDef.userData = sprite;
b2Body *body = world->CreateBody(&bodyDef)
// Define another box shape for our dynamic body.
b2PolygonShape dynamicBox;
dynamicBox.SetAsBox(.5f, .5f);//These are mid points for our
1m box
// Define the dynamic body fixture.
b2FixtureDef fixtureDef;
fixtureDef.shape = &dynamicBox;
fixtureDef.density = 1.0f;
fixtureDef.friction = 0.1f;
body->CreateFixture(&fixtureDef);

25. 余談
✤ #define RTM_RATIO
✤ ディフォルトでは32 だが、 32.0 にした方がいい
✤ 割り算すると、小数点が消えてしまうため

26. 4辺を若干狭くしてみる
底も傾けて、より物理っぽく。

27. utility関数
// ピクセル単位の座標値を、メートル単位の座標ベクトルに変換
-(b2Vec2) toMeterVectorX:(float)x Y:(float)y {
return b2Vec2(x / PTM_RATIO, y / PTM_RATIO);
}

28. 4辺の静的オブジェクト座標
// bottom
groundBox.SetAsEdge([self toMeterVectorX:10 Y:10],
[self toMeterVectorX:(screenSize.width - 10) Y:50]);
groundBody->CreateFixture(&groundBox,0);
// top
groundBox.SetAsEdge([self toMeterVectorX:10
Y:(screenSize.height-10)],
[self toMeterVectorX:(screenSize.width - 10)
Y:(screenSize.height-10)]);
groundBody->CreateFixture(&groundBox,0);
// left
groundBox.SetAsEdge([self toMeterVectorX:10
Y:(screenSize.height-10)],
[self toMeterVectorX:10 Y:10]);
groundBody->CreateFixture(&groundBox,0);
// right
groundBox.SetAsEdge([self toMeterVectorX:(screenSize.width-10) Y:
(screenSize.height-10)],

29. 円形Objectを転がしてみる

30. 円形Objectを転がしてみる
// Define another box shape for our dynamic body.
b2CircleShape circle;
circle.m_radius = 0.5;
// Define the dynamic body fixture.
b2FixtureDef fixtureDef;
fixtureDef.shape = &circle;
fixtureDef.density = 1.0f;
fixtureDef.friction = 0.3f;
body->CreateFixture(&fixtureDef);

31. おしまい