Day24. 发动魔法卡，融合 - Composite (中)

昨天了解了 Composite 是什麽後，一如我们本来的安排，今天要来介绍的是 Composites 这个快速创建 Composite 的模组，里面提供的方法全部都是给定参数後依据给定参数内容组出指定组合体，让我们可以透过实例来更了解 Composite 的运用。

今日的Demo
今日的Demo原始码

那一开始就让我们来看一下总共有哪些创建方法：

• Chain
• Mesh
• Pyramid
• Stack
• Car
• Newton Cradle
• Soft Body

以上就是 Composites 模组中的 7 种创建方式，但在这 7 种里的这几个方法有标示 deprecated 已经弃用：

• Car (Suggest Example, Demo)
• Newton Cradle (Suggest Example, Demo)
• Soft Body (Suggest Example1, Demo1) (Suggest Example2, Demo2)

标示为已弃用，表示函式库作者已经不推荐使用，且未来不一定会再维护。

对应的是如果有这三个类型组合体的创建需求，文件中都有对应推荐的方式跟原始码来告诉你该如何宣告与建立。

还是稍微展示一下个方法的对应图形跟特性，详细官方范例或原始码请点选上面的连结去查看。

Car是拿来创建一个方形组合上两个圆形，让他变成一个可以受力後以两个圆形为轮子来表现直线运动的组合体。

Newton Cradle是牛顿摆，力学上常拿来展示一些理论的佐证模型，先前我们有提过。

Soft Body其实就是相对於刚体不变形的特性，是会因受外力变形的物体，实作上由堆叠加上网格做成，以堆叠对象的复原力与弹性呈现来做成一个看起来像变形的组合体。

接下来另外四个没被标记弃用的，我们逐一介绍

• Chain

连接，输入带一个 Composite，他会把所有在 Composite内的物体用 Constraint 连接起来， Constraint 它会自动在函式内计算生成所需参数，

以我们下面的例子，宣告两个方形，把两个方形宣告成一个组合体，最後再把这个组合体本带换成用组合体本身当作参数连接起来的结果，也就是两个方形一个约束。

var rectangleA = Bodies.rectangle(200,100,50,50);
var rectangleA2 = Bodies.rectangle(250,150,60,40);
var compositeA = Composite.create(options ={
    bodies : [rectangleA, rectangleA2]
});
//Matter.Composites.chain(composite, xOffsetA, yOffsetA, xOffsetB, yOffsetB, options)
compositeA = Composites.chain(compositeA, 0, 0, 0, 0);
Composite.add(engine.world, [compositeA]);

在宣告多个物体後想要彼此有连接透过这个方法会能够快速建立，节省宣告时间，後续要做细部调整可以另外处理。其实下面会发现 Composites 中的方法都和这个目的差不多，大多是节省时间来做量化复制体的输出。

• Mesh

网格，是一个特别的方法，创建的时候就是对传入的物体组透过框架网络连接，也提供 crossBrace 的选项来让透过交叉结构增强物体间的连接，可以比较下面的上下两图，下图为有交叉结构。

一般会结合大量物体使用，可以看到我们这边引述的官方原始码是和 Stack 一起使用，Stack 方法我们会稍後提到。

//Origin Example : https://github.com/liabru/matter-js/blob/master/examples/softBody.js
var compositeB = Composites.stack(250, 300, 5, 5, 0, 0, function(x, y) {
    return Bodies.circle(15, 15, 20, particleOptions);
});

var particleOptions = { 
    friction: 0.05,
    frictionStatic: 0.1,
    render: { visible: true } 
};
particleOptions = Common.extend({ inertia: Infinity, friction: 0.00001, collisionFilter: { group: 0x00000001 }, render: { visible: false }}, particleOptions);
var constraintOptions = Common.extend({ stiffness: 0.06, render: { type: 'line', anchors: false } }, constraintOptions);

//Matter.Composites.mesh(composite, columns, rows, crossBrace, options)
compositeB = Composites.mesh(compositeB, 5, 5, false, constraintOptions);
Composite.add(engine.world, [compositeB]);

• Pryamid

金字塔！如果你期待的是鼻子间间胡子翘翘，喔不是，我说那种三角形的金字塔的话，你可能要失望了，这个是比较单纯的让物体以递减方式向上叠加的方法，叠加的物体会写在最後一个 callback 中，以我们的这个例子，就是回传方形堆叠，最後就会变成一个小方塔。

//Matter.Composites.pyramid(xx, yy, columns, rows, columnGap, rowGap, callback)
compositeC = Composites.pyramid(370, 200, 5, 4, 0, 0, function(x, y) {
return Bodies.rectangle(x, y, 20, 20);});
Composite.add(engine.world, [compositeC]);

• Stack

堆叠，上面有跟 Mesh 一起被提到，相较金字塔，他就是一个方正的组合，一样是在 callback 中撰写堆叠的形状，如我们这次以圆形来创立堆叠，他就会生成一个完全圆心垂直堆叠、下坠後也不会倒塌的圆形塔。

这个方法会被叫常广泛被运用，就以这个例子，他其实做的就是在方正的位置上创造九个一样的圆形，如果结合一些其他发法，就能做到许多应用。

//Matter.Composites.stack(xx, yy, columns, rows, columnGap, rowGap, callback)
compositeD = Composites.stack(480, 100, 3, 3, 0, 0, function(x, y) {
return Bodies.circle(x, y, 15);});
Composite.add(engine.world, [compositeD]);

今天的 Compoistes 方法在这里告一个段落，我们明天再介绍针对 Composite 方法的操作函式。