Matter.js入门：复合材料和复合模块

Matter.js入门：复合材料和复合模块第1张

在本系列的第三篇教程中，您了解了Matter.js 中 Body 模块的不同方法和属性。Body 模块使您能够操作简单的物体，如圆形、矩形和梯形。Matter.js 还有其他模块可以帮助您创建和操作一些复杂但常见的复合体，如汽车、链条、pyramid、堆栈和软体。

所有这些组合以及操作它们的方法都可以在 Matter.js的Composite和模块中使用。Composites在本教程中，您将首先了解可以使用该Composites模块创建的不同复合材料，例如金字塔和汽车等。之后，我们将介绍Composite模块中可用的一些重要方法和属性。

创建堆栈和金字塔

堆栈和金字塔彼此非常相似。可以使用该函数创建堆栈。同样，您可以在函数的帮助下创建金字塔。如您所见，两种情况下的所有参数都是相同的。事实上，金字塔阵型是从堆叠阵型衍生而来的。 stack(xx, yy, columns, rows, columnGap, rowGap, callback)pyramid(xx, yy, columns, rows, columnGap, rowGap, callback)

所有参数的名称都是不言自明的。该函数中使用的xx和yy参数用于指定合成的起点。columns和参数确定组合中的rows列数和行数。可以使用columnGap和rowGap参数控制不同行和列之间的间隙。

在重力的影响下，rowGap在大多数情况下通常会消失而不改变复合材料。然而，有时单个物体产生的动量可以移动它们下面的物体。这可以改变复合材料的形状。

回调函数用于创建可以根据所使用的函数以网格排列或金字塔排列的方式排列的主体。这意味着您可以使用它来创建矩形框或梯形的堆叠或金字塔。您应该记住，使用圆圈会使排列不稳定。以下是创建矩形堆栈的代码：

var stack = Composites.stack(550, 100, 5, 3, 0, 0, function(x, y) {
  return Bodies.rectangle(x, y, 40, 20, {
    render: {
      fillStyle: 'orange',
      strokeStyle: 'black'
    }
  });
});

您可以根据需要使回调函数变得复杂。在这种情况下，我使用了我们在Body 模块教程中学到的渲染选项来仅创建带有黑色轮廓的橙色矩形。

See the Pen Creating Stacks in Matter.js by Monty (@Shokeen) on CodePen.

以下是在 Matter.js 中创建金字塔形状的一些非常相似的代码：

var pyramid = Composites.pyramid(0, 220, 11, 6, 0, 0, function(x, y) {
  return Bodies.rectangle(x, y, 30, 30, {
    render: {
      fillStyle: 'cornflowerblue',
      strokeStyle: 'black'
    }
  });
});

当您开始创建大量具有不同参数的金字塔时，您会注意到创建的行数有时少于您指定的行数。这是因为库使用以下公式来计算行数：

Math.min(rows, Math.ceil(columns / 2))

See the Pen Creating Pyramids in Matter.js by Monty (@Shokeen) on CodePen.

您可以小心地将堆叠或另一个金字塔放置在金字塔上以创建有趣的图案。例如，您可以在红色金字塔上放置一个较小的金字塔，以创建具有两种颜色的完整金字塔。

创建汽车和链条

Matter.js 中的汽车是一个由两个轮子和一个车身组成的结构。车轮的摩擦系数为 0.8，密度为 0.01。您可以使用该功能创建汽车car(xx, yy, width, height, wheelSize)。xx和yy参数用于指定汽车的位置。

width和height确定汽车主体的尺寸。该wheelSize参数用于指定车轮的半径。不需要回调函数，因为创建汽车所需的车身类型是预先确定的。

var car = Composites.car(190, 100, 100, 45, 30);

$('.force').on('click', function () {
    Body.applyForce( car.bodies[0], {x: car.bodies[0].position.x, y: car.bodies[0].position.y}, {x: 0.5, y: 0});
});

您可以使用 chain(composite, xOffsetA, yOffsetA, xOffsetB, yOffsetB, options) Matter.js 中的函数使用 constraints 将给定组合中的所有主体链接在一起。函数中的偏移参数用于确定连接不同框的约束的相对位置。

您还需要额外的约束来将链条悬挂在世界上的某个点上。这是创建链并将其挂在我们世界的天花板上的代码。

