【Egret Engine】p2.js 物理エンジンを使用した衝突判定

Egret Engine

はじめに

p2.jsを物理エンジンを使用した衝突判定を行います。

 

準備

【EgretEngine】p2.js 物理エンジンを使用して1000個の玉を描画する方法を読んで、玉を2つ生成するコードを用意してください。

上記の記事のコードとは、若干異なる部分もあります。

Main.ts

 

 

p2.js 物理エンジンを使用した衝突判定

Main.ts

 

スポンサーリンク

 

collisionGroupとcollisionMaskの追加

1、enum クラスの追加

Class Main の外側にenumクラスを作成してください。名前は何でも構いません。

p2.js物理エンジンでは、collisionGroupでオブジェクトの種類を設定し、collisionMaskで衝突判定を行うオブジェクトを設定します。

これらはnumberで管理されていますが、使用できる値は2の累乗のみで、2の31乗までです。なので、powを使用して定義しております。

 

2、collisionGroupとcollisionMaskの追加

p2のShape系(p2.Circleやp2.Plane等)のプロパティに、

のように追加してください。

これで、collisionGroupはPLANE、collisionMaskはCIECLEになります。

collisionMaskには衝突判定を行いたいオブジェクトの値を入力します。複数ある場合は、

のように記入してください。

 

ちなみに、p2.Bodyの方にはcollisionGroupとcollisionMaskプロパティはないので、Shape系で使用してください。

 

玉の方も同様にcollisionGroupとcollisionMaskを追加してください。

 

World.on( “beginContact”, beginMethod, this);の追加

world.onはaddListenerと同じような役割を果たし、メソッドをworldに追加します。これを、繰り返しメソッドの中に入れてください。ちなみに、world.offで削除できます。

“beginContact”はp2.jsが用意した変数で、これは衝突した瞬間を指します。離れた瞬間は”endContact”です。

 

 

続いて、beginMethodを作成してください。こちらのメソッド名は何でも構いません。

beginMethod(evt)のevt はevent でもaでもなんでも構いません。anyです。

オブジェクト同士が接触したときに、bodyAやshapeAに、接触したオブジェクトのパラメータが代入されます。

 

後は、ifの条件式で場合分けをします。

同じオブジェクト同士であれば、

のようにShapeA,Bの場合分けで済みます。

しかし、違うオブジェクトの場合は、AがPLANE、BがCIECLEの時と、その逆で場合分けする必要があります。

 

補足ですが、shapeはworldに生成された順番でナンバリングされており、shape.idでそのナンバーを取得できるので、それで場合分けすることも可能です。

 

参考URL

yUI API

Circle Class「collisionGroup」

World「on」

World Class「beginContact 」

p2.js「Events」

 

Aurelien Ribon’s Dev Blog

Box2D Totorial: Collision filtering

 

てっくぼっと!

ブラウザゲーム開発に使えるJavaScript製物理エンジンp2.jsを使ってみる

 

Egret社区

p2衝突検出はどのように行われますか?

 

 

HTML5 Egret Engine入門へ戻る

 

すくまりゲームズの人気記事

 

 

 

タイトルとURLをコピーしました