Game development, collision detection is everywhere, on the adoption of a simple little game to teach you to learn how to collision detection in Cocos Creator today. With the official documentation learning more (official document portal: https: //docs.cocos.com/creator/manual/zh/physics/collision/), public concern number "game development becomes white monster" backstage reply "to rescue the hostages "get the source code and art assets.
Gameplay:
By controlling the position of a pistol, firing bullets hit let go of the hostages criminals hiding behind the successful hostage rescue, be careful not to hit the hostages Oh!
Implementation logic:
Respectively, to bullets, hostages and criminals add components collision is detected when the bullet collides with criminals, rescue success; detected when the bullet collides with the hostage rescue fails.
Detailed steps:
1. Create a tree node node according to the figures, corresponding respectively to the corresponding node mapping drag and set the node position as shown, successLabel and failLabel contents were "rescue success!" And "save failed!":
2. to add a node collision hostage assembly, and set the component attribute Tag and Size properties:
When a plurality of components on a node collision, after the collision, the Tag may be used to determine which nodes are on a collision component it crashed. In this case, the same size and components collision node size, the same steps to add bullet and enemy good impact node assembly.
3. Next add in the project settings panel groups: hostage, enemy and bullet (Note: after adding the packet is not deleted, but you can change the name of any grouping), and check the hostage and bullet, enemy and bullet:
4. Add the item provided good packet, respectively Group provided hostage, enemy and the corresponding packet bullet properties:
5. Next Bullet.js new script mount the bullet node, edit the script below, mainly in the update method enables destruction and moving bullet, and collision callback function (Note: Before using the collision detection must obtain the collision detection, and fixed collision callback function name, no registration required)!:
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于」，立志做一个每天都有正反馈的人！