2016/8/18 イベント＆コミュニティスペース dots.にて開催したCocos2d-x(JS) ハンズオン #11 「2D物理エンジン」の資料です。Cocos2d-xで利用可能なBox2DとChipmunkについて紹介し、実際に両物理エンジンに触れていただきました。

1. Cocos2d-x(JS) ハンズオン #11
2D物理エンジン
Nobollel株式会社 清水友晶

2. 清水 友晶
 Nobollel株式会社 CTO
チームビルディング
スマホアプリ開発
Cocos2d-xサポート
TECH.C.非常勤講師
 プライベートでも
Cocos2d-xに関するゲーム開発
講演活動
執筆活動
 マイブーム: Ingress
 チラ裏開発メモ: http://tks2.net/memo
 SlideShare: http://www.slideshare.net/doraemonsss
 Facebook: http://www.facebook.com/doraemonsss

4. http://line.me/S/sticker/1085672

5. 2D物理エンジン
 2D物理エンジン
 Box2D
 Chipmunk
 Cocos2d-x(JS)で物理エンジンを扱う
 Box2D
 Chipmunk

6. 2D物理エンジン

7. Box2D
 http://box2d.org/
 最新バージョン: Box2D v2.3.2
 オープンソース
 元々C++用に作られたが、数多くのプログラミング
言語に移植されている
 ゲーム用2D物理エンジン
 古典力学的な法則をシミュレーション
 質量
 速度
 摩擦
 ピクセルをメートルに変換する係数を用意する必要
がある

8. Chipmunk
 https://chipmunk-physics.net/
 最新バージョン: Chipmunk v7
 オープンソース
 元々C言語用に作られたが、数多くのプロ
グラミング言語に移植されている
 ゲーム用2D物理エンジン
 ピクセル単位で物理シミュレーション

9. 物理エンジンを使ってみる

10. 画像ファイル
 http://tks2.net/handson/20160818/handson.zip

11. Box2D
0. 前準備
1. 物理空間の準備
2. ブロックの配置
3. 画像と物体の関係
4. タップ処理

12. 0. 前準備 (Box2D)
 https://goo.gl/2WdUvB
 main.js
 解像度の変更
 project.json
 modulesにexternalを追加
 src/resource.js
 リソース追加

13. 1. 物理空間の準備 (Box2D)
 https://goo.gl/5gWUuw
 重力の設定
 b2World
 毎フレーム更新処理
 scheduleUpdate関数
 物理シミュレーション
 world.Step

14. 2. ブロックの配置 (Box2D)
 https://goo.gl/I8jYBs
 物体の特性
 b2FixtureDef
 物理特性
 b2BodyDef
 物体の作成
 world.CreateBody

15. 3. 画像と物体の関係 (Box2D)
 https://goo.gl/gKPUzz
 物体がなくなった時の画面表示の確認
 画像と物体の同期
 物体に合わせ、画像の位置と角度を変更する

16. 4. タップ処理 (Box2D)
 https://goo.gl/I8jYBs
 タッチイベント
 物体の削除
 画像
 物体

17. Chipmunk
0. 前準備
1. 物理空間の準備
2. ブロックの配置
3. タップ処理
4. 画像の表示

18. 0. 前準備 (Chipmunk)
 https://goo.gl/s4Jqow
 Box2Dの物理空間がない状態にする

19. 1. 物理空間の準備 (Chipmunk)
 https://goo.gl/4LeQkq
 物理空間
 cp.Space
 Chipmunkでは実世界の測定単
位系を利用しない

20. 2. ブロックの配置 (Chipmunk)
 https://goo.gl/aQVZdn
 物理空間に物体を追加
 cp.Body
 cp.BoxShape
 物理空間の更新
 worls.step
 デバッグ表示
 cc.PhysicsDebugNode

21. 3. タップ処理 (Chipmunk)
 https://goo.gl/8cBezu
 タッチイベント
 物体の削除

22. 4. 画像の表示 (Chipmunk)
 https://goo.gl/ZocjFZ
 shapeに画像をセット
 update関数で画像の位置と角度
を更新する
 物体の削除時
 画像も削除する

23. 作業はここまで

24. 参考になるサイト
 Cocos公式Wiki
http://www.cocos2d-
x.org/wiki/Cocos2d-JS
 Cocos2d-JS APIリファレンス
http://cocos2d-x.org/wiki/Reference
 Qiita
（tag: cocos2d-js）
https://qiita.com

25. おわり
 ありがとうございました