Matter.js入门：Body模块

在本系列的上一篇教程中，您了解了 Matter.js 中的 World 和 Engine 模块。这两个模块中可用的方法旨在一次控制多个物体或整个世界的行为。然而，在某些时候，有必要控制你们世界中个体身体的属性。

例如，您可能希望对特定对象施加一些力或更改其摩擦系数。在这种情况下，Matter.js 中的Body 模块可以提供很大帮助。该模块包含许多方法和属性，可让您指定各种物理属性的值，从质量到静止系数。在本教程中，您将了解所有这些方法和属性以及如何正确使用它们。

缩放、旋转和平移身体

rotate(body, rotation)您可以使用该方法旋转 Matter.js 世界中的任何刚体。旋转是相对于物体的当前角度的，它不会赋予它任何角速度。旋转角度以弧度指定。

您还可以使用该scale(body, scaleX, scaleY, [point])方法缩放身体。参数分别指定水平scaleX和scaleY垂直方向的缩放量。请记住，任何此类缩放也会更新身体的物理属性，例如质量、面积和惯性。第四个参数指定缩放发生的点。未指定时，缩放点的默认值假定为身体的中心。

可以使用该方法将物体相对于当前位置移动给定向量translate(body, translation)。平移参数指定对象相对于其当前位置的新位置。这是演示中缩放、旋转和移动盒子的部分代码。

var Body = Matter.Body;
var box = Bodies.rectangle(460, 120, 40, 40);

$('.scale').on('click', function () {
    Body.scale( box, 1.5, 1.2);
});

$('.rotate').on('click', function () {
    Body.rotate( box, Math.PI/6);
});

$('.translate').on('click', function () {
    Body.translate( box, {x: -10, y: 20});
});

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

设定速度和施加力

setVelocity(body, velocity)您还可以使用该方法将线速度赋予对象。以这种方式施加速度不会改变相关对象的角度、施加的力或位置。对象的位置或其角度可能会改变，但库没有专门将它们设置为任何值。它们的值由作用在物体上的其他力决定，例如摩擦力。

setangularVelocity(body, velocity)就像线速度一样，您也可以使用该方法更改对象的角速度。在这种情况下，施加在物体上的位置、角度和力也保持不变。

你应该记住的一件事是速度是一个向量 insetVelocity()和一个数字 in setAngularVelocity()。

$('.linear').on('click', function () {
    Body.setVelocity( box, {x: 10, y: -10});
});

$('.angular').on('click', function () {
    Body.setAngularVelocity( box, Math.PI/6);
});

See the Pen Setting Linear and Angular Velocity for a Body - Matter.js by Monty (@Shokeen) on CodePen.

除了赋予对象速度之外，您还可以在它们上应用力矢量。该applyForce(body, position, force)方法可用于force从给定的position. 该力可能会或可能不会导致在给定身体上施加扭矩。

下面的代码在身体的中心施加一个力。力矢量为 {x: 0, y: -0.05}。这意味着施加的力将是完全垂直的并且是向上的。您应该记住，向上的垂直力在 Matter.js 中具有负号。另一件值得注意的事情是指定垂直力的数字有多小。在 Matter.js 中，引力本身的值只有 1。

See the Pen Appling Force on a Body - Matter.js by Monty (@Shokeen) on CodePen.

只要球不与任何墙壁或地板碰撞，施加力后球的运动似乎是自然的。通常，当事物与某物发生碰撞时，我们希望它们会反弹。物体反弹回来的能量由恢复系数决定。

在 Matter.js 中，它的值默认设置为零。这意味着任何将恢复设置为零并与其他物体碰撞的物体都不会反弹。值为 1 意味着物体将以等于碰撞前的动能反弹回来。像 0.5 这样的值意味着物体只会以之前 50% 的动能反弹回来。可以使用restitution键控制对象的恢复值。

在某些模拟中，您可能需要更改不同物体之间的摩擦力。这可以使用friction,frictionAir和frictionStatic键来实现。

friction键指定物体的动摩擦值。它可以具有介于 0 和 1 之间的值。值 0 意味着一旦物体开始运动，它可能会无限期地移动。阻止它的唯一方法是施加其他一些外力。使用公式确定两个物体之间的最终摩擦值Math.min(bodyA.friction, bodyB.friction)。
frictionStatic键指定物体静止时的摩擦值。静摩擦力的默认值为 0.5。较高的值意味着需要较大的力d才能使身体移动。
frictionAir键用于指定物体与周围空气之间的摩擦值。较高的值意味着身体在空中移动时会很快减速。空气摩擦的影响是非线性的。

$('.red-friction').on('click', function () {
  circleA.friction = 0.05;
  circleA.frictionAir = 0.0005;
  circleA.restitution = 0.9;
});

$('.res-friction').on('click', function () {
  circleA.friction = 0.1;
  circleA.frictionAir = 0.001;
  circleA.restitution = 0;
});

See the Pen Setting Friction and Restitution - Matter.js by Monty (@Shokeen) on CodePen.

控制实体的渲染

到目前为止，我们还没有指定渲染主体时使用的颜色、轮廓宽度或笔触样式。所有这些属性都嵌套在render键中。该fillStyle属性接受一个字符串来指定渲染主体的填充样式。该lineWidth属性接受一个数字，该数字定义创建主体轮廓时要使用的线宽。

零值意味着根本不会渲染任何线条。该strokeStyle属性可用于指定渲染主体轮廓时要使用的笔触样式。您可以通过将键visible设置为false. opacity可以使用该键控制要渲染的主体的不透明度。

您还可以使用图像而不是简单的颜色和轮廓来渲染身体。使用 sprite 渲染身体的参数是使用一组不同的属性指定的。该texture属性定义了应该用作精灵纹理的图像的路径。

和属性xOffset可yOffset用于定义精灵在各个轴上的偏移量。同样，您可以使用xScale和yScale属性来定义精灵在 x 轴和 y 轴上的缩放比例。下面是一些代码，将我们球的浅蓝色背景替换为来自 Open Game Art网站的足球精灵。

var ball = Bodies.circle(90, 280, 20, {
  render: {
    sprite: {
      texture: "path/to/soccer_ball.png",
      xScale: 0.4,
      yScale: 0.4
    }
  }
});

See the Pen Control Rendering of a Body - Matter.js by Monty (@Shokeen) on CodePen.