Matter.js に入門してみる – Matter.Engine クラス

Matter.Engine は物理エンジンを操作するためのクラス。

正確な情報は公式ドキュメント Matter.Engine を参照してください。

例 : クリックで剛体が追加されます。

var engine = Engine.create(document.getElementById('matter-engine'), {render: {
options: {
width: 400,
height: 400,
pixelRatio: 1,
background: '#fafafa',
wireframeBackground: '#222',
hasBounds: true,
enabled: true,
wireframes: true,
showSleeping: true,
showDebug: true,
showBroadphase: true,
showBounds: true,
showVelocity: true,
showCollisions: true,
showSeparations: true,
showAxes: true,
showPositions: true,
showAngleIndicator: true,
showIds: true,
showShadows: true,
showVertexNumbers: true,
showConvexHulls: true,
showInternalEdges: true
}
}});
Engine.run(engine);
Events.on(engine, 'mousedown', function(e) {
var c = Bodies.circle(e.mouse.position.x, e.mouse.position.y, 10, { restitution: 1.2 });
World.add(engine.world, [c]);
});


メソッドは以下。

clear エンジンをクリア
create エンジンを作成
merge エンジンをマージ
render ワールドをレンダリング
レンダリング時 beforeRender と afterRender イベントが発火する
update 描画をアプデート
beforeTick、tick、afterTick イベントが発火
run エンジンを開始
requestAnimationFrame で Engine.updateとEngine.render で描画を繰り返す
BeforeUpdate と afterUpdate イベントが発火

プロパティは以下。

constraintIterations 描画の精度
enabled エンジンが実行しているかのフラグ
enableSleeping スリープを許可するか
許可すると描画精度は落ちるが安定性とパフォーマンスが向上
positionIterations 反復回数 数字が高いほど高精度
render Matter.Render のインスタンス。
timing タイミングのプロパティ

  • correction

    デルタ(差)の変化率

  • delta

    ミリ秒単位の更新の間の時間ステップを指定する数値

  • timeScale

    時間の全体的な伸縮率
    0 はシミュレーションをフリーズ
    0.1の値は、スローモーション効果 等

  • timestamp

    ミリ秒単位で現在のシミュレーション時間

  • velocityIterations

    更新速度

  • world

    World オブジェクト

その他のイベント

collisionActive 衝突しているか 衝突しているすべてのペアのリストを取得
collisionEnd 衝突したか 衝突しているすべてのペアのリストを取得
collisionStart 衝突するか 衝突しているすべてのペアのリストを取得
mousedown マウスダウン
mousemove マウスムーブ
mouseup マウスアップ
tick エンジンが更新されたら発火

Nature of Code -Processingではじめる自然現象のシミュレーション

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください