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

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

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

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

世界模块

在本节中，您将了解 World 模块的不同方法、属性和事件。 World实际上是一个Composite带有附加属性的像gravity并bounds添加到它。以下是此模块中可用的重要方法列表：

add(composite, object)：此方法继承自 Composite 模块，允许您将一个或多个 body(s)、composite(s) 或constraint (s) 添加到给定的复合或世界。
addBody(world, 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 模块教程中了解所有这些。

See the Pen Adding Bodies to a World in Matter.js by Monty (@Shokeen) on CodePen.

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

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

clear( world, keepStatic)：此方法是其Composite对应方法的别名。您可以使用它一次从世界中删除所有元素。第二个参数是一个布尔值，可用于防止静态元素被清除。它的值是false默认值。这意味着调用World.clear( world)将删除该特定世界中的所有元素。
rotate( composite, rotation, point, [recursive=true])：此方法可用于将给定世界中的所有子对象或复合对象围绕提供的点旋转特定角度。此处给出的角度以弧度为单位。该point参数确定旋转点。
scale( composite, scaleX, scaleY, point, [recursive=true])：您可以使用此方法按给定值缩放合成或世界的所有子级。这种方法可以缩放从宽度、高度和面积到质量和惯性的所有内容。
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 世界中的圆圈变成椭圆形。然后椭圆形倒塌以进入具有较低势能的更稳定状态。

See the Pen Scaling, Rotating and Translating a World - Matter.js by Monty (@Shokeen) on CodePen.

尝试按下上述演示中的Scale按钮。之后，按下Rotate 按钮，看看 Matter.js 模拟椭圆的真实运动有多接近。

除了所有这些方法之外，该World模块还具有许多有用的属性。例如，您可以使用world.bodies. world.composites同样，您可以使用and获取所有组合和约束的数组world.constraints。

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

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

引擎模块

引擎模块是正确更新世界模拟所必需的。这里列出了 Engine 模块的一些重要方法。

create([options])：当您想创建一个新引擎时，此方法很有用。该options方法中的参数实际上是一个具有键值对的对象。您可以使用options覆盖引擎不同属性的默认值。例如，您可以使用该timeScale属性来减慢或加快模拟速度。
update(engine, [delta=16.666], [correction=1])：此方法会将模拟在时间上向前移动deltams。参数的值correction指定更新后要应用的时间校正因子。通常只有delta在每次更新之间发生更改时才需要进行此更正。
merge(engineA, engineB)：此方法将合并由给定参数指定的两个引擎。合并时，从应用配置，从engineA获取世界engineB。

Engine 模块还有很多其他属性可以帮助您控制模拟的质量。您可以为设置一个值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;
});

See the Pen Changing Simulation Speed in Matter.js - timeScale by Monty (@Shokeen) on CodePen.

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

您将在本系列的下一个教程中了解刚体的所有这些属性。现在，向世界添加一些圆圈或球，然后尝试按下慢动作和快动作按钮来注意差异。

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