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 物理エンジンピクセル単位で物理シミュレーション

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

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

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

物体がなくなった時の画面表示の確認

画像と物体の同期物体に合わせ、画像の位置と角度を変更する

4. タップ処理 (Box2D)https://goo.gl/I8jYBs

タッチイベント

物体の削除画像物体

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

3. タップ処理 (Chipmunk)https://goo.gl/8cBezu

タッチイベント

物体の削除

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

おわり

ありがとうございました