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