Matter.js入门：简介

Matter.js是用JavaScript编写的2D刚体物理引擎。 该库可以帮助您轻松地在浏览器中模拟2D物理。 它提供了很多功能，例如创建刚体并为其分配物理属性（如质量，面积或密度）的能力。 您还可以模拟各种碰撞和力，例如重力和摩擦力。

Matter.js支持所有主要浏览器，包括IE8 +。 此外，由于它可以检测触摸并具有响应能力，因此适合在移动设备上使用。 所有这些功能使您值得花时间学习如何使用引擎，因为这样您就可以轻松创建基于物理的2D游戏或模拟。 在本教程中，我将介绍该库的基础知识，包括其安装和使用，并提供一个工作示例。

安装

您可以在以下命令的帮助下，通过使用Bower或NPM等程序包管理器来安装Matter.js：

bower install matter-js
npm install matter-js

您还可以从CDN获得指向库的链接，并将其直接包含在您的项目中，如下所示：

<script src="path/to/matter.min.js"></script>

一个基本的例子

了解Matter.js的最好方法是查看一些实际代码并了解其工作方式。 在本节中，我们将创建一些主体并逐行处理所需的代码。

var Engine = Matter.Engine,
    Render = Matter.Render,
    World = Matter.World,
    Bodies = Matter.Bodies;
    
var engine = Engine.create();

var render = Render.create({
                element: document.body,
                engine: engine,
                options: {
                    width: 800,
                    height: 400,
                    wireframes: false
                }
             });
             
var boxA = Bodies.rectangle(400, 200, 80, 80);
var ballA = Bodies.circle(380, 100, 40, 10);
var ballB = Bodies.circle(460, 10, 40, 10);
var ground = Bodies.rectangle(400, 380, 810, 60, { isStatic: true });

World.add(engine.world, [boxA, ballA, ballB, ground]);

Engine.run(engine);
Render.run(render);

我们首先为项目中可能需要的所有Matter.js模块创建别名。 Matter.Engine模块包含用于创建和操作引擎的方法。 在项目中需要引擎来更新世界的仿真。 Matter.Render模块是基于HTML5画布的基本渲染器。 需要该模块才能可视化不同的引擎。

Matter.World模块用于创建和操纵引擎运行的世界。 它类似于Matter.Composite模块，但是它允许您调整一些其他属性，例如gravity和bounds 。 我们代码中的最后一个模块名为Matter.Bodies ，您可以创建刚体对象。 另一个类似的模块称为Matter.Body允许您操纵单个物体。

下一行使用Matter.Engine模块的create([settings])方法创建一个新引擎。 上面方法中的settings参数实际上是一个具有键值对的对象，用于覆盖一些与引擎相关的属性的默认值。

例如，您可以控制世界上所有物体的全局时间比例因子。 设置小于1的值将导致世界以慢动作交互。 同样，大于1的值将使世界快节奏。 您将在本系列的下一篇教程中了解有关Matter.Engine模块的更多信息。

之后，我们使用Matter.Render模块的create([settings])方法创建一个新的渲染器。 就像引擎模块一样，上述方法中的settings参数是一个用于为该参数指定不同选项的对象。 您可以使用element键来指定库应在其中插入画布的元素。 同样，您也可以使用canvas键指定应在其中呈现Matter.js世界的canvas元素。

您可以使用一个engine键来指定应该用来渲染世界的引擎。 还有一个options键实际上接受一个对象作为其值。 您可以使用此键设置不同参数的值，例如画布的width或height 。 您也可以通过将wireframe关键点的值分别设置为true或false来打开或关闭wireframe 。

接下来的几行创建了将在我们的世界中相互作用的不同物体。 主体是在Matter.js中的Matter.Bodies模块的帮助下创建的。 在此示例中，我们使用circle()和rectangle()方法创建了两个圆和一个矩形。 也可以使用其他方法来创建不同的多边形。

一旦创建了主体，就需要使用Matter.World模块中的add()方法将它们添加到我们选择的世界中。 将必要的实体添加到我们的世界之后，我们只需要使用各个模块中的run()方法来运行引擎和渲染器。 这基本上就是在Matter.js中创建和渲染世界所需的所有代码。

本节开头的代码创建以下结果。

常见的Matter.js模块

Matter.js中有20多个不同的模块。 所有这些模块提供了不同的方法和属性，这些属性和属性对于创建各种类型的仿真非常有用，并允许您与它们进行交互。 其中一些模块可处理碰撞，而其他模块可处理渲染和模拟。

上一节中的示例使用了四个不同的模块来处理物体的渲染，模拟和创建。 在本节中，您将学习Matter.js中可用的一些常见模块的角色。

• 引擎 ：您需要引擎来更新您的Matter.js世界的仿真。 Engine模块提供了不同的方法和属性，使您可以控制不同引擎的行为。
• 世界 ：此模块为您提供方法和属性，以立即创建和操纵整个世界。 World实际上是一个具有附加属性（例如重力和边界）的Composite物体。
• 实体 ：“ Bodies模块包含多种方法，可帮助您创建具有常见形状（如圆形，矩形或梯形）的刚体。
• 正文 ：该模块为您提供不同的方法和属性来创建和操纵您已经使用从功能创建的刚体Bodies模块。 此模块允许您缩放，旋转或平移单个实体。 它还具有让您指定不同物体的速度，密度或惯性的功能。 由于功能太多，本系列的第三篇教程仅讨论Body模块中可用的方法和属性。
• 合成材料 ：就像Bodies模块一样，该模块包含不同的方法，可用于创建具有通用配置的合成Bodies 。 例如，您可以在Composites模块的帮助下仅使用一种方法来创建矩形框的堆栈或金字塔。
• Composite ： Composite模块具有允许您创建和操作复合实体的方法和属性。 您可以在本系列的第四个教程中阅读有关Composite和Composites模块的更多信息。
• 约束 ：此模块允许您创建和操纵约束。 您可以使用约束来确保两个物体或一个固定的世界空间点与一个物体保持固定的距离。 这类似于通过钢杆连接两个实体。 您可以修改这些约束的刚度，以使杆开始更像弹簧一样起作用。 在创建牛顿摇篮或链复合材料时，Matter.js使用约束。
• MouseConstraint ：此模块为您提供方法和属性，使您可以创建和操作鼠标约束。 当您希望世界上的不同身体与用户互动时，这很有用。

最后的想法

本教程旨在向您介绍Matter.js库。 牢记这一点，我提供了库的功能和安装的快速概述。 包含两个圆圈和一个框的基本示例说明了使用该库创建简单的仿真有多么容易。

由于Matter.js有很多模块，每个模块都向引擎添加了自己的独特方法，因此我写了一些常用模块的简短摘要。 本系列的其余部分将着重于向您详细介绍这些通用模块。

翻译自: https://code.tutsplus.com/tutorials/getting-started-with-matterjs-introduction--cms-28784