cocos 碰撞系統

前面的話

　　本文將簡要介紹 Cocos Creator 中的碰撞系統，Cocos Creator 內置了一個簡單易用的碰撞檢測系統，支持圓形、矩形以及多邊形相互間的碰撞檢測

 

編輯碰撞組件

　　當添加了一個碰撞組件後，能夠經過點擊 inspector 中的 editing 來開啓碰撞組件的編輯

【多邊形】

　　若是編輯的是多邊形碰撞組件，會出現以下圖所示的多邊形編輯區域，區域中的這些點是能夠拖動的，拖動的結果會反映到多邊形碰撞組件的 points 屬性中

　　當鼠標移動到兩點連成的線段上時，鼠標指針會變成添加樣式，這時點擊鼠標左鍵會在這個地方添加一個點到多邊形碰撞組件中

　　按住 ctrl 或 command 按鍵時，移動鼠標到多邊形頂點上，會發現頂點以及鏈接的兩條線條變成紅色，這時點擊鼠標左鍵將會刪除多邊形碰撞組件中的這個點

　　多邊形碰撞組件中有一個 Regenerate Points 功能，這個功能能夠根據組件依附的節點上的 Sprite 組件的貼圖的像素點來自動生成相應輪廓的頂點

　　Threshold 指明生成貼圖輪廓頂點間的最小距離，值越大則生成的點越小，可根據需求進行調節

【圓形】

　　若是編輯的是圓形碰撞組件，則會出現下圖所示的圓形編輯區域

　　當鼠標懸浮在圓形編輯區域的邊緣線上時，邊緣線會變亮，這時點擊鼠標左鍵拖動將能夠修改圓形碰撞組件的半徑大小

【矩形】

　　若是編輯的是矩形碰撞組件，則會出現以下圖所示的矩形編輯區域

　　當鼠標懸浮在矩形碰撞區域的頂點上時，點擊鼠標左鍵拖拽能夠同時修改矩形碰撞組件的長寬；當鼠標懸浮在矩形碰撞區域的邊緣線上時，點擊鼠標左鍵拖拽將修改矩形碰撞組件的長或寬中的一個方向

　　按住 shift 鍵拖拽時，在拖拽過程當中將會保持按下鼠標那一刻的長寬比例，按住 alt 鍵拖拽時，在拖拽過程當中將會保持矩形中心點位置不變

【偏移】

　　以上全部的碰撞組件編輯中，均可以在各自的碰撞中心區域點擊鼠標左鍵拖拽來改變偏移量

 

碰撞分組

　　分組管理，須要打開項目設置面板進行設置，位置爲 菜單欄 -> 項目 -> 項目設置

　　打開項目設置面板後，在分組管理一欄能夠看到分組列表的配置項，以下圖所示

　　點擊添加分組按鈕後便可添加一個新的分組，默認會有一個 Default 分組

　　要注意的是，分組添加後不能夠刪除，但能夠任意修改分組的名字

【碰撞分組配對】

　　在分組列表下面能夠進行碰撞分組配對錶的管理，以下圖所示

　　這張表裏的行與列分別列出了分組列表裏面的項，分組列表裏的修改將會實時映射到這張表裏。能夠在這張表裏配置哪個分組能夠對其餘的分組進行碰撞檢測，假設 a 行 b 列被勾選上，那麼表示 a 行上的分組將會與 b 列上的分組進行碰撞檢測

　　運行時修改節點的 group 以後，須要調用 Collider 的 apply，修改纔會生效

　　根據上面的規則，在這張表裏產生的碰撞對有：

　　Platform-Bullet、Collider-Collider、Actor-Wall、Actor-Platform

 

腳本控制

　　cocos creator 內置了一個簡單易用的碰撞檢測系統，根據添加的碰撞組件進行碰撞檢測

　　當一個碰撞組件被啓用時，這個碰撞組件會被自動添加到碰撞檢測系統中，並搜索可以與之進行碰撞的其餘已添加的碰撞組件來生成一個碰撞對

　　須要注意的是，一個節點上的碰撞組件，不管如何都是不會進行相互碰撞檢測的

【接口】

　　獲取碰撞檢測系統

const manager = cc.director.getCollisionManager();

　　默認碰撞檢測系統是禁用的，若是須要使用則須要使用如下方法來開啓碰撞檢測系統

manager.enabled = true;

　　默認碰撞檢測系統的 debug 繪製是禁用的，若是須要使用則使用如下方法開啓 debug 繪製

manager.enableDebugDraw = true;

　　開啓後在運行時可顯示碰撞組件的碰撞檢測範圍，以下所示

　　若是須要顯示碰撞組件的包圍盒，能夠經過如下接口來進行設置

manager.enabledDrawBoundingBox = true;

　　結果以下所示

【回調】

　　當碰撞系統檢測到有碰撞產生時，將會以回調的方式通知使用者，若是產生碰撞的碰撞組件依附的節點下掛的腳本中有實現如下函數，則會自動調用如下函數，並傳入相關參數

/**
 * 當碰撞產生的時候調用
 * @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;
},

/**
 * 當碰撞產生後，碰撞結束前的狀況下，每次計算碰撞結果後調用
 * @param  {Collider} other 產生碰撞的另外一個碰撞組件
 * @param  {Collider} self  產生碰撞的自身的碰撞組件
 */
onCollisionStay: function (other, self) {
    console.log('on collision stay');
},

/**
 * 當碰撞結束後調用
 * @param  {Collider} other 產生碰撞的另外一個碰撞組件
 * @param  {Collider} self  產生碰撞的自身的碰撞組件
 */
onCollisionExit: function (other, self) {
    console.log('on collision exit');
}

【觸發】

    properties: {
        collider: cc.BoxCollider
    },

    start () {
        // 開啓碰撞檢測系統，未開啓時沒法檢測
        cc.director.getCollisionManager().enabled = true;
        // cc.director.getCollisionManager().enabledDebugDraw = true;

        this.collider.node.on(cc.Node.EventType.TOUCH_START, function (touch, event) {
            // 返回世界座標
            let touchLoc = touch.getLocation();
            // https://docs.cocos.com/creator/api/zh/classes/Intersection.html 檢測輔助類
            if (cc.Intersection.pointInPolygon(touchLoc, this.collider.world.points)) {
                console.log("Hit!");
            }
            else {
                console.log("No hit");
            }
        }, this);
    }

 

collider 組件

　　點擊屬性檢查器下面的添加組件按鈕，而後從添加碰撞組件中選擇須要的 Collider 組件，便可添加 collider 組件到節點上

【屬性】

tag: 標籤。當一個節點上有多個碰撞組件時，在發生碰撞後，可使用此標籤來判斷是節點上的哪一個碰撞組件被碰撞了
editing: 是否編輯此碰撞組件，只在編輯器中有效

　　一個節點上能夠掛多個碰撞組件，這些碰撞組件之間能夠是不一樣類型的碰撞組件

　　碰撞組件目前包括了 Polygon(多邊形)、Circle(圓形)、Box(矩形)這幾種碰撞組件，這些組件都繼承自 Collider 組件

【多邊形 Polygon】

offset 組件相對於節點的偏移量
points 組件的頂點數組

【圓形 circle】

offset 組件相對於節點的偏移量
radius 組件的半徑

【矩形 box】

offset 組件相對於節點的偏移量
size 組件的長寬