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

投稿者: | 2018年12月28日

はじめに

この記事では、p2.js 物理エンジンを使用して、1000個の玉を描画してみようと思います。

フィア
いっぱい玉が出てきたら楽しいよね!
カレン
前回の記事も参照してみてね!

前回の記事

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

 

スポンサーリンク

 

目次

 

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

Main.ts

 

p2.js 物理世界を構築

物理エンジンを使用するために、まずp2.worldを構築します。

 

見えない壁を構築

物理エンジンを組み込んだオブジェクトを生成します。

基本は「p2.Body」を生成して、「p2.Plane」で形成します。Planeは厚みの無い平面です。

 

Body系の位置を変更するには、

を使用します。

 

Body系を回転させるには、

を使用します。回転はラジアンで制御します。180°回転 = π、90°回転 = π/2 です。

 

BodyにShapeを適用し、worldに追加します。

 

1000個の玉のコライダーを生成

まず、1000分の玉のコライダーを生成します。少しでCPU負荷を下げるため、fixedRotation:trueで玉が回転しないようにします。

 

1000個の玉を描画する

Bodyだけでは図形は表示されないので、Shapeを使用して描画します。

 

描画をアップデートする

Shapeは一度描画するだけなので、「egret.Ticker.getInstance().register(loopMethod,this);」で描画をアップデートし、動いているように表現します。

 

 

(2019/01/12 追記)

Shapeを移動させて描画する方法

Main.ts

 

冒頭のMain.tsとの違いは、drawBallメソッド内です。

冒頭の方では、drawCircle(x, y, 5); として、bodyの動きに合わせて描画を移動させていきました。

しかし、この方法では衝突判定を行いたいときなどで、shapeの位置が常に(x, y) =  (0, 0)となり都合が悪いときがあります。

なので、実際にshapeを移動させて、drawCircle(0, 0, 5);で描画する方がいいと思います。

 

また、こちらの方法ではshape.graphics.clear(); をする必要はありません。上記のコードをからclear()を削除して実行してみてください。以下のような結果が得られます。

ただし、clear()しないからといって、FPSが向上するということはなく、むしろ重くなった気もします…。clear()に関してはお好みでどうぞ(ちょっと図形がにじんでる気もします)。

 

 

おわりに

フィア
流石に1000個表示すると重いね…
カレン
道はまだまだ長そう…

 

HTML5 Egret Engine入門へ戻る

 

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