引言
Cocos Creator 是一个完整的游戏开发解决方案，包含了 cocos2d-x 引擎的 JavaScript 实现，以及快速开发游戏所需求的各种图形界面东西。Cocos Creator 的编辑器完全为引擎定制打造，包含从规划、开发、预览、调试到发布的整个工作流所需的全功能，该编辑器供给面向规划和开发的两种工作流，供给简略顺畅的分工合作方法。Cocos Creator 现在支持发布游戏到 Web、Android 和 iOS，真正实现一次开发，全渠道工作。Cocos Creator 是以内容创作为中心的游戏开发东西，在 Cocos2d-x 基础上实现了完全脚本化、组件化和数据驱动等特征
碰撞组件
首先来看碰撞组件。CocosCreator提供了三种碰撞组件：Box Collider，Circle Collider，Polygon Collider。增添十分简单，只需要选中节点在属性检查器中选择添加组件。
这里使用的是Box Collider，可以看到节点周围多了一个绿色的框，这就是碰撞体。
在属性检查器中可以看到碰撞体的属性，选中Editing可以通过拖动对其大小进行修改。
外两种碰撞组件和Box Collider就是形状区别。
碰撞脚本控制点击链接加入群聊【unity/cocos交流二群】
下面来看碰撞的脚本。首先需要开启碰撞检测系统和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
: 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) {
// },
效果如图：
碰撞前
碰撞时
