matterjs

Matter.js スキル

ワークフロー

1. 環境（プレーンな HTML、React、またはキャンバスのみ）と描画方法（デバッグ用の Matter.Render またはカスタムレンダラー）を確認します。
2. 最小限の Engine／World／Render／Runner のセットアップを提示し、ボディを追加します。
3. リクエストがあった場合のみ、インタラクション（マウスコンストレイント）またはコンストレイントを追加します。
4. SPA やティアダウンのシナリオ向けに、クリーンアップの手順を共有します。

最小限のセットアップ

<script>
  const { Engine, Render, Runner, Bodies, Composite } = Matter;

  const engine = Engine.create();

  const render = Render.create({
    element: document.body,
    engine: engine,
    options: {
      width: 800,
      height: 600,
      wireframes: false
    }
  });

  const runner = Runner.create();
  Runner.run(runner, engine);
  Render.run(render);

  const ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });
  const box = Bodies.rectangle(400, 200, 80, 80);

  Composite.add(engine.world, [ground, box]);
</script>

よくあるパターン

• Composite.add(engine.world, [...]) を使って、ワールドにボディを追加します。
• Render.create({ element, engine }) を使ってキャンバスを自動的に作成するか、自分で作成した canvas を渡します。
• 塗りつぶし表示にするには、render.options.wireframes = false を設定します。
• シンプルなループには Runner.run(runner, engine) を使います。タイミングをカスタマイズする必要がある場合は、独自のループで Engine.update を呼び出します。

マウス操作（オプション）

const { Mouse, MouseConstraint } = Matter;
const mouse = Mouse.create(render.canvas);
const mouseConstraint = MouseConstraint.create(engine, { mouse });
Composite.add(engine.world, mouseConstraint);
render.mouse = mouse;

クリーンアップチェックリスト（SPA）

• Runner.stop(runner) でランナーを停止します。
• DOM からレンダー用キャンバスを削除します。
• 必要に応じてエンジンとワールドをクリアします。

仕様が不足している場合に確認する質問

• キャンバスのビューポートサイズとスケーリングはどうしますか？
• Matter.Render とカスタムレンダラーのどちらを使いますか？
• マウス／タッチによるドラッグ操作が必要ですか？
• 画面外にあるとき、シミュレーションループを一時停止しますか？