CocosCreator微信小游戏入门实战《小猫钓鱼》（五）：碰撞系统

转载请保留原文链接：https://blog.csdn.net/zzx023/article/details/83064115

 

做游戏就和做导演一样，所以我们才有cc.director，哈哈。

通过前面几节，我们的游戏中已经拥有了鱼钩、鱼这两位主角，并且它们试镜成功（动作系统没问题），接下来得把最重要得对话剧本交给它们了，也就是我们游戏当中鱼钩与鱼之间的交互。

 

鱼与鱼钩交互过程中，最重要得一点就是碰撞，我们大部分得业务逻辑都是碰撞时进行的，感谢CocosCreator内置了一个简单好用碰撞检测系统，使得我们可以很方便的进行碰撞相关的开发。

 

来，我们现在就开始吧。

首先我们需要先建立好碰撞分组，可以参考官方文档：

http://docs.cocos.com/creator/manual/zh/physics/collision/collision-group.html

 

打开项目设置面板，我们添加两个新的分组：Fish（鱼），Hook（鱼钩），同时勾选允许Fish与Hook产生碰撞。

 

接下来，我们把鱼和鱼钩的Group属性都设置为对应的分组。

 

 

注意咱们的鱼时预制体，修改完后要记得保存。鱼钩是上一节我们编写的Controller节点。

 

做完这些以后鱼和鱼钩还不会在游戏中产生碰撞，因为我们还缺少一个重要的前提条件：碰撞组件。

关于碰撞组件，官方文档有详细说明：

http://docs.cocos.com/creator/manual/zh/physics/collision/edit-collider-component.html

 

我们先给Controller添加一个碰撞组件BoxCollider，勾选Editing以后，可以在编辑器中通过鼠标拖动编辑碰撞盒的大小。

 

 

鱼的也加上

 

接下来我们在场景脚本的Onload方法中添加以下代码：

    onLoad () {

        var manager = cc.director.getCollisionManager();//获取碰撞检测系统

        manager.enabled = true;//默认碰撞检测系统是禁用的，需要手动开启碰撞检测系统

        manager.enabledDebugDraw = true;//开启后可在debug中显示碰撞区域

    },

 

在Controller中实现碰撞回掉函数

    onCollisionEnter: function (other , self) {

        other.color = cc.Color.RED;

    }

碰撞到的鱼，我们让它变红。

 

运行一下，我们在debug下看到所有的碰撞区域，并且可以看到碰撞后的效果：变红

 

Nice，关键部分已经完成，剩下的就是业务逻辑以及一些细节完善的东西的。

最后我们把收杆的动作以及钓到鱼的表现加上就完整了。

 

为了表现效果，我们调整一下Controller和Fish的锚点。

并且修改以下代码：

 

Hook.js：

cc.Class({

    extends: cc.Component,



    properties: {

        RegainSpeed : 320,

        isRegaining : {

            default : false,

            visible : false

        }

    },



    // LIFE-CYCLE CALLBACKS:



    // onLoad () {},



    start () {

        this.StartLine();

    },



    StartLine () {

        this.node.stopAllActions();

        this.node.runAction(cc.repeatForever(cc.moveBy(4,cc.p(0,-100))));

        this.isRegaining = false;

    },



    RegainLine () {//收杆

        if (this.isRegaining)

            return;

        this.node.stopAllActions();//停止下沉动作

        var duration = Math.abs(this.node.y) / this.RegainSpeed;

        if (duration < 5) duration = 5;//收杆事件太快，不足5秒的，按5秒来运动

        this.node.runAction(cc.moveTo(duration, cc.v2(0,0)).easing(cc.easeSineIn()));//收杆动作，通过easing来优化效果

        this.isRegaining = true;

    }



    // update (dt) {},

});

 

 

Controller.js：

    onCollisionEnter: function (other , self) {

        other.node.color = cc.Color.RED;

        var pHook = this.mHook.getComponent(Hook);

        pHook.RegainLine();//鱼钩收杆



        other.node.stopAllActions();

        other.node.group = "default";//设置碰撞分组，没必要继续判断和鱼钩的碰撞了

        other.node.parent = this.node;//钓到的鱼挂在鱼钩上

        other.node.setPosition(cc.v2(0,0));

        other.node.runAction(cc.repeatForever(cc.sequence(

            cc.rotateTo(0.5 , -60 * other.node.scaleX),

            cc.rotateTo(0.5 , -30 * other.node.scaleX)

        )));//钓到的鱼挣扎动作

    }

 

 

最终效果如下：