最初に、プロジェクトで必要とされるすべてのMatter.jsモジュールのエイリアスを作成します。

const Engine = Matter.Engine,
    Render = Matter.Render,
    Runner = Matter.Runner,
    Bodies = Matter.Bodies,
    Composite = Matter.Composite;

const iEngine = Engine.create();
const iRunner = Runner.create();

const iRender = Render.create({
  element: document.body,
  engine: iEngine,
  options: {
    width: 800,
    height: 400,
    wireframes: false,
    background: "white"
  }
});

const boxA = Bodies.rectangle(400, 200, 80, 80);
const ballA = Bodies.circle(380, 100, 40, 10);
const ballB = Bodies.circle(460, 10, 40, 10);
const ground = Bodies.rectangle(400, 380, 810, 60, { isStatic: true });

Composite.add(iEngine.world, [boxA, ballA, ballB, ground]);

Render.run(iRender);

Runner.run(iRunner, iEngine);

モジュールの

パラメーターは、実際には、エンジンに関連する特定のプロパティのデフォルト値を上書きするキー値ペアオブジェクトです。この例では、すべてをデフォルトとして殘しました。 Matter.Engine たとえば、create([settings])世界のすべてのオブジェクトのグローバルタイムスケーリング係數(shù)を制御できます。値を1未満に設(shè)定すると、世界はスローモーションで相互作用します。同様に、1を超える値は世界を速くします。このシリーズの次のチュートリアルでは、settingsモジュールの詳細(xì)について詳しく説明します。

の後、Matter.Engineモジュールの

キーを使用して、ライブラリがキャンバスに挿入する要素を指定できます。同様に、Matter.Render

レンダリングの世界に適用するエンジンを指定するために使用できるengineキーがあります。また、オブジェクトをその値として実際に受け入れるoptionsキーもあります。このキーを使用して、キャンバスのwidthやheightなどのさまざまなパラメーターの値を設(shè)定できます。また、wireframeキーの値をそれぞれtrueまたはfalseに設(shè)定することにより、ワイヤフレームをオンまたはオフにすることもできます。また、背景の価値を白に設(shè)定することにより、私たちの世界のキャンバスの色を白にします。

次の數(shù)行は、私たちの世界で相互作用する異なるオブジェクトを作成します。これらのオブジェクトは、matter.jsで作成され、Matter.Bodiesモジュールを使用します。この例では、2つの円と長方形を作成するには、circle()およびrectangle()メソッドのみを使用します。他の方法を使用して、異なるポリゴンを作成することもできます。

メソッドを使用してランナーとレンダラーを?qū)g行する必要があります。これは基本的に、Matter.jsの世界で作成およびレンダリングするために必要なすべてのコードです。 Matter.Composite add()このセクションの先頭にあるコードは、次の結(jié)果を作成します。 run()

前のセクションの例では、4つの異なるモジュールを使用して、レンダリング、シミュレーション、およびオブジェクトの作成を処理します。このセクションでは、Matter.jsで一般的に使用されるいくつかのモジュールの役割について學(xué)びます。

• エンジン：Matter.js Worldのシミュレーションを更新するには、エンジンが必要です。 Engineモジュールは、異なるエンジンの動(dòng)作を制御できるさまざまな方法とプロパティを提供します。
• render：ユーザーがシミュレーションで見ることができる実際のオブジェクトを作成するには、レンダラーが必要です。それを使用して、エルフなどをサポートする基本的なゲームを開発できます。
• ランナー：あなたがシミュレートするあらゆる世界のオブジェクトは、常に相互に対話します。ランナーモジュールは、これらの継続的な更新をエンジンと世界に処理します。
• 體：Bodiesモジュールには、円、長方形、臺(tái)形などの一般的な形狀を持つ剛體を作成するのに役立つさまざまな方法が含まれています。
• Body ：このモジュールは、Bodiesモジュールで利用可能な方法とプロパティについてのみ説明します。 Body
• composites ：モジュールと同様に、このモジュールには、共通の構(gòu)成を持つコンポジットオブジェクトを作成するために使用できるさまざまな方法が含まれています。たとえば、モジュールに単一の方法を使用して、長方形のボックスのスタックまたはピラミッドを作成できます。 Bodies Composites
composite
• ：モジュールには、複合オブジェクトを作成および操作できるさまざまな方法とプロパティがあります。このシリーズの4番目のチュートリアルでは、およびモジュールの詳細(xì)を読むことができます。 Composite CompositeComposites制約
：このモジュールを使用すると、制約を作成および操作できます。制約を使用して、2つのオブジェクトまたは固定されたワールドスペースポイントとオブジェクトが固定距離に保持されるようにすることができます。これは、補(bǔ)強(qiáng)を介して2つのオブジェクトを接続することに似ています。これらの制約の剛性を変更して、ロッドがスプリングのようになり始めるようにすることができます。 Matter.jsは、Newtonian PendulumまたはChain Complexを作成するときに制約を使用します。
• mouseconstraint
：このモジュールは、マウスの制約を作成および操作できるさまざまな方法とプロパティを提供します。これは、世界のさまざまなオブジェクトがユーザーと対話したい場(chǎng)合に役立ちます。
• 最終的な考え

この投稿は、Monty Shokeenからの貢獻(xiàn)により更新されました。 Montyはフルスタック開発者であり、チュートリアルの作成や新しいJavaScriptライブラリの學(xué)習(xí)も大好きです。