【p2.js】衝突したオブジェクトのHPを個別に減らす方法

投稿者: | 2019年3月30日

p2.js物理エンジン関連記事

【p2.js】p2.js 物理エンジンを使用した自然落下

【p2.js】p2.js 物理エンジンを使用して1000個の玉を描画する方法

【p2.js】クラス分けで拡張性が向上したp2.js物理ボールの生成方法

【p2.js】p2.js 物理エンジンを使用した衝突判定「collisionGroup」「collisionMask」

 

はじめに

p2.js物理エンジンを使って、ボールとブロックが衝突したときにHPを減らす方法を紹介します。

Unity等のコンポーネント指向でプログラムを組むと、以下のようなことが起きます。

 

これは、Box ClassのコリジョンイベントにHPを減らす処理を書いてしまったため、後からインスタンス化したBoxのHPだけが減る結果になりました。

以下に失敗したコードも載せておきます。

Main.ts (失敗コード)

 

フィア
この失敗、本当に何回もやっちゃったよ…
カレン
オブジェクト指向に慣れてないと結構しちゃうよね

 

スポンサーリンク

 

 

【p2.js】衝突したオブジェクトのHPを減らす方法

Main.ts

 

CreateGameSceneにboxの配列を追加

インスタンス化したBoxをstatic box の配列内にpush(配列に格納する) します。これで、別のクラスでもBoxを利用できます。

 

Ball.ts

Boxに記述していたコリジョンイベントをBallへ移しました。コリジョンイベントはどこに書いてもいいのですが、今回はボールが能動的に動くので、ここに入れました。

コリジョンイベントの中でboxの配列をforEachで取得します。forEachを使用しないと、hpやhpTextをstaticにする必要があります。しかし、staticにすると、個別にhpを設定することはできません。

また、forEachは全てのBoxを参照してしまうので、if(obj.body == bodyA)で衝突したboxのbodyと一致したときのみhpを減らすようにしました。

 

if(obj.body == bodyA)がないと、以下のようになります。

 

おわりに

フィア
これで個別に衝突イベントを設定できるようになったね!
カレン
ぜひ、いろいろ試してみてね!

 

HTML5 Egret Engine入門へ戻る