CocosCreator学习6：碰撞系统

今天来通过一个简单的例子学习碰撞系统。

碰撞组件

首先来看碰撞组件。CocosCreator提供了三种碰撞组件：Box Collider，Circle Collider，Polygon Collider。增添十分简单，只需要选中节点在属性检查器中选择添加组件。

这里使用的是Box Collider，可以看到节点周围多了一个绿色的框，这就是碰撞体。

在属性检查器中可以看到碰撞体的属性，选中Editing可以通过拖动对其大小进行修改。

另外两种碰撞组件和Box Collider就是形状区别。

碰撞脚本控制

下面来看碰撞的脚本。首先需要开启碰撞检测系统和debug绘制接口，默认情况下是禁用的。碰撞检测系统功能不需要多说，debug绘制是用于显示碰撞组件的碰撞检测范围的。

     cc.director.getCollisionManager().enabled = true;
     cc.director.getCollisionManager().enabledDebugDraw = true;

如果希望显示碰撞组件的包围盒，可以开启另一个接口，我没有发现这个接口的用处。

cc.director.enabledDrawBoundingBox = true;

接下来看下碰撞系统的回调函数，主要有三个：
碰撞产生时调用onCollisionEnter: function (other, self)
碰撞保持时调用onCollisionStay: function (other, self)
碰撞结束时调用onCollisionExit: function (other, self)
other是产生碰撞的另一个碰撞组件，self是产生碰撞的自身的碰撞组件。

示例的具体代码如下：

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //    default: null,
        //    url: cc.Texture2D,  // optional, default is typeof default
        //    serializable: true, // optional, default is true
        //    visible: true,      // optional, default is true
        //    displayName: 'Foo', // optional
        //    readonly: false,    // optional, default is false
        // },
        // ...
    },

    // use this for initialization
    onLoad: function () {
        cc.director.getCollisionManager().enabled = true;
       cc.director.getCollisionManager().enabledDebugDraw = true;
        cc.director.getCollisionManager().enabledDrawBoundingBox = true;

        this.touchingNumber = 0;
    },

    onCollisionEnter: function (other) {
        this.node.color = cc.Color.RED;
        this.touchingNumber ++;
        cc.log(this.touchingNumber);
    },

    onCollisionStay: function (other) {
        // console.log('on collision stay');
    },

    onCollisionExit: function () {
        this.touchingNumber --;
        cc.log(this.touchingNumber);
        if (this.touchingNumber === 0) {
            this.node.color = cc.Color.WHITE;
        }
    }

    // called every frame, uncomment this function to activate update callback
    // update: function (dt) {

    // },
});

效果如图：
碰撞前

碰撞时