無料GitHub で公開

matterjs

Use when implementing 2D physics interactions with Matter.js, including Engine/World setup, Render/Runner configuration, adding bodies and constraints, and scroll/interaction-friendly canvas scenes.

MengTo/Skills

インストール方法を見る

含まれるファイル（4）

SKILL.md2.2 KB
demo/index.html15.9 KB
demo/preview.jpg37.1 KB
demo/PROMPT.md1.9 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Matter.js Skill

Workflow

Confirm environment (plain HTML, React, or canvas-only) and rendering approach (Matter.Render for debug vs custom renderer).
Provide a minimal Engine/World/Render/Runner setup and add bodies.
Add interactions (mouse constraint) or constraints only if requested.
Share cleanup steps for SPA or teardown scenarios.

Minimal setup

<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>

Common patterns

Use Composite.add(engine.world, [...]) to add bodies to the world.
Use Render.create({ element, engine }) to create a canvas automatically, or pass a canvas you create yourself.
Set render.options.wireframes = false for solid rendering.
Use Runner.run(runner, engine) for a simple loop, or call Engine.update in your own loop if you need custom timing.

Mouse interaction (optional)

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

Cleanup checklist (SPA)

Stop the runner with Runner.stop(runner).
Remove the render canvas from the DOM.
Clear engine and world if needed.

Questions to ask when specs are missing

What viewport size and scaling should the canvas use?
Are we using Matter.Render or a custom renderer?
Do you want mouse/touch drag interaction?
Should the simulation loop be paused when offscreen?

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

3d-cloth-material

無料

Build convincing woven cloth in Three.js, with a thread-level weave normal map, sheen and anisotropic highlights, folds that never stretch the texture, hems with thickness, stitches, seams, frayed edges, fold occlusion, dye and wear variation, and light passing through thin fabric. Use for linen, silk, wool, canvas, curtains, banners, cloaks, tablecloths, tapestries or any 3D drape that currently looks like a plastic sheet, a stretched texture, or a flat coloured plane.

日本語の概要は準備中です。原文の説明を表示しています。