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

Matter.js支持所有主流瀏覽器。此外，它也適用于移動(dòng)設(shè)備，因?yàn)樗梢詸z測(cè)觸摸并具有響應(yīng)能力。所有這些功能都使其值得您投入時(shí)間學(xué)習(xí)如何使用該引擎，因?yàn)檫@樣您就可以輕松創(chuàng)建基于物理的2D游戲或模擬。在本教程中，我將介紹此庫(kù)的基礎(chǔ)知識(shí)，包括其安裝和用法，并提供一個(gè)可運(yùn)行的示例。

安裝

您可以使用NPM之類(lèi)的包管理器通過(guò)以下命令安裝Matter.js：

npm install matter-js

您還可以從CDN獲取庫(kù)的鏈接，并像這樣直接將其包含在您的項(xiàng)目中：

<!-- CDN鏈接 -->

Matter.js經(jīng)常發(fā)布更新，這可能需要您對(duì)代碼進(jìn)行一些小的修改才能使其正常工作。本教程中的示例基于0.18.0版本。

一個(gè)基本示例

學(xué)習(xí)Matter.js的最佳方法是查看一些實(shí)際代碼并了解其工作原理。在本節(jié)中，我們將創(chuàng)建一些物體，并逐行介紹所需的代碼。

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

我們首先為項(xiàng)目中可能需要的全部Matter.js模塊創(chuàng)建別名。

Matter.Runner模塊使您可以訪問(wèn)游戲循環(huán)，以便連續(xù)更新引擎和您的世界。

Matter.Composite模塊允許您創(chuàng)建物體的集合、約束或其他復(fù)合對(duì)象。一個(gè)復(fù)合體可以包含單個(gè)物體或整個(gè)模擬。

下一行使用Matter.Engine模塊的create([settings])方法創(chuàng)建一個(gè)新的引擎。類(lèi)似地，我們還創(chuàng)建了一個(gè)新的運(yùn)行器和一個(gè)新的渲染器。上面方法中的settings參數(shù)實(shí)際上是一個(gè)鍵值對(duì)對(duì)象，用于覆蓋與引擎相關(guān)的某些屬性的默認(rèn)值。對(duì)于我們的示例，我們已將所有內(nèi)容保留為默認(rèn)值。

例如，您可以控制世界中所有物體的全局時(shí)間縮放因子。設(shè)置小于1的值將導(dǎo)致世界以慢動(dòng)作交互。類(lèi)似地，大于1的值將使世界快節(jié)奏。您將在本系列的下一個(gè)教程中了解有關(guān)Matter.Engine模塊的更多信息。

之后，我們使用Matter.Render模塊的create([settings])方法創(chuàng)建一個(gè)新的渲染器。與Engine模塊一樣，上面方法中的settings參數(shù)是一個(gè)用于指定參數(shù)的不同選項(xiàng)的對(duì)象。您可以使用element鍵指定庫(kù)應(yīng)插入畫(huà)布的元素。類(lèi)似地，您還可以使用canvas鍵指定應(yīng)渲染Matter.js世界的畫(huà)布元素。

有一個(gè)engine鍵，您可以使用它來(lái)指定應(yīng)用于渲染世界的引擎。還有一個(gè)options鍵，它實(shí)際上接受一個(gè)對(duì)象作為其值。您可以使用此鍵為不同的參數(shù)設(shè)置值，例如畫(huà)布的width或height。您還可以通過(guò)將wireframe鍵的值分別設(shè)置為true或false來(lái)打開(kāi)或關(guān)閉線框。我們還通過(guò)將背景的值設(shè)置為白色，使我們世界中的畫(huà)布顏色為白色。

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

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

本節(jié)開(kāi)頭處的代碼創(chuàng)建了以下結(jié)果。

常見(jiàn)的Matter.js模塊

Matter.js中有超過(guò)20個(gè)不同的模塊。所有這些模塊都提供不同的方法和屬性，這些方法和屬性對(duì)于創(chuàng)建不同類(lèi)型的模擬非常有用，并允許您與它們交互。其中一些模塊處理碰撞，而另一些模塊處理渲染和模擬。

上一節(jié)中的示例使用了四個(gè)不同的模塊來(lái)處理渲染、模擬和物體的創(chuàng)建。在本節(jié)中，您將了解Matter.js中一些常用模塊的作用。

• Engine: 您需要引擎來(lái)更新Matter.js世界的模擬。Engine模塊提供不同的方法和屬性，允許您控制不同引擎的行為。
• Render: 需要渲染器才能在模擬中創(chuàng)建用戶(hù)可以看到的實(shí)際物體。您可以使用它來(lái)開(kāi)發(fā)支持精靈等的基本游戲。
• Runner: 您模擬的任何世界中的物體都將不斷地相互作用。runner模塊處理引擎和世界的這些連續(xù)更新。
• Bodies: Bodies模塊包含不同的方法，可以幫助您創(chuàng)建具有常見(jiàn)形狀（如圓形、矩形或梯形）的剛體。
• Body: 此模塊為您提供不同的方法和屬性，用于創(chuàng)建和操作您使用Bodies模塊中的函數(shù)創(chuàng)建的剛體。此模塊允許您縮放、旋轉(zhuǎn)或平移單個(gè)物體。它還具有允許您指定不同物體的速度、密度或慣性的函數(shù)。由于有很多函數(shù)，本系列的第三個(gè)教程只討論Body模塊中可用的方法和屬性。
• Composites: 與Bodies模塊類(lèi)似，此模塊包含不同的方法，您可以使用這些方法創(chuàng)建具有常見(jiàn)配置的復(fù)合物體。例如，您可以使用Composites模塊中的單個(gè)方法創(chuàng)建矩形盒子的堆?；蚪鹱炙?。
• Composite: Composite模塊具有允許您創(chuàng)建和操作復(fù)合物體的各種方法和屬性。您可以在本系列的第四個(gè)教程中閱讀有關(guān)Composite和Composites模塊的更多信息。
• Constraint: 此模塊允許您創(chuàng)建和操作約束。您可以使用約束來(lái)確保兩個(gè)物體或一個(gè)固定的世界空間點(diǎn)和一個(gè)物體保持固定的距離。這類(lèi)似于通過(guò)鋼筋連接兩個(gè)物體。您可以修改這些約束的剛度，以便桿開(kāi)始更像彈簧。Matter.js在創(chuàng)建牛頓擺或鏈?zhǔn)綇?fù)合體時(shí)使用約束。
• MouseConstraint: 此模塊為您提供不同的方法和屬性，使您可以創(chuàng)建和操作鼠標(biāo)約束。當(dāng)您希望世界中的不同物體與用戶(hù)交互時(shí)，這很有用。

最后的想法

本教程旨在向您介紹Matter.js庫(kù)?？紤]到這一點(diǎn)，我已經(jīng)提供了庫(kù)的功能和安裝的快速概述。涉及兩個(gè)圓和一個(gè)方塊的基本示例顯示了使用該庫(kù)創(chuàng)建簡(jiǎn)單模擬是多么容易。

由于Matter.js有很多模塊，每個(gè)模塊都向引擎添加其自身獨(dú)特的方法，因此我已經(jīng)對(duì)一些常用模塊進(jìn)行了簡(jiǎn)短的總結(jié)。本系列的其余部分將重點(diǎn)介紹更詳細(xì)地講解這些常用模塊。

這篇文章已更新，其中包含來(lái)自Monty Shokeen的貢獻(xiàn)。Monty是一位全棧開(kāi)發(fā)人員，他還喜歡編寫(xiě)教程和學(xué)習(xí)新的JavaScript庫(kù)。

以上是Matter.js入門(mén)：簡(jiǎn)介的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！