2D 碰撞检测


Broad phase 能为你提供有可能碰撞的实体列表。这可通过一些特殊的数据结构实现,它们能为你提供这些信息:实体存在哪里和哪些实体在其周围。这些数据结构可以是:四叉树(Quad Trees)、R树(R-Trees)或空间哈希映射(Spatial Hashmap)等

Narrow Phase:
  • 外接图形判别法
    • 轴对称包围盒(Axis-Aligned Bounding Box),即无旋转矩形:判断任意两个(无旋转)矩形的任意一边是否无间距,从而判断是否碰撞
    • 圆形碰撞:通过判断任意两个圆形的圆心距离是否小于两圆半径之和,若小于则为碰撞
    • 圆形与矩形(无旋转):通过找出矩形上离圆心最近的点,然后通过判断该点与圆心的距离是否小于圆的半径,若小于则为碰撞
    • 圆形与旋转矩形(以矩形中心点为旋转轴):将画布(即 Canvas)反向旋转即转换为上述问题。
  • 光线投射法:通过检测两个物体的速度矢量是否存在交点,且该交点满足一定条件,适合运动速度快的物体 // 例子
  • 分离轴定理:通过判断任意两个 凸多边形在任意角度(其实投影轴的数量与多边形的边数相等即可)下的投影是否均存在重叠,来判断是否发生碰撞。若在某一角度光源下,两物体的投影存在间隙,则为不碰撞,否则为发生碰撞 // 不适用于凹多边形
  • 其他
    • 地图格子划分
    • 像素检测 // 先通过运算得到两者相交区域,然后只对该区域内的像素进行检测
      • 通过将两个物体在 offscreen canvas 中判断同一位置(坐标)下是否同时存在非透明的像素
      • 利用 canvas 的 globalCompositeOperation = 'destination-in' 属性。该属性会让两者的重叠部分会被保留,其余区域都变成透明。因此,若存在非透明像素,则为碰撞