CocosCreator 碰撞組件的使用（第十五篇）

前言：
遊戲中碰撞系統的使用無處不在，比如子彈與敵機的碰撞、英雄與怪物的碰撞、技能與敵人的碰撞···這就需要用到碰撞系統了。
下面將從這幾點介紹碰撞系統：

1. CocosCreator提供了三種碰撞組件：Box Collider，Circle Collider，Polygon Collider；
2. 碰撞的分組管理；
3. 腳本代碼控制碰撞事件。

---

一、Box Collider，Circle Collider，Polygon Collider碰撞組件介紹

添加碰撞組件：

1. Box（矩形） 碰撞組件

屬性	說明
Tag	標籤，當一個節點上有多個碰撞組件時，在發生碰撞後，可以使用此標籤來判斷是節點上的哪個碰撞組件被碰撞了。
Editing	是否編輯此碰撞組件，只在編輯器中有效
Offset	組件相對於節點的 偏移量。
Size	組件的 長寬。

2. Circle（圓形） 碰撞組件

屬性	說明
Offset	組件相對於節點的 偏移量。
Radius	組件的 半徑。

3. Polygon（多邊形） 碰撞組件

屬性	說明
Regenerate Points	根據組件所在節點上的 Sprite 組件的貼圖像素點來自動生成相應輪廓的頂點。
Threshold	指明生成貼圖輪廓頂點間的最小距離，值越大則生成的點越少，可根據需求進行調節。
Offset	組件相對於節點的 偏移量。
Points	組件的 頂點數組。

---

二、碰撞的分組管理

1. 分組管理

分組管理，需要打開項目設置 面板進行設置，位置爲 菜單欄 -> 項目 -> 項目設置。
打開 項目設置 面板後，在 分組管理 一欄可以看到 分組列表 的配置項，如下圖

點擊 添加分組 按鈕後即可添加一個新的分組，默認會有一個 Default 分組。
需要注意的是：分組添加後是不可以刪除的，不過你可以任意修改分組的名字

2. 碰撞分組配對

在 分組列表 下面可以進行 碰撞分組配對 表的管理，如下圖

這張表裏面的行與列分別列出了 分組列表 裏面的項，分組列表 裏的修改將會實時映射到這張表裏。你可以在這張表裏面配置哪一個分組可以對其他的分組進行碰撞檢測，假設 a 行 b 列 被勾選上，那麼表示 a 行 上的分組將會與 b 列 上的分組進行碰撞檢測。
運行時修改節點的 group 之後，需要調用 Collider 的 apply，修改纔會生效。

---

三、腳本代碼控制碰撞事件

獲取碰撞檢測系統:
var manager = cc.director.getCollisionManager();
默認碰撞檢測系統是禁用的，開啓碰撞檢測系統:
manager.enabled = true;
默認碰撞檢測系統的 debug 繪製是禁用的，開啓 debug 繪製：
manager.enabledDebugDraw = true;
顯示碰撞組件的包圍盒：
manager.enabledDrawBoundingBox = true;

碰撞系統回調

碰撞系統的回調函數，主要有三個：

1. 碰撞產生時調用onCollisionEnter: function (other, self)
2. 碰撞保持時調用onCollisionStay: function (other, self)
3. 碰撞結束時調用onCollisionExit: function (other, self)

/**
 * @param  {Collider} other 產生碰撞的另一個碰撞組件
 * @param  {Collider} self  產生碰撞的自身的碰撞組件
 */
onCollisionEnter: function (other, self) {
    console.log('on collision enter');
    // 碰撞系統會計算出碰撞組件在世界座標系下的相關的值，並放到 world 這個屬性裏面
    var world = self.world;
    // 碰撞組件的 aabb 碰撞框
    var aabb = world.aabb;
    // 節點碰撞前上一幀 aabb 碰撞框的位置
    var preAabb = world.preAabb;
    // 碰撞框的世界矩陣
    var t = world.transform;
    // 以下屬性爲圓形碰撞組件特有屬性
    var r = world.radius;
    var p = world.position;
    // 以下屬性爲 矩形 和 多邊形 碰撞組件特有屬性
    var ps = world.points;
},

// 當碰撞產生後，碰撞結束前的情況下，每次計算碰撞結果後調用
onCollisionStay: function (other, self) {
    console.log('on collision stay');
},

// 當碰撞結束後調用
onCollisionExit: function (other, self) {
    console.log('on collision exit');
}

---

這世上，沒有誰活得比誰容易，只是有人在呼天搶地，有人在默默努力。