Matter.js入門：簡介

Matter.js是一個用JavaScript編寫的2D剛體物理引擎。此庫可以幫助您輕鬆地在瀏覽器中模擬2D物理。它提供了許多功能，例如創建剛體並為其分配質量、面積或密度等物理屬性的能力。您還可以模擬不同類型的碰撞和力，例如重力摩擦力。

Matter.js支持所有主流瀏覽器。此外，它也適用於移動設備，因為它可以檢測觸摸並具有響應能力。所有這些功能都使其值得您投入時間學習如何使用該引擎，因為這樣您就可以輕鬆創建基於物理的2D遊戲或模擬。在本教程中，我將介紹此庫的基礎知識，包括其安裝和用法，並提供一個可運行的示例。

安裝

您可以使用NPM之類的包管理器通過以下命令安裝Matter.js：

npm install matter-js

您還可以從CDN獲取庫的鏈接，並像這樣直接將其包含在您的項目中：

<!-- CDN链接 -->

Matter.js經常發布更新，這可能需要您對代碼進行一些小的修改才能使其正常工作。本教程中的示例基於0.18.0版本。

一個基本示例

學習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.js模塊創建別名。

Matter.Runner模塊使您可以訪問遊戲循環，以便連續更新引擎和您的世界。

Matter.Composite模塊允許您創建物體的集合、約束或其他復合對象。一個複合體可以包含單個物體或整個模擬。

下一行使用Matter.Engine模塊的create([settings])方法創建一個新的引擎。類似地，我們還創建了一個新的運行器和一個新的渲染器。上面方法中的settings參數實際上是一個鍵值對對象，用於覆蓋與引擎相關的某些屬性的默認值。對於我們的示例，我們已將所有內容保留為默認值。

例如，您可以控制世界中所有物體的全局時間縮放因子。設置小於1的值將導致世界以慢動作交互。類似地，大於1的值將使世界快節奏。您將在本系列的下一個教程中了解有關Matter.Engine模塊的更多信息。

之後，我們使用Matter.Render模塊的create([settings])方法創建一個新的渲染器。與Engine模塊一樣，上面方法中的settings參數是一個用於指定參數的不同選項的對象。您可以使用element鍵指定庫應插入畫布的元素。類似地，您還可以使用canvas鍵指定應渲染Matter.js世界的畫布元素。

有一個engine鍵，您可以使用它來指定應用於渲染世界的引擎。還有一個options鍵，它實際上接受一個對像作為其值。您可以使用此鍵為不同的參數設置值，例如畫布的width或height。您還可以通過將wireframe鍵的值分別設置為true或false來打開或關閉線框。我們還通過將背景的值設置為白色，使我們世界中的畫布顏色為白色。

接下來的幾行創建將在我們的世界中交互的不同物體。這些物體是在Matter.js中使用Matter.Bodies模塊創建的。在這個例子中，我們只使用circle()和rectangle()方法創建了兩個圓和一個矩形。其他方法也可以用來創建不同的多邊形。

創建物體後，我們需要使用Matter.Composite模塊中的add()方法將它們添加到我們選擇的世界上。將必要的物體添加到我們的世界後，我們只需要使用各自模塊中的run()方法運行運行器和渲染器。這基本上是您需要創建和渲染Matter.js世界中的所有代碼。

本節開頭處的代碼創建了以下結果。

常見的Matter.js模塊

Matter.js中有超過20個不同的模塊。所有這些模塊都提供不同的方法和屬性，這些方法和屬性對於創建不同類型的模擬非常有用，並允許您與它們交互。其中一些模塊處理碰撞，而另一些模塊處理渲染和模擬。

上一節中的示例使用了四個不同的模塊來處理渲染、模擬和物體的創建。在本節中，您將了解Matter.js中一些常用模塊的作用。

• Engine: 您需要引擎來更新Matter.js世界的模擬。 Engine模塊提供不同的方法和屬性，允許您控制不同引擎的行為。
• Render: 需要渲染器才能在模擬中創建用戶可以看到的實際物體。您可以使用它來開發支持精靈等的基本遊戲。
• Runner: 您模擬的任何世界中的物體都將不斷地相互作用。 runner模塊處理引擎和世界的這些連續更新。
• Bodies: Bodies模塊包含不同的方法，可以幫助您創建具有常見形狀（如圓形、矩形或梯形）的剛體。
• Body: 此模塊為您提供不同的方法和屬性，用於創建和操作您使用Bodies模塊中的函數創建的剛體。此模塊允許您縮放、旋轉或平移單個物體。它還具有允許您指定不同物體的速度、密度或慣性的函數。由於有很多函數，本系列的第三個教程只討論Body模塊中可用的方法和屬性。
• Composites: 與Bodies模塊類似，此模塊包含不同的方法，您可以使用這些方法創建具有常見配置的複合物體。例如，您可以使用Composites模塊中的單個方法創建矩形盒子的堆棧或金字塔。
• Composite: Composite模塊具有允許您創建和操作複合物體的各種方法和屬性。您可以在本系列的第四個教程中閱讀有關Composite和Composites模塊的更多信息。
• Constraint: 此模塊允許您創建和操作約束。您可以使用約束來確保兩個物體或一個固定的世界空間點和一個物體保持固定的距離。這類似於通過鋼筋連接兩個物體。您可以修改這些約束的剛度，以便桿開始更像彈簧。 Matter.js在創建牛頓擺或鍊式複合體時使用約束。
• MouseConstraint: 此模塊為您提供不同的方法和屬性，使您可以創建和操作鼠標約束。當您希望世界中的不同物體與用戶交互時，這很有用。

最後的想法

本教程旨在向您介紹Matter.js庫。考慮到這一點，我已經提供了庫的功能和安裝的快速概述。涉及兩個圓和一個方塊的基本示例顯示了使用該庫創建簡單模擬是多麼容易。

由於Matter.js有很多模塊，每個模塊都向引擎添加其自身獨特的方法，因此我已經對一些常用模塊進行了簡短的總結。本系列的其餘部分將重點介紹更詳細地講解這些常用模塊。

這篇文章已更新，其中包含來自Monty Shokeen的貢獻。 Monty是一位全棧開發人員，他還喜歡編寫教程和學習新的JavaScript庫。

以上是Matter.js入門：簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章！