Matter.js入门：组合和组合模块

在本系列的第三篇教程中，您了解了Matter.js中Body模块的不同方法和属性。 使用“身体”模块，您可以操作简单的身体，例如圆形，矩形和梯形。 Matter.js还具有其他模块，可帮助您创建和操纵一些复杂但常见的合成实体，例如汽车，链条，金字塔，堆栈和软体。

所有这些复合材料及其操作方法都可以在Matter.js的Composite和Composites模块中找到。 在本教程中，您将开始学习可以使用“ Composites模块创建的不同复合材料，例如金字塔和汽车等。 之后，我们将介绍Composite模块中可用的一些重要方法和属性。

创建一个堆栈和一个金字塔

堆栈和金字塔彼此非常相似。 可以使用stack(xx, yy, columns, rows, columnGap, rowGap, callback)函数创建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模块教程中了解到的渲染选项，仅创建具有黑色轮廓的橙色矩形。

这是一些非常相似的代码，用于在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))

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

创建汽车和链条

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)使用chain(composite, xOffsetA, yOffsetA, xOffsetB, yOffsetB, options)函数使用约束将给定合成中的所有实体链接在一起。 函数中的偏移参数用于确定连接不同框的约束的相对位置。

您还需要其他约束才能将链从世界的某个角度挂起。 这是创建链并将其挂在世界天花板上的代码。

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。

这样可以防止不同箱子之间的绳索长度完全改变。 我们在此处创建的其他约束条件使我们的盒子仍悬在天花板上。

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

创建一个柔软的身体和牛顿的摇篮

软体类似于堆栈，但有两个主要区别。 软体的各个元素通过约束保持在一起，软体只能以圆圈作为其组成元素。 您可以将软体视为网格和堆栈之间的交叉。 创建软体很简单softBody(xx, yy, columns, rows, colGap, rowGap, crossBrace, pRadius, pOptions, cOptions)使用适当的参数值调用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);

使用内置的newtonsCradle(xx, yy, number, size, length)函数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 });

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

既然您已经学会了如何创建不同种类的复合实体，那么现在是时候了解复合模块中可用的不同方法和属性来操纵这些复合了。 您可以使用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)到另一个move(compositeA, objects, compositeB)可以借助move(compositeA, objects, compositeB)函数来实现。 此功能会将给定的对象从合成A移动到合成B。

如果要访问作为给定合成的直接子代的所有实体，合成和约束，则可以使用composite.bodies ， composite.composites和composite.constraints属性以形式访问所有实体。数组。

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

最后的想法

在本教程中，您学习了如何使用Matter.js中的Composite和Composites模块创建一些复杂的复合材料。 您还了解了可用于操纵这些复合材料的不同方法和属性。

本系列旨在使人们以对初学者友好的方式开始使用Matter.js库。 记住这一点，我们介绍了库中最常见模块的重要功能和属性。

Matter.js还具有许多其他模块，我们在本系列的第一个教程中对此进行了简要讨论。 如果您想充分利用此库，则应阅读官方网站上所有这些模块的文档 。

如果您在任何项目中都使用过Matter.js，请在评论中告诉我们您的经验。

翻译自: https://code.tutsplus.com/tutorials/getting-started-with-matterjs-composite-and-composites-module--cms-28836