CocosCreator学习 碰撞系统（cocoscreator spine）

引言

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就是形状区别。

碰撞脚本控制

下面来看碰撞的脚本。首先需要开启碰撞检测系统和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) {

// },

效果如图：

碰撞前

碰撞后