Day23. 发动魔法卡，融合 - Composite (上)

又来到预计会拆成上中下篇幅的大单元了！大家有看过游戏王吗？你们知道青眼白龙跟别人借钱会变成什麽吗？答案是，青眼究极(借钱，台语)龙！如果你相信了，那你可能没有认真看游戏王，漫画里的青眼究极龙，是透过三只青眼白龙融合来的！

融合─就是我们今天的主体！我们把物体/约束/其他的组合体组合在一起，就会变成一个组合体，是的，组合体可以和其他组合体继续组合，变成更大更多的组合体，就像乐高一样。

预计拆成三篇的形式会跟 RigidBody 的篇幅一样，但顺序会有些调整，主要是组合体的快速建构会牵涉到组合体本身属性与建构，所以我们从组合体的基本属性开始上篇，中篇会来逐一介绍会来聊快速建构的函式库提供哪些组合体让我们建构，最後下篇会聊组合模组操作的方法。好的，事不宜迟，我们开始吧！

今天的Demo
今天的Demo原始码

我们先看一下拿来创建 composite 的函式与 options

Matter.Composite.create([options])

Composite.create = function(options) {
        return Common.extend({ 
            id: Common.nextId(),
            type: 'composite',
            parent: null,
            isModified: false,
            bodies: [], 
            constraints: [], 
            composites: [],
            label: 'Composite',
            plugin: {}
        }, options);
    };

如一开始讲的， composite 是由物体、约束与组合体组成，所以在我们创建组合体的时候，如果 options 里面创建带入对应的组合内容，就可以把那些东西组在一起，让我们马上来试看看。

var rectangleA = Bodies.rectangle(100,350,50,50);
var rectangleA2 = Bodies.rectangle(200,450,60,40);
var compositeA = Composite.create(options ={
    bodies : [rectangleA, rectangleA2]
});
Composite.add(engine.world, [compositeA]);

好的！我们成功创建了一个由两个方形组成的组合体，并把组合体加入了我们的世界中。

我们看看 demo，让 runner 跑起来，看看有没有什麽不同 ...没有！看起来一模一样！

没错，单论将两个物体以组合体组合，并不会对两个物体产生什麽影响，大小不变，

间距不变，两个方形并不会因此固定彼此距离，依然各自落下，碰到地面，然後停下。

那为什麽我们需要这个组合体呢？不知道大家有没有用过一些图像编辑的软件，组合体其实就像「群组功能」一样，当这些物体被归类一个群组，要对群组里的物体做操作的时候，只要指定群组就好了。旋转、放大、变形都可以一次对全部的物体做，就像一个世界一样：

其实从一开始，不知道大家有没有注意到，我们要把物体放入世界中，都会用到这行：

Composite.add(engine.world, [ground]);

用到的方法是 Composite.add ，是的 ─ 其实我们的世界本身，就是一个包罗万象的 Composite。

除却 Bodies, Constraints, Composites 之外，其他属性就之前大多出现过了。

id
isModified
parent
type

这4个可以让系统 Lib 处理就好，不用特别去设置。
如果说要设置的话，只要设置 label 跟 plugin 就好，主要会用到的应该还是 label 拿来辨识互动对象。
今天稍微带过了 Composite 的组建方式跟属性，我们明天来看一下快速建构的方法，来体会一下 Composite 有哪些实际应用的形状。