Matter.js入门：身体模块

在该系列的上一教程中，您了解了Matter.js中的World和Engine模块。 这两个模块中可用的方法旨在一次控制多个物体或整个世界的行为。 但是，在某个时候，必须控制您世界中各个物体的属性。

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

缩放，旋转和平移实体

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

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

使用translate(body, translation)方法translate(body, translation)相对于其当前位置将给定的矢量相对于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});
});

设定速度和作用力

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

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

您应该记住的一件事是，速度是setVelocity()的向量和setAngularVelocity() 。

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

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

除了为物体赋予速度外，还可以在物体上施加力矢量。 applyForce(body, position, force)方法可用于将force向量从给定position force到身体position 。 此力可能会或不会导致在给定的身体上施加扭矩。

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

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

在Matter.js中，其值默认设置为零。 这意味着恢复原状设置为零并与其他物体发生碰撞的任何对象根本不会反弹。 值为1表示对象将以等于碰撞前的动能反弹。 诸如0.5的值表示对象将仅以其先前动能的50％反弹。 可以使用restitution键控制对象的恢复值。

在某些模拟中，可能有必要更改不同物体之间的摩擦。 这可以通过friction ， frictionAir和frictionStatic键来实现。

• friction键指定物体的动摩擦值。 它可以具有介于0和1之间的值。值为0表示一旦将其设置为运动状态，则身体可能会无限期地移动。 阻止它的唯一方法是施加一些其他外力。 使用公式Math.min(bodyA.friction, bodyB.friction)确定两个对象之间的摩擦力的最终值。
• frictionStatic键指定身体静止时的摩擦值。 静摩擦的默认值为0.5。 较高的值意味着将需要更大的力才能使身体运动。
• 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;
});

控制实体的渲染

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

零值表示根本不会渲染任何线。 strokeStyle属性可用于指定渲染身体轮廓时要使用的笔触样式。 通过将visible key设置为false可以完全阻止物体渲染。 可以使用opacity键控制要渲染的主体的opacity 。

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

xOffset和yOffset属性可用于定义精灵在各个轴上的偏移量。 同样，您可以使用xScale和yScale属性为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
    }
  }
});

改变物理性质

您已经了解了如何在Matter.js中为对象指定摩擦或恢复系数。 还有许多其他属性，它们的值可以用相同的方式指定。 另一方面，有些属性是只读的，您无法更改。

您可以使用position键设置物体在世界上的position ，该键接受向量作为其值。 您还可以使用mass属性指定物体的mass ，但是随后还必须为inverseMass属性设置一个值，该值是使用1/mass计算的。 控制身体质量的更好方法是借助density属性。

更改物体的密度后，将根据其面积自动计算其质量。 这样，您还可以根据不同对象的密度来区分它们。 例如，使用岩石作为其精灵的物体的密度应高于使用足球作为其精灵的相同尺寸的物体。

一些属性（例如speed ， velocity和angularVelocity是只读的，但是可以使用诸如setAngularVelocity()和setVelocity()适当方法来设置它们的值。 您可以在文档中阅读有关Body模块的不同属性的更多信息。

结论

在本教程中，您已经了解了Matter.js库的Body模块中的所有重要方法和属性。 了解这些不同的属性及其作用可以帮助您创建更逼真的现实物理模拟。 在该系列的下一个也是最后一个教程中，您将学习Matter.js中的Composite模块。

如果您对本教程有任何疑问或使用该库的一些技巧，请与我们分享。

翻译自: https://code.tutsplus.com/tutorials/getting-started-with-matterjs-body-module--cms-28835