Matter.js入门：引擎和世界模块

在本系列的入门教程中，向您简要介绍了Matter.js中的不同模块。 该库包含许多模块，因此在单个教程中详细介绍每个模块是不切实际的。 阅读本系列的第一部分之后，您现在应该对库及其功能有了一个大致的了解。

在本教程中，我们将只关注Matter.js中的World模块和Engine模块。 World模块为我们提供了创建和操纵World Composite的必要方法和属性。 您可以使用它在世界上添加或删除其他物体。 引擎模块包含用于创建和操作负责创建世界模拟的引擎的方法。

世界模块

在本节中，您将了解World模块的不同方法，属性和事件。 World实际上是一个Composite其中添加了gravity和bounds等其他属性。 这是此模块中可用的重要方法的列表：

• add(composite, object) ：此方法从Composite模块继承，使您可以向给定的Composite或World添加一个或多个Body，Composite或约束。
• addBody(world, body) ：此方法允许您将单个body元素添加到给定的世界。 还有addComposite()和addConstraint()方法，可让您向世界添加组合或约束。

下面的代码使用这两种方法将不同的物体添加到世界上。 add()方法添加三个用作墙的静态矩形。 addBody()方法根据用户单击的按钮添加圆形，正方形或矩形。

var topWall = Bodies.rectangle(400, 0, 810, 30, { isStatic: true });
var leftWall = Bodies.rectangle(0, 200, 30, 420, { isStatic: true });
var ball = Bodies.circle(460, 10, 40, 10);
var bottomWall = Bodies.rectangle(400, 400, 810, 30, { isStatic: true });

World.add(engine.world, [topWall, leftWall, ball, bottomWall]);


var addCircle = function () {
 return Bodies.circle(Math.random()*400 + 30, 30, 30);
};

$('.add-circle').on('click', function () {
    World.add(engine.world, addCircle());
});

您可以看到我们世界上的三堵墙的isStatic键已设置为true 。 将任何对象的此键设置为true会使该对象完全静态。 该对象现在将永远不会更改其位置或角度。 可以指定许多其他属性来控制不同对象的行为。 您将在本系列的Body模块教程中了解所有这些信息。

• remove( composite, object, [deep=false]) ：这是一种通用方法，用于从给定的Composite或World中移除一个或多个Body，Composite或约束。 例如，您可以使用以下行从世界上移除顶部和左侧的墙壁。

World.remove(engine.world, [topWall, leftWall]);

• clear( world, keepStatic) ：此方法是其Composite副本的别名。 您可以使用它立即删除世界上的所有元素。 第二个参数是布尔值，可用于防止清除静态元素。 默认情况下，其值为false 。 这意味着调用World.clear( world)将删除该特定世界中的所有元素。
• rotate( composite, rotation, point, [recursive=true]) ：此方法可用于将给定世界或Composite中的所有子项围绕提供的点旋转特定角度。 此处给出的角度以弧度为单位。 point参数确定旋转点。
• scale( composite, scaleX, scaleY, point, [recursive=true]) ：您可以使用此方法按给定值缩放您的Composite或world的所有子级。 此方法可缩放从宽度，高度和面积到质量和惯性的所有内容。
• translate(composite, translation, [recursive=true]) ：当您要相对于世界或合成对象的所有子代以其当前位置相对于给定向量平移或移动它们时，translate方法非常有用。

您应该记住的一件事是， translate()或rotate()都不会给世界上的物体带来任何类型的速度。 发生的任何运动只是不同物体形状或位置变化的结果。 以下是一些根据按钮单击来缩放，旋转和转换世界的代码：

$('.scale').on('click', function () {
    Matter.Composite.scale( engine.world, 0.5, 0.7, {x: 400, y: 200});
});

$('.rotate').on('click', function () {
    Matter.Composite.rotate( engine.world, Math.PI/4, {x: 400, y: 200});
});

$('.translate').on('click', function () {
    Matter.Composite.translate( engine.world, {x: 10, y: 10});
});

您应注意，上面的代码在x和y轴上应用了不同的比例。 这会将Matter.js世界中的圆圈变成椭圆形。 然后，椭圆形倾倒，以较低的势能变为更稳定的状态。

尝试按上面演示中的“ 缩放”按钮。 之后，按下Rotate按钮以查看Matter.js模拟椭圆的真实运动的紧密程度。

除了所有这些方法之外， World模块还具有许多有用的属性。 例如，您可以使用world.bodies获得所有物体的数组，这些物体是世界复合材料的直接world.bodies 。 同样，您可以使用world.composites和world.constraints获得所有组合和约束的数组。

您还可以使用world.bounds指定Matter.js应该在其中检测碰撞的world.bounds 。 您可以通过世界属性更改的一件有趣的事情是重力。 默认情况下，沿x和y轴的重力设置为0和1。 您可以分别使用world.gravity.x和world.gravity.y更改这些值。

您应该访问Matter.World文档页面以了解有关此模块的更多信息。

引擎模块

引擎模块对于正确更新世界仿真是必不可少的。 这是引擎模块的一些重要方法的列表。

• create([options]) ：当您要创建新引擎时，此方法很有用。 此方法中的options参数实际上是具有键值对的对象。 您可以使用options来覆盖引擎不同属性的默认值。 例如，您可以使用timeScale属性来减慢或加速仿真。
• update(engine, [delta=16.666], [correction=1]) ：此方法将使仿真及时向前移动delta ms。 correction参数的值指定更新后要应用的时间校正因子。 通常仅在每次更新之间的delta都变化时才需要进行此校正。
• merge(engineA, engineB) ：此方法将合并由给定参数指定的两个引擎。 而合并，配置从施加engineA和世界取自engineB 。

引擎模块还具有许多其他属性，可帮助您控制仿真的质量。 您可以为constraintIterations ， positionIterations或velocityIterations设置一个值，以指定每次更新期间要执行的约束，位置和速度迭代的次数。 在每种情况下，较高的值将提供更好的模拟。 但是，较高的值也会不利地影响库的性能。

您可以为timing.timeScale属性设置一个值，以控制仿真发生的速度。 小于1的任何值都将导致慢动作模拟。 将此属性设置为零将完全冻结世界。 下面的例子应该清楚。

$('.slow-mo').on('click', function () {
    engine.timing.timeScale = 0.5;
});

$('.norm-mo').on('click', function () {
    engine.timing.timeScale = 1;
});

$('.fast-mo').on('click', function () {
    engine.timing.timeScale = 1.5;
});

您可能已经注意到，这一次球从地面弹起。 每个刚体的恢复系数默认设置为0。 这使它们具有粘土般的特性，并且在碰撞时不会反弹。 我已将恢复原值更改为1，以便球可以轻松反弹。

您将在本系列的下一篇教程中了解刚体的所有这些特性。 目前，将一些圆圈或球添加到世界上，然后尝试按慢动作和快动作按钮以注意区别。

您应该访问Matter.Engine文档页面以了解有关此模块的更多信息。

结论

本教程讨论了Matter.js中两个非常重要的模块，您需要了解这些模块才能运行任何模拟。 阅读完本教程后，您应该能够缩放，旋转，减慢或加速您的世界。 现在，您还知道如何删除世界或将其添加到世界。 当您开发2D游戏时，这可能会有所帮助。

在本系列的下一个教程中，您将了解Bodies模块中可用的不同方法，属性和事件。

翻译自: https://code.tutsplus.com/tutorials/getting-started-with-matterjs-engine-and-world--cms-28832