Canvas上的像素碰撞偵測(
capx )
- 在畫布上拖曳畫彩色的圓
- 當紅球碰到彩色圓會反彈,並且清除附近一個範圍內的像素
概念
C2內建的碰撞偵測方法是用碰撞框是否交疊判定,但由於canvas上只有像素而沒有固定的碰撞框,所以不能直接用內建方式做碰撞偵測。
像素碰撞偵測的核心做法是,某點位置是否在碰撞框內。但canvas上有大量像素,所以減少檢測的像素數量是必要的。
首先取出物件所在上下左右四邊界內的像素陣列。即不需檢測物件邊界外的像素,以demo來說,會取出40x40大小的像素陣列,共1600個點。
取出像素陣列後,先檢查每點像素的alpha是否為0(表示該點不顯示),不為0再繼續檢測該點位置是否在物件的碰撞框內。如果成立,則檢測到像素碰撞,結束偵測。
由於碰撞框是一個封閉的多邊形,從左上開始依序檢查並不是最快的,我採取的作法是,在像素陣列內隨機取點(一般來說隨機變數是
均勻分布的)。並且最多隨機取出總像數量10%,即是160個點做上述的檢測。這160個點都不顯示,或不在物件碰撞框內,就當作沒有碰撞。
碰撞後的反彈角度計算,就不在此詳述了。