转载请保留原文链接: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)
)));//钓到的鱼挣扎动作
}
最终效果如下: