「人質救出」することで、小さなゲームはあなたを教えてどのように衝突検出へ

ゲーム開発、衝突検出はどのように今日ココスクリエーターで衝突検出をすることを学ぶためにあなたを教えるために、単純な小さなゲームの採用で、どこにでもあります。もっと学んで公式ドキュメントと（します。https：公式文書ポータルを//docs.cocos.com/creator/manual/zh/physics/collision/）、国民の関心番号舞台裏返信「人質を救出する「ゲーム開発は、白い怪物になりました」「ソースコードと芸術の資産を取得します。

再生する方法：

ピストルの位置を制御することにより、発射弾丸がああ人質にヒットしないように注意して、成功した人質救出の後ろに隠れて人質の犯罪者を手放すヒット！

実装ロジック：

弾丸は、人質救出に失敗したと衝突したときに検出;それぞれ、箇条書きに、人質や犯罪者は、弾丸が犯罪者、救助の成功と衝突したときのコンポーネントの衝突が検出された追加します。

詳細な手順：

1.対応するノードマッピングドラッグにそれぞれ対応する、統計によると、ツリーノードのノードを作成して示され、successLabelとfailLabel内容があったようにノードの位置を設定し、「失敗したセーブ！」「レスキュー成功！」：

2.ノードの衝突人質アセンブリを追加し、コンポーネント属性タグとSizeプロパティを設定するには：

ノード衝突に複数の成分が、衝突後、タグは、それがクラッシュした衝突コンポーネント上にあるどのノードを決定するために使用することができる場合。この場合、同じサイズ及び構成要素衝突ノードサイズ、弾丸と敵良好な衝撃ノード・アセンブリを追加するために同じ手順。

3.次に、プロジェクト設定パネルグループに追加：人質、敵の弾丸（注：パケットを追加した後に削除されませんが、あなたはどのグループの名前を変更することができます）、そして人質と弾丸、敵弾をチェックします。

4.項目を追加し、優れたパケットを提供し、それぞれのグループは人質、敵と対応するパケット弾丸のプロパティを提供します：

5.次にBullet.js新しいスクリプトは、主に更新方法では、以下のスクリプトを編集し、弾丸のノードを実装注（破壊や弾丸を移動し、衝突コールバック機能を有効に：衝突検出を使用する前に衝突検出を取得する必要があり、固定衝突コールバック関数名は、一切登録）は必要ありません！：

 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.编写完所有的脚本之后，就可以预览游戏了，快来试试你能不能成功的就下人质吧！

最后：

通过这个简单的小游戏有没有学会碰撞检测的使用呢？快来下载美术资源尝试一下吧！关注公众号「游戏开发小白变怪兽」后台回复「解救人质」获取美术资源及源码，更有更多优质内容等你发现！

「人質救出」することで、小さなゲームはあなたを教えてどのように衝突検出へ

おすすめ