var boxes = Composites.stack(500, 80, 3, 1, 10, 0, function(x, y) {
        return Bodies.rectangle(x, y, 50, 40);
    });

var chain = Composites.chain(boxes, 0.5, 0, -0.5, 0, { stiffness: 1});

Composite.add(boxes, Constraint.create({ 
        bodyA: boxes.bodies[0],
        pointB: { x: 500, y: 15 },
        stiffness: 0.8
    }));

我们链中的盒子是使用stack()您之前了解的功能创建的。该chain()函数创建的约束的刚度为 1。

这意味着不同盒子之间的绳索长度根本不会改变。我们在此处创建的附加约束使我们的盒子悬挂在天花板上。

这是一个带有汽车和从上述代码创建的链条的演示。您可以使用橙色按钮前后移动汽车。每次点击都会在第一个车轮的中心施加一个力，从而移动整个汽车。

See the Pen Creating a Car and a Chain in Matter.js by Monty (@Shokeen) on CodePen.

创建软体和牛顿的摇篮

软体类似于堆栈，有两个主要区别。柔体的各个元素通过约束结合在一起，柔体只能以圆形作为其构成元素。您可以将柔体视为网格和堆栈之间的交叉。softBody(xx, yy, columns, rows, colGap, rowGap, crossBrace, pRadius, pOptions, cOptions)创建一个柔体就像使用适当的参数值调用一样简单。

您已经熟悉该函数的前六个参数。该crossBrace参数是一个布尔值，用于确定是否应呈现交叉括号。该pRadius参数确定圆的半径，该pOptions参数可用于控制粒子的其他属性，如质量和惯性。

该cOptions参数为将粒子绑定在一起的约束指定了各种选项。以下代码将为我们的 Matter.js 世界创建一个软体。

var particleOptions = { 
        friction: 0.05,
        frictionStatic: 0.1,
        render: { visible: true } 
    };

var constraintOptions = { 
        render: { visible: false } 
    };

var softBody = Composites.softBody(450, 200, 10, 5, 0, 0, true, 15, particleOptions, constraintOptions);

See the Pen Creating Soft Bodies in Matter.js by Monty (@Shokeen) on CodePen.

使用内置newtonsCradle(xx, yy, number, size, length)函数创建牛顿摇篮也非常简单。该number参数确定支架中的球数。该size参数确定它们的半径，该length参数确定附有球的绳索的长度。库将恢复和摩擦值设置为零，以便它们可以长时间继续运动。

以下代码创建了摇篮并将第一个球移动到更高的位置，以便它在下落并撞击其他球时具有一定的速度。函数指定的位置translate()是相对于主体的当前位置的。模块的所有这些功能和属性Body已在本系列的上一个教程中进行了更详细的讨论。

var cradleA = Composites.newtonsCradle(200, 50, 5, 20, 250);
Body.translate(cradleA.bodies[0], { x: -100, y: -100 });

See the Pen Creating a Newton's Cradle in Matter.js by Monty (@Shokeen) on CodePen.

复合模块中的重要方法和属性

现在您已经学习了如何创建不同类型的复合体，是时候了解复合模块中可用的不同方法和属性来操作这些复合体了。您可以使用rotate(composite, rotation, point, [recursive=true])和来旋转、缩放和平移任何合成scale(composite, scaleX, scaleY, point, [recursive=true])。translate(composite, translation, [recursive=true])这些功能与它们的 Body 模块对应物非常相似。

add(composite, object)您还可以分别使用和remove(composite, object, [deep=false])函数从给定的组合中添加或删除一个或多个主体、约束和组合。move(compositeA, objects, compositeB)如果你想将一些物体从一个复合体移动到另一个复合体，你可以在函数的帮助下做到这一点。此函数会将给定对象从复合 A 移动到复合 B。

如果您想要访问作为给定复合体的直接子级的所有主体、复合体和约束，您可以使用composite.bodies,composite.composites和composite.constraints属性以数组的形式访问它们。

我们已经看到了如何使用该bodies属性将球从牛顿摇篮移动到左侧，并在我们的汽车复合材料的车轮上施加一个力。一旦你引用了组合中的单个实体，你就可以使用 Body 模块的所有方法和属性来操作它们。