ワールド
p5play の各インスタンスには world
(ワールド)オブジェクトが存在します。これは、 Box2D
物理シミュレーションの制御に使われているオブジェクトです。なかでも重要なプロパティは gravity
(重力)で、 x 成分の値と y 成分の値を持っています。
この物理シミュレーションは、設定値が同じであれば、必ず同じ物理挙動を示すことに注意してください。つまり、同じコードを複数回実行しても、設定値にランダムな値を使わない限り、まったく同じ結果しか得られないのです!
スリープ
world.allowSleeping
のデフォルト値は true です。
スプライトは、動きが止まり、さらに新しくコリジョンが起こらなくなると、「 sleeping (スリープ)」を開始します。「スリープ」中のスプライトは、物理シミュレーションの対象外となり、ほとんどの場合で Box2D 物理エンジンはそのスプライトに対する計算処理を省略します。これによってパフォーマンスは向上しますが、ときに問題を引き起こしたりもします。
スリープ中のスプライトは、 sprite.sleeping
を false に設定することで、「目覚めさせる(スリープを解除する)」ことができます。また、
sprite.allowSleeping
を false に設定することで、スプライトごとにスリープ機能をを無効にすることもできます。
時間速度のコントロール
world.timeScale
(時間速度)係数は、デフォルトでは 1
で、これは現実時間での物理シミュレーションの設定です。この値を小さくすると、動きはスローモーションになります。 0 にすると、時間は停止します!
注意すべきは、 Box2D 物理エンジンのソルバ(計算器)が安定して動作可能な時間速度は、 2 が限界だということです。もし、物理シミュレーションの時間をさらに速く進めたい場合は、代わりに
world.step
関数を複数回、実行してください。
コードサンプルのキャンバスをクリックしてみてください。物理シミュレーションが実時間の 1/4 のスローモーションで進みます。このときの、映画『マトリックス』の銃弾の残像のようなイフェクトは、フレームごとの背景の塗りつぶし色を、わずかに透明にすることで作ることができます。
world.realTime
は、一時停止中の時間も含め、ワールドが起動してからの、「現実の」経過秒数を表します。
一方で world.physicsTime
は、ワールドで行われた物理シミュレーションの経過秒数を表します(補足:時間速度の変化を加味した経過秒数という意味です)。
パフォーマンスのテスト
p5play.renderStats
を true に設定すると、描画されたスプライト数、ディスプレイのリフレッシュレート、 FPS
の計算値を表示します。より包括的な結果を得るには、ウェブブラウザのパフォーマンステストツールを使用してください。
ここでいう FPS とは、実際に画面にフレームが表示されるまでの遅延を除いた、「コンピュータが 1 秒間に生成できるフレーム数 (Frames Per Second) 」のことです。 FPS が高いほど、ゲームのパフォーマンスが高いことを意味します。
一般に、スプライトの数が少なく、使用するキャンバスがより小さいほど、ゲームのパフォーマンスは向上します。さらに良好なパフォーマンスを得るには、p5.js の clear
関数の使用や、 canvas.get
でのキャンバスのピクセル色の取得を、避けるようにしてください。
デフォルトでは、 Box2D の物理エンジンは world.velocityIterations
(速度計算の反復)を 8 回、
world.positionIterations
(位置計算の反復)を 3
回行います。これらの値を小さくすると、物理シミュレーション計算は速くなりますが、そのぶん精度は落ちます。
さまざまなウェブブラウザで p5play をテストした結果、 Google Chrome が最もパフォーマンスに優れていることがわかりました。
スプライトを探す
world.getSpritesAt
関数を使用して、特定の点にあるスプライトの配列を取得できます。スプライトが検出されるためには、物理ボディを持っている必要があります。
world.getSpriteAt
は、指定された点で見つかった最初のスプライト(最も高いレイヤー値を持つもの)を返します。
マウスを動かしてスプライトの動きを止めてみましょう!
レイキャスティング
world.rayCastAll
関数は、レイ(線)と交差するすべてのスプライトを検出します。ただし、始点と交差するスプライトは除外されます。
world.rayCast
関数も同様ですが、最初に見つかったスプライトのみを返します。
これらの関数には、レイの開始点と終了点を指定します。
または、レイの開始点、方向、そしてオプションで移動可能な最大距離を設定します。
例で、マウスを動かしてみてください。レイがスプライトと交差すると、スプライトがオレンジ色になります。