今天来通过一个简单的例子学习碰撞系统。
首先来看碰撞组件。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) { // }, });效果如图： 碰撞前 碰撞时
