cocos 碰撞系統

2022-01-17 03:39:35 字數 3897 閱讀 2388

本文將簡要介紹 cocos creator 中的碰撞系統,cocos creator 內建了乙個簡單易用的碰撞檢測系統,支援圓形、矩形以及多邊形相互間的碰撞檢測

當新增了乙個碰撞元件後,可以通過點選 inspector 中的 editing 來開啟碰撞元件的編輯

【多邊形】

如果編輯的是多邊形碰撞元件,會出現如下圖所示的多邊形編輯區域,區域中的這些點是可以拖動的,拖動的結果會反映到多邊形碰撞元件的 points 屬性中

當滑鼠移動到兩點連成的線段上時,滑鼠指標會變成新增樣式,這時點選滑鼠左鍵會在這個地方新增乙個點到多邊形碰撞元件中

按住 ctrl 或 command 按鍵時,移動滑鼠到多邊形頂點上,會發現頂點以及連線的兩條線條變成紅色,這時點選滑鼠左鍵將會刪除多邊形碰撞元件中的這個點

多邊形碰撞元件中有乙個 regenerate points 功能,這個功能可以根據元件依附的節點上的 sprite 元件的貼圖的畫素點來自動生成相應輪廓的頂點

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

【圓形】

如果編輯的是圓形碰撞元件,則會出現下圖所示的圓形編輯區域

當滑鼠懸浮在圓形編輯區域的邊緣線上時,邊緣線會變亮,這時點選滑鼠左鍵拖動將可以修改圓形碰撞元件的半徑大小

【矩形】

如果編輯的是矩形碰撞元件,則會出現如下圖所示的矩形編輯區域

當滑鼠懸浮在矩形碰撞區域的頂點上時,點選滑鼠左鍵拖拽可以同時修改矩形碰撞元件的長寬;當滑鼠懸浮在矩形碰撞區域的邊緣線上時,點選滑鼠左鍵拖拽將修改矩形碰撞元件的長或寬中的乙個方向

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

【偏移】

以上所有的碰撞元件編輯中,都可以在各自的碰撞中心區域點選滑鼠左鍵拖拽來改變偏移量

分組管理,需要開啟專案設定面板進行設定,位置為 選單欄 -> 專案 -> 專案設定

開啟專案設定面板後,在分組管理一欄可以看到分組列表的配置項,如下圖所示

點選新增分組按鈕後即可新增乙個新的分組,缺省會有乙個 default 分組

要注意的是,分組新增後不可以刪除,但可以任意修改分組的名字

【碰撞分組配對】

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

這張表裡的行與列分別列出了分組列表裡面的項,分組列表裡的修改將會實時對映到這張表裡。可以在這張表裡配置哪乙個分組可以對其他的分組進行碰撞檢測,假設 a 行 b 列被勾選上,那麼表示 a 行上的分組將會與 b 列上的分組進行碰撞檢測

根據上面的規則,在這張表裡產生的碰撞對有:

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 other 產生碰撞的另乙個碰撞元件

* @param self 產生碰撞的自身的碰撞元件 */

oncollisionenter:

function

(other, self) ,

/*

* * 當碰撞產生後,碰撞結束前的情況下,每次計算碰撞結果後呼叫

* @param other 產生碰撞的另乙個碰撞元件

* @param self 產生碰撞的自身的碰撞元件 */

oncollisionstay:

function

(other, self) ,

/*

* * 當碰撞結束後呼叫

* @param other 產生碰撞的另乙個碰撞元件

* @param self 產生碰撞的自身的碰撞元件 */

oncollisionexit:

function

(other, self)

【觸發】

properties: ,

start ()

else

}, this

); }

點選屬性檢查器下面的新增元件按鈕,然後從新增碰撞元件中選擇需要的 collider 元件,即可新增 collider 元件到節點上

【屬性】

tag: 標籤。當乙個節點上有多個碰撞元件時,在發生碰撞後,可以使用此標籤來判斷是節點上的哪個碰撞元件被碰撞了

editing: 是否編輯此碰撞元件,只在編輯器中有效

乙個節點上可以掛多個碰撞元件,這些碰撞元件之間可以是不同型別的碰撞元件

碰撞元件目前包括了 polygon(多邊形)、circle(圓形)、box(矩形)這幾種碰撞元件,這些元件都繼承自 collider 元件

【多邊形 polygon】

offset 元件相對於節點的偏移量

points 元件的頂點陣列

【圓形 circle】

offset 元件相對於節點的偏移量

radius 元件的半徑

【矩形 box】

offset 元件相對於節點的偏移量

size 元件的長寬

cocos碰撞檢測

兩個矩形的碰撞檢測,主要看boundingbox是否接觸 rect rc1 spriteauto getboundingbox rect rc2 spritectrl getboundingbox if rc1.intersectsrect rc2 則認為碰撞 兩個圓的碰撞檢測,看圓心距離 poin...

cocos2d x如何檢測碰撞

我們的英雄現在可以發射子彈了,但僅僅只是裝飾而已,如何才能殺掉怪物呢?在這一章,我們將介紹碰撞檢測來實現這一效果。首先,跟蹤怪物和子彈是必需的。在遊戲中,我們為這兩種精靈加以不同的tag來區分它們。當tag 1時,表示這是怪物,而tag 2時,則表示這為子彈。由於在ccnode裡面有m ntag這個...

cocos2d js 入門之碰撞

1 cc.rectintersectsrect ra,rb 判斷兩個矩形是否相交,若相交,返回true 用例 var recta cc.rect 0,0,5,10 var rectb cc.rect 4,9,5,10 var r cc.rectintersectsrect recta,rectb i...