cocos2d-x(js) ハンズオン #11「2d物理エンジン」
TRANSCRIPT
![Page 1: Cocos2d-x(JS) ハンズオン #11「2D物理エンジン」](https://reader036.vdocuments.site/reader036/viewer/2022062502/58ab5cae1a28abbc2a8b50eb/html5/thumbnails/1.jpg)
Cocos2d-x(JS) ハンズオン #112D 物理エンジン
Nobollel 株式会社 清水友晶
![Page 2: Cocos2d-x(JS) ハンズオン #11「2D物理エンジン」](https://reader036.vdocuments.site/reader036/viewer/2022062502/58ab5cae1a28abbc2a8b50eb/html5/thumbnails/2.jpg)
清水 友晶 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
![Page 3: Cocos2d-x(JS) ハンズオン #11「2D物理エンジン」](https://reader036.vdocuments.site/reader036/viewer/2022062502/58ab5cae1a28abbc2a8b50eb/html5/thumbnails/3.jpg)
![Page 4: Cocos2d-x(JS) ハンズオン #11「2D物理エンジン」](https://reader036.vdocuments.site/reader036/viewer/2022062502/58ab5cae1a28abbc2a8b50eb/html5/thumbnails/4.jpg)
http://line.me/S/sticker/1085672
![Page 5: Cocos2d-x(JS) ハンズオン #11「2D物理エンジン」](https://reader036.vdocuments.site/reader036/viewer/2022062502/58ab5cae1a28abbc2a8b50eb/html5/thumbnails/5.jpg)
2D 物理エンジン
2D 物理エンジンBox2DChipmunk
Cocos2d-x(JS) で物理エンジンを扱うBox2DChipmunk
![Page 6: Cocos2d-x(JS) ハンズオン #11「2D物理エンジン」](https://reader036.vdocuments.site/reader036/viewer/2022062502/58ab5cae1a28abbc2a8b50eb/html5/thumbnails/6.jpg)
2D 物理エンジン
![Page 7: Cocos2d-x(JS) ハンズオン #11「2D物理エンジン」](https://reader036.vdocuments.site/reader036/viewer/2022062502/58ab5cae1a28abbc2a8b50eb/html5/thumbnails/7.jpg)
Box2D http://box2d.org/ 最新バージョン : Box2D v2.3.2 オープンソース
元々 C++ 用に作られたが、数多くのプログラミング言語に移植されている
ゲーム用 2D 物理エンジン 古典力学的な法則をシミュレーション
質量 速度 摩擦
ピクセルをメートルに変換する係数を用意する必要がある
![Page 8: Cocos2d-x(JS) ハンズオン #11「2D物理エンジン」](https://reader036.vdocuments.site/reader036/viewer/2022062502/58ab5cae1a28abbc2a8b50eb/html5/thumbnails/8.jpg)
Chipmunkhttps://chipmunk-physics.net/最新バージョン : Chipmunk v7オープンソース
元々 C 言語用に作られたが、数多くのプログラミング言語に移植されている
ゲーム用 2D 物理エンジンピクセル単位で物理シミュレーション
![Page 9: Cocos2d-x(JS) ハンズオン #11「2D物理エンジン」](https://reader036.vdocuments.site/reader036/viewer/2022062502/58ab5cae1a28abbc2a8b50eb/html5/thumbnails/9.jpg)
物理エンジンを使ってみる
![Page 11: Cocos2d-x(JS) ハンズオン #11「2D物理エンジン」](https://reader036.vdocuments.site/reader036/viewer/2022062502/58ab5cae1a28abbc2a8b50eb/html5/thumbnails/11.jpg)
Box2D0. 前準備
1. 物理空間の準備
2. ブロックの配置
3. 画像と物体の関係
4. タップ処理
![Page 12: Cocos2d-x(JS) ハンズオン #11「2D物理エンジン」](https://reader036.vdocuments.site/reader036/viewer/2022062502/58ab5cae1a28abbc2a8b50eb/html5/thumbnails/12.jpg)
0. 前準備 (Box2D)https://goo.gl/2WdUvB
main.js解像度の変更
project.jsonmodules に external を追加
src/resource.jsリソース追加
![Page 13: Cocos2d-x(JS) ハンズオン #11「2D物理エンジン」](https://reader036.vdocuments.site/reader036/viewer/2022062502/58ab5cae1a28abbc2a8b50eb/html5/thumbnails/13.jpg)
1. 物理空間の準備 (Box2D)https://goo.gl/5gWUuw
重力の設定b2World
毎フレーム更新処理scheduleUpdate 関数
物理シミュレーションworld.Step
![Page 14: Cocos2d-x(JS) ハンズオン #11「2D物理エンジン」](https://reader036.vdocuments.site/reader036/viewer/2022062502/58ab5cae1a28abbc2a8b50eb/html5/thumbnails/14.jpg)
2. ブロックの配置 (Box2D)https://goo.gl/I8jYBs
物体の特性b2FixtureDef
物理特性b2BodyDef
物体の作成world.CreateBody
![Page 15: Cocos2d-x(JS) ハンズオン #11「2D物理エンジン」](https://reader036.vdocuments.site/reader036/viewer/2022062502/58ab5cae1a28abbc2a8b50eb/html5/thumbnails/15.jpg)
3. 画像と物体の関係 (Box2D)https://goo.gl/gKPUzz
物体がなくなった時の画面表示の確認
画像と物体の同期物体に合わせ、画像の位置と角度を変更する
![Page 17: Cocos2d-x(JS) ハンズオン #11「2D物理エンジン」](https://reader036.vdocuments.site/reader036/viewer/2022062502/58ab5cae1a28abbc2a8b50eb/html5/thumbnails/17.jpg)
Chipmunk0. 前準備
1. 物理空間の準備
2. ブロックの配置
3. タップ処理
4. 画像の表示
![Page 18: Cocos2d-x(JS) ハンズオン #11「2D物理エンジン」](https://reader036.vdocuments.site/reader036/viewer/2022062502/58ab5cae1a28abbc2a8b50eb/html5/thumbnails/18.jpg)
0. 前準備 (Chipmunk)https://goo.gl/s4Jqow
Box2D の物理空間がない状態にする
![Page 19: Cocos2d-x(JS) ハンズオン #11「2D物理エンジン」](https://reader036.vdocuments.site/reader036/viewer/2022062502/58ab5cae1a28abbc2a8b50eb/html5/thumbnails/19.jpg)
1. 物理空間の準備 (Chipmunk)https://goo.gl/4LeQkq
物理空間cp.Space
Chipmunk では実世界の測定単位系を利用しない
![Page 20: Cocos2d-x(JS) ハンズオン #11「2D物理エンジン」](https://reader036.vdocuments.site/reader036/viewer/2022062502/58ab5cae1a28abbc2a8b50eb/html5/thumbnails/20.jpg)
2. ブロックの配置 (Chipmunk)https://goo.gl/aQVZdn
物理空間に物体を追加cp.Bodycp.BoxShape
物理空間の更新worls.step
デバッグ表示cc.PhysicsDebugNode
![Page 22: Cocos2d-x(JS) ハンズオン #11「2D物理エンジン」](https://reader036.vdocuments.site/reader036/viewer/2022062502/58ab5cae1a28abbc2a8b50eb/html5/thumbnails/22.jpg)
4. 画像の表示 (Chipmunk)https://goo.gl/ZocjFZ
shape に画像をセット
update 関数で画像の位置と角度を更新する
物体の削除時画像も削除する
![Page 23: Cocos2d-x(JS) ハンズオン #11「2D物理エンジン」](https://reader036.vdocuments.site/reader036/viewer/2022062502/58ab5cae1a28abbc2a8b50eb/html5/thumbnails/23.jpg)
作業はここまで
![Page 24: Cocos2d-x(JS) ハンズオン #11「2D物理エンジン」](https://reader036.vdocuments.site/reader036/viewer/2022062502/58ab5cae1a28abbc2a8b50eb/html5/thumbnails/24.jpg)
参考になるサイト
Cocos 公式 Wikihttp://www.cocos2d-x.org/wiki/Cocos2d-JS
Cocos2d-JS API リファレンスhttp://cocos2d-x.org/wiki/Reference
Qiita( tag: cocos2d-js )https://qiita.com
![Page 25: Cocos2d-x(JS) ハンズオン #11「2D物理エンジン」](https://reader036.vdocuments.site/reader036/viewer/2022062502/58ab5cae1a28abbc2a8b50eb/html5/thumbnails/25.jpg)
おわり
ありがとうございました