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

Egret Engine

はじめに

この記事では p2.js 物理エンジンを使用して、

EgretEngineのオブジェクトに物理現象を加えていきます。

フィア
結構むずかしかったね…
カレン
Unityと比べると手順も多いから頑張ろうね

 

準備

p2.js 物理エンジンのダウンロード

1、egret-game-libraryのダウンロード

GitHubより、「egret-game-library」をダウンロード。

GitHub - egret-labs/egret-game-library: Egret Game Library
Egret Game Library. Contribute to egret-labs/egret-game-library development by creating an account on GitHub.

 

「egret-game-library」を解凍して、egret-game-library-master/physics/libsrc/binを開きます。

その中の「physics」フォルダを、プロジェクトフォルダがある場所にコピーしてください。

場所は、「Egret Launcher」を起動して、Open project locationを押せば分かります。

 

2、p2.js物理エンジンの適用

プロジェクトを開き、「egretProperties.json」を開いてください。

 

次に、

を追加してください。

ここで注意点です。

このjsonファイル内では、ダブルスラッシュでコメントを付けるとエラーになります。

できるだけ、余計なものはつけないようにしましょう。

「../」は、jsonファイルの1つ上のフォルダへ行くという意味です。

 

また、

をついでに付けておきましょう。

 

これは「MainContext」というコードを使用するときに使用します。

MainContextは、

のように使用し、ステージ(画面)の高さや幅を取得するときに使います。

 

ゲームをデバッグで実行すると、modulesフォルダ内にphysicsが生成されます。これで完了です。

 

 

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

Main.ts

 

物理現象をステージに付与

「world.sleepMode = p2.World.BODY_SLEEPING; 」は、一定時間が経過したオブジェクトの物理エンジンをスリープ状態にし、パフォーマンスを向上させます。

 

「world.gravity = [0, 9.8 * 50];」でステージに重力を付与します。

ここで注意点ですが、p2.js と EgretEngineは長さの単位が異なるうえ、座標系も違います。

なので、座標を補正してあげる必要があるため、50を掛けています。

物理世界の座標系と長さの計算

P2物理引擎——物理小球案例

 

物理挙動を持つコライダーの生成

コライダーは接触判定をおこなったり、壁にめり込まないように計算してくれるワイヤーフレームです。

詳しくは、こちらのコライダーの記事もご覧ください。

当たり判定を付与できるコライダーの種類まとめ

 

「const body : p2.Body = new p2.Body({mass:1, position:[200,300]});」でコライダーを生成します。

のように、{ } の中でposition や angle 等を設定できます。

BodyのAPIについては以下の公式サイトをご覧ください。

p2.js Body Class API

 

「const bodyShape = new p2.Circle({ radius: 100 });」でコライダーを円形に切り取る準備をします。

 

最後に「body.addShape(bodyShape);」でコライダーを円形に切り取り、「world.addBody(body);」で画面に追加します。

 

ループ処理「egret.Ticker.getInstance()」

ループ処理を行うには「egret.Ticker.getInstance().register( 関数 ,this);」を使用します。

 

「world.step(秒,  関数が最後に呼び出されてからの経過時間,  関数の呼び出しごとにとる固定ステップの最大数);」です。

このメソッドを使って円の描画をしていきます。

コライダーだけでは無色透明なので、図形の描画は必要です。

 

図形の描画

上記コードで円の描画をおこなっております。円の描画方法は以下の記事も参照してください。

【eui.UILayer】図形の描画方法「drawCircle」「drawRect」「lineTo」

 

「shape.graphics.clear();」で現在ステージに描画してあるオブジェクトを消去します。

これがないと、以下のように線状になります。

 

参考URL

物理世界の座標系と長さの計算

P2物理引擎——物理小球案例

p2.js Body Class API

EgretEngineで超簡単なゲームを作ってみよう(2) 物理エンジン エクステンションの導入

EgretEngineで超簡単なゲームを作ってみよう(3) タップでの操作の実装

 

次回の記事

【EgretEngine】p2.js 物理エンジンを使用して1000個の玉を描画する方法
はじめに この記事では、p2.js 物理エンジンを使用して、1000個の玉を描画してみようと思います。 前回の記事 【p2.js】p2.js 物理エンジンを使用した自然落下 p2.js 物理エンジンを使用して1000個の玉を描画する方法 M...

 

HTML5 Egret Engine入門へ戻る

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