通过“解救人质”小游戏教你学会碰撞检测
- 2019 年 10 月 3 日
- 笔记
游戏开发中，碰撞检测无处不在，今天就通过一个简单的小游戏教你学会如何在 Cocos Creator 中进行碰撞检测。配合官方文档学习效果更加（官方文档传送门：https://docs.cocos.com/creator/manual/zh/physics/collision/），关注公众号“游戏开发小白变怪兽”后台回复“解救人质”获取美术资源及源码。
游戏玩法：
通过控制手枪位置，松手发射子弹击中躲在人质后面的歹徒顺利解救人质，小心不要打中人质哦！
实现逻辑：
分别给子弹、人质和歹徒添加碰撞组件，检测到子弹与歹徒发生碰撞时，营救成功；检测到子弹与人质发生碰撞时，营救失败。
步骤详解：
1.按照图中节点树创建节点，分别将对应贴图拖给对应的节点，并设置节点位置如图，successLabel 和 failLabel 内容分别为“解救成功！”和“解救失败！”：
2.给 hostage 节点添加碰撞组件，并设置组件 Tag 属性和 Size 属性：
当一个节点上有多个碰撞组件时，在发生碰撞后，可以使用 Tag 来判断是节点上的哪个碰撞组件被碰撞了。此时，碰撞组件大小和节点大小一致，同样的步骤将 enemy 和 bullet 节点添加好碰撞组件。
3.接下来在项目设置面板里添加分组：hostage、enemy 和 bullet（注：分组添加后是不可以删除的，不过你可以任意修改分组的名字），并勾选hostage 和 bullet、enemy 和 bullet：
4.在项目设置添加好分组后，分别在 hostage、enemy 和 bullet 属性中的 Group 设置对应分组：
5.接下来新建 Bullet.js 脚本挂载到 bullet 节点下，编辑脚本如下，主要在 update 方法内实现了子弹的移动和销毁，以及碰撞回调函数（注：使用碰撞检测之前一定要获取碰撞检测，且碰撞回调函数名称固定，无需注册！）：
1 // Bullet.js 2 3 cc.Class({ 4 extends: cc.Component, 5 6 properties: { 7 mSpeed: 300, 8 }, 9 10 // LIFE-CYCLE CALLBACKS: 11 12 // onLoad () {}, 13 14 start() { 15 var manager = cc.director.getCollisionManager(); // 获取碰撞检测系统 16 manager.enabled = true; 17 }, 18 19 update(dt) { // 设置子弹移动，当超出屏幕范围未发生碰撞时自动销毁 20 this.node.y += this.mSpeed * dt; 21 22 if (this.node.y > 580) { 23 console.log('超出屏幕范围，子弹销毁！'); 24 25 this.node.destroy(); 26 } 27 }, 28 29 /** 30 * 当碰撞产生的时候调用 31 * @param {Collider} other 产生碰撞的另一个碰撞组件 32 * @param {Collider} self 产生碰撞的自身的碰撞组件 33 */ 34 onCollisionEnter: function (other, self) { 35 console.log('on collision enter'); 36 37 if (other.tag == 1) { // 子弹碰到人质时，解救失败！ 38 console.log('解救人质失败！'); 39 40 var failLabel = this.node.parent.getChildByName('failLabel'); 41 failLabel.active = true; 42 43 this.node.destroy(); 44 45 } else if (other.tag == 2) { // 子弹碰到敌人时，解救成功！ 46 console.log('解救人质成功！'); 47 48 var successLabel = this.node.parent.getChildByName('successLabel'); 49 successLabel.active = true; 50 51 this.node.destroy(); 52 } 53 }, 54 55 /** 56 * 当碰撞产生后，碰撞结束前的情况下，每次计算碰撞结果后调用 57 * @param {Collider} other 产生碰撞的另一个碰撞组件 58 * @param {Collider} self 产生碰撞的自身的碰撞组件 59 */ 60 onCollisionStay: function (other, self) { 61 console.log('on collision stay'); 62 }, 63 64 /** 65 * 当碰撞结束后调用 66 * @param {Collider} other 产生碰撞的另一个碰撞组件 67 * @param {Collider} self 产生碰撞的自身的碰撞组件 68 */ 69 onCollisionExit: function (other, self) { 70 console.log('on collision exit'); 71 } 72 });
编写完脚本后，将 bullet 节点保存为预制件待用。
6.然后编写 gun 节点的控制逻辑脚本 ControlGun.js：
1 // ControlGun.js 2 3 cc.Class({ 4 extends: cc.Component, 5 6 properties: { 7 mBullet: cc.Prefab 8 }, 9 10 // LIFE-CYCLE CALLBACKS: 11 12 onLoad() { }, 13 14 start() { 15 this.node.on('touchstart', this.onTouchStart, this); 16 this.node.on('touchmove', this.onTouchMove, this); 17 this.node.on('touchend', this.ontouchEnd, this); 18 }, 19 20 // update (dt) {}, 21 22 onTouchStart(event) { // 每次点击之前，都要把结果关掉 23 var successLabel = this.node.parent.getChildByName('successLabel'); 24 successLabel.active = false; 25 26 var failLabel = this.node.parent.getChildByName('failLabel'); 27 failLabel.active = false; 28 }, 29 30 onTouchMove(event) { // 控制节点在屏幕范围内左右移动 31 let rangePos = event.getDelta(); 32 33 this.node.x += rangePos.x; 34 35 let minX = -this.node.parent.width / 2 + this.node.width / 2; 36 let maxX = Math.abs(minX); 37 38 let currentPos = this.node.getPosition(); 39 40 if (currentPos.x < minX) { 41 currentPos.x = minX; 42 } else if (currentPos.x > maxX) { 43 currentPos.x = maxX; 44 } 45 46 this.node.setPosition(currentPos); 47 }, 48 49 ontouchEnd(event) { // 松开时发射子弹 50 console.log('发射子弹'); 51 52 let bullet = cc.instantiate(this.mBullet); 53 bullet.parent = this.node.parent; 54 55 let currentPos = this.node.getPosition(); 56 57 bullet.parent = this.node.parent; 58 bullet.setPosition(currentPos); 59 } 60 });
7.最后编写 enemy 的移动脚本：
1 // ControlEnemy.js 2 3 cc.Class({ 4 extends: cc.Component, 5 6 properties: { 7 mSpeed: 300 8 }, 9 10 // LIFE-CYCLE CALLBACKS: 11 12 // onLoad () {}, 13 14 start() { 15 this.minX = -this.node.parent.width / 2 + this.node.width / 2; 16 this.maxX = Math.abs(this.minX); 17 }, 18 19 update(dt) { 20 let currentPos = this.node.getPosition(); 21 22 if (currentPos.x < this.minX) { 23 this.mSpeed = Math.abs(this.mSpeed); 24 } else if (currentPos.x > this.maxX) { 25 this.mSpeed = -Math.abs(this.mSpeed); 26 } 27 28 this.node.x += this.mSpeed * dt; 29 } 30 });
8.编写完所有的脚本之后，就可以预览游戏了，快来试试你能不能成功的就下人质吧！
最后：
通过这个简单的小游戏有没有学会碰撞检测的使用呢？快来下载美术资源尝试一下吧！关注公众号“游戏开发小白变怪兽”后台回复“解救人质”获取美术资源及源码，更有更多优质内容等你发现！
推荐阅读：
我是“Super于”，立志做一个每天都有正反馈的人！
