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中文网其他相关文章！