Matter.jsを始めましょう：はじめに

Matter.jsは、JavaScriptに記載されている2D Rigid Body Physics Engineです。このライブラリは、ブラウザで2D物理学を簡単にシミュレートするのに役立ちます。剛体を作成し、質量、面積、密度などの物理的特性を割り当てる機能など、多くの機能を提供します。また、重力摩擦など、さまざまな種類の衝突や力をシミュレートすることもできます。

Matter.jsは、すべての主流ブラウザをサポートしています。さらに、タッチを検出し、応答性が高いため、モバイルデバイスに適しています。これらの機能はすべて、物理ベースの2Dゲームまたはシミュレーションを簡単に作成できるため、エンジンの使用方法を学ぶために時間をかける価値があります。このチュートリアルでは、このライブラリのインストールや使用法を含むこのライブラリの基本を取り上げ、実行可能な例を提供します。

インストール

NPMのようなパッケージマネージャーを使用して、次のコマンドでmatter.jsをインストールできます。

npm install matter-js

CDNからライブラリへのリンクを取得して、このようにプロジェクトに直接含めることもできます。

Matter.jsは頻繁に更新を公開します。これには、コードを適切に機能させるために、コードにいくつかの小さな変更が必要になる場合があります。このチュートリアルの例は、バージョン0.18.0に基づいています。

<!-- CDN链接 -->

基本的な例

最初に、プロジェクトで必要とされるすべての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.Runnerモジュールを使用すると、エンジンと世界への継続的な更新のためにゲームループにアクセスできます。

Matter.comPositeモジュールを使用すると、オブジェクトのコレクション、制約、またはその他の複合オブジェクトを作成できます。複合体には、単一のオブジェクトまたはシミュレーション全体を含めることができます。

次の行では、

モジュールの

メソッドを使用して新しいエンジンを作成します。同様に、新しいランナーと新しいレンダラーも作成しました。上記のメソッドの

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

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

メソッドを使用して、新しいレンダラーを作成します。エンジンモジュールと同様に、上記の方法の設定パラメーターは、パラメーターのさまざまなオプションを指定するオブジェクトです。

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

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

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

オブジェクトを作成した後、オブジェクトを選択した世界に追加する必要があります。必要なオブジェクトを私たちの世界に追加した後、それぞれのモジュールで

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

Matter.jsには20以上の異なるモジュールがあります。これらのすべてのモジュールは、さまざまな種類のシミュレーションを作成するのに役立ち、それらと対話できるさまざまな方法とプロパティを提供します。これらのモジュールの中には衝突を処理するものもあれば、レンダリングとシミュレーションを処理するモジュールもあります。

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

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

このチュートリアルは、Matter.jsライブラリを紹介することを目的としています。これを念頭に置いて、ライブラリの機能とインストールの概要を簡単に説明しました。 2つの円と正方形を含む基本的な例は、ライブラリを使用して簡単なシミュレーションを作成するのがどれほど簡単かを示しています。

Matter.jsには多くのモジュールがあり、それぞれがエンジンに独自のアプローチを追加しているため、いくつかの一般的なモジュールの簡単な要約をすでに作成しました。このシリーズの残りの部分は、これらの一般的に使用されるモジュールをより詳細に説明することに焦点を当てます。

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

以上がMatter.jsを始めましょう：はじめにの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。