CocosCreator学习 碰撞系统

引言

 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) {


    // },

我也创建了个学习交流群 感兴趣的朋友可以加下点击链接加入群聊【cocos/unity交流群】

效果如图: 

碰撞前

碰撞后


推荐阅读更多精彩内容