Zenn
Open2

matter.jsであそぶ

もちこもちこ

Getting Started

公式のGetting Startedに沿って進める。サンプルではscriptタグで読み込む形式だったが、npm installしてimportすることもできる。

import { Engine, Render, Runner, Bodies, Composite } from 'matter-js';

Usage example

Getting Started内のサンプルを動かしてみる。

Engine

シミュレーションの更新を管理するコントローラーであるエンジンを作る。

const engine = Engine.create();

Render

レンダラーを作る。公式のDocsによると、「Engineのインスタンスを視覚化するためのシンプルなキャンバスベースのレンダラー」という感じ。

const render = Render.create({
    element: document.body,
    engine: engine
});

例ではelementでcanvasタグを挿入する要素を指定しているが、canvasプロパティでcanvas要素を直接指定してあげることも可能。canvasが指定してあるとそちらが優先される。

Bodies

2個の正方形と地面を作る。

// Bodies.rectangle(x, y, width, height, [options])
const boxA = Bodies.rectangle(400, 200, 80, 80);
const boxB = Bodies.rectangle(450, 50, 80, 80);
const ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });

isStaticをtrueにすることで動かない物体を作れるっぽい。

Composite

engine.worldに物体を追加する。

Composite.add(engine.world, [boxA, boxB, ground]);

レンダラを実行

Render.run(render);

Runner

ブラウザ環境内で Matter.Engine を実行するためのゲーム ループを提供するオプションのユーティリティ

だそうです。

const runner = Runner.create();
Runner.run(runner, engine);
もちこもちこ

Running

前述のRunnerモジュールは基本的には開発とデバッグ目的のもので、基本的には下記のように書いて動かす。

(function run() {
    window.requestAnimationFrame(run);
    Engine.update(engine, 1000 / 60);
})();