cocos creator学习11——碰撞检测系统

碰撞分组

cocos creator中新版本中的碰撞分组功能,能够使开发者更方便地管理碰撞检测

这次我使用飞机大战的项目进行详细介绍
碰撞分组
点击编辑可以管理碰撞组件的检测
碰撞分组
cocos引擎会根据碰撞分组配对,进行相应的检测
如上图,子弹组会与enemy组进行碰撞检测,hero会与enemy组进行碰撞检测

为节点添加碰撞检测组件

组件
可以选择Editing属性对碰撞区域进行编辑

开启碰撞检测

cc.director.getCollisionManager().enabled=true; 这是一个全局属性,开启后就代表碰撞检测组件可以进行检测了
cc.director.getCollisionManager().enabledDebugDraw = true; 绘制碰撞区域

碰撞事件响应函数

开启了碰撞检测后,每一次碰撞组的碰撞就会在节点的组件中查找碰撞响应函数

响应函数响应事件
onCollisionEnter:function(other,self)碰撞开始事件(第一次接触)
onCollisionStay:function(other,self)碰撞持续事件(组件相交)
onCollisionExit:function(other,self)碰撞结束事件(离开的一瞬间)
other参数是指与这个组件碰撞的碰撞器组件
self参数是指自身的碰撞器组件

实战测试

1、分组

子弹分组
敌人分组

2、开启碰撞检测

 onLoad() {
        cc.director.getCollisionManager().enabled=true;
     //   cc.director.getCollisionManager().enabledDrawBoundingBox = true;
     //开启绘制区域
       cc.director.getCollisionManager().enabledDebugDraw = true;
        cc.log(this.score);
    },

3、编写碰撞事件函数

由于我们只需要子弹碰到敌机一下就可以了,因此只使用了onCollisionEnter 响应函数
enemyfly.js

 onCollisionEnter:function(other,self){              //碰撞则播放爆炸动画
        if (other.node.group != 'bullet'){
            cc.log("bullet");
            return ;
        }
        if(other.node.group == 'bullet') //检测碰撞组
        {   
            other.node.removeFromParent();
            this.hp -= 1;
            if(this.hp == 0 )
            {
              //  enemyReq.add_Score();
                 this.node.group = 'default'; //防止播放爆炸动画时继续检测导致神奇的事情发生
                 var en = this.node.getComponent(cc.Animation);
                 var na = this.node.name;
                en.play(na+"_des"); //播放动画
                 en.on('finished',function(e){
                        this.node.removeFromParent();
                       // var score = this.node.getComponent(cc.Label);   
                 },this); 
            }
        }
    },

游戏效果

游戏效果

  • 12
    点赞
  • 40
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
CocosCreator实现的 解救人质 游戏,学会碰撞检测rescue.7z // Bullet.js cc.Class({ extends: cc.Component, properties: { mSpeed: 300, }, // LIFE-CYCLE CALLBACKS: // onLoad () {}, start() { var manager = cc.director.getCollisionManager(); // 获取碰撞检测系统 manager.enabled = true; }, update(dt) { // 设置子弹移动,当超出屏幕范围未发生碰撞时自动销毁 this.node.y += this.mSpeed * dt; if (this.node.y > 580) { console.log('超出屏幕范围,子弹销毁!'); this.node.destroy(); } }, /** * 当碰撞产生的时候调用 * @param {Collider} other 产生碰撞的另一个碰撞组件 * @param {Collider} self 产生碰撞的自身的碰撞组件 */ onCollisionEnter: function (other, self) { console.log('on collision enter'); if (other.tag == 1) { // 子弹碰到人质时,解救失败! console.log('解救人质失败!'); var failLabel = this.node.parent.getChildByName('failLabel'); failLabel.active = true; this.node.destroy(); } else if (other.tag == 2) { // 子弹碰到敌人时,解救成功! console.log('解救人质成功!'); var successLabel = this.node.parent.getChildByName('successLabel'); successLabel.active = true; this.node.destroy(); } }, /** * 当碰撞产生后,碰撞结束前的情况下,每次计算碰撞结果后调用 * @param {Collider} other 产生碰撞的另一个碰撞组件 * @param {Collider} self 产生碰撞的自身的碰撞组件 */ onCollisionStay: function (other, self) { console.log('on collision stay'); }, /** * 当碰撞结束后调用 * @param {Collider} other 产生碰撞的另一个碰撞组件 * @param {Collider} self 产生碰撞的自身的碰撞组件 */ onCollisionExit: function (other, self) { console.log('on collision exit'); } });

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值