等一下，我碰！”——深度解析2D游戏中的碰撞检测机制

2025年10月12日 互联网

一、碰撞检测的核心价值：从“等一下”到精准交互

在2D游戏开发中，碰撞检测是物理交互的基石。无论是角色跳跃踩中平台、子弹击中敌人，还是玩家拾取道具，都依赖高效的碰撞检测算法。一句“等一下，我碰！”背后，是开发者对检测精度、性能与实现复杂度的权衡。
为什么重要？

  • 游戏性：错误的碰撞检测会导致角色“穿墙”或攻击无效，破坏沉浸感。
  • 性能：低效的算法可能引发帧率下降，尤其在移动设备上。
  • 扩展性：灵活的检测机制支持复杂场景（如动态障碍物、变形物体）。

二、基础碰撞检测：矩形与圆形的“初次碰撞”

1. 轴对齐矩形检测（AABB）

原理：通过比较两个矩形的边界坐标判断是否重叠。
公式： 

  1. function checkAABBCollision(rectA, rectB) {
  2.   return (
  3.     rectA.x < rectB.x + rectB.width &&
  4.     rectA.x + rectA.width > rectB.x &&
  5.     rectA.y < rectB.y + rectB.height &&
  6.     rectA.y + rectA.height > rectB.y
  7.   );
  8. }

优势：计算简单，适合静态或低速移动物体。
局限：无法处理旋转矩形，需结合其他方法（如分离轴定理，SAT）。

2. 圆形碰撞检测

原理：计算两圆心距离是否小于半径之和。
公式： 

  1. function checkCircleCollision(circleA, circleB) {
  2.   const dx = circleA.x - circleB.x;
  3.   const dy = circleA.y - circleB.y;
  4.   const distance = Math.sqrt(dx * dx + dy * dy);
  5.   return distance < circleA.radius + circleB.radius;
  6. }

优势：天然支持旋转物体，计算量小于多边形检测。
适用场景：弹道轨迹、粒子效果等。

三、进阶技术：像素级与多边形检测

1. 像素级碰撞检测

原理：逐像素比较两个精灵的透明度通道，判断是否重叠。
实现步骤：

  1. 渲染精灵到离屏画布，仅保留非透明像素。
  2. 遍历重叠区域的像素，检测是否存在非零值。
    代码示例（伪代码）： 
    1. function checkPixelCollision(spriteA, spriteB) {
    2. const canvas = createOffscreenCanvas();
    3. const ctx = canvas.getContext('2d');
    4. // 绘制spriteA和spriteB的遮罩
    5. // 遍历重叠区域像素...
    6. return hasOverlappingPixels;
    7. }

    优势：精度极高，适合复杂形状（如不规则地形）。
    代价：性能开销大，需优化（如空间分区、缓存）。

2. 多边形检测：分离轴定理（SAT）

原理：将多边形投影到各轴，若所有轴上的投影重叠，则碰撞。
关键步骤：

  1. 找出两个多边形的所有边对应的法线轴。
  2. 将多边形顶点投影到每个轴，计算最小/最大值。
  3. 检查投影是否重叠。
    代码示例（简化版）：
    ```javascript
    function projectPolygon(axis, vertices) {
    let min = Infinity, max = -Infinity;
    for (const vertex of vertices) {
    const projection = vertex.x axis.x + vertex.y axis.y;
    min = Math.min(min, projection);
    max = Math.max(max, projection);
    }
    return { min, max };
    }

function checkSATCollision(polyA, polyB) {
const axes = […polyA.edges, …polyB.edges].map(edge => ({
x: -edge.y,
y: edge.x
}));
for (const axis of axes) {
const projA = projectPolygon(axis, polyA.vertices);
const projB = projectPolygon(axis, polyB.vertices);
if (projA.max < projB.min || projB.max < projA.min) {
return false;
}
}
return true;
}

  1. **优势**：支持任意凸多边形，精度高。  
  2. **局限**：凹多边形需预处理为凸多边形。  
  4. ### 四、性能优化：从“暴力检测”到空间分区
  5. #### 1. 空间分区技术
  6. **四叉树（Quadtree）**：  
  7. - 将场景递归划分为四个象限，仅检测同一分区内的物体。  
  8. - 适合动态物体分布不均的场景（如开放世界）。  
  10. **网格分区（Grid）**：  
  11. - 将场景划分为固定大小的网格，物体注册到所在网格。  
  12. - 适合均匀分布的物体（如棋盘游戏）。  
  14. **代码示例**（四叉树插入）：  
  15. ```javascript
  16. class Quadtree {
  17.   constructor(boundary, capacity) {
  18.     this.boundary = boundary; // 矩形边界
  19.     this.capacity = capacity; // 最大物体数
  20.     this.points = [];
  21.     this.divided = false;
  22.   }
  24.   insert(point) {
  25.     if (!this.boundary.contains(point)) return false;
  26.     if (this.points.length < this.capacity && !this.divided) {
  27.       this.points.push(point);
  28.       return true;
  29.     } else {
  30.       if (!this.divided) this.subdivide();
  31.       return (
  32.         this.northeast.insert(point) ||
  33.         this.northwest.insert(point) ||
  34.         this.southeast.insert(point) ||
  35.         this.southwest.insert(point)
  36.       );
  37.     }
  38.   }
  39. }

2. 粗检测+精检测

流程：

  1. 粗检测：用简单形状（如包围盒）快速排除无关物体。
  2. 精检测：对可能碰撞的物体进行高精度检测（如像素级）。
    优势：减少不必要的计算，提升帧率。

五、实际应用建议

  1. 根据游戏类型选择算法：
    • 平台游戏：AABB+斜坡特殊处理。
    • 射击游戏：圆形检测+像素级爆头判定。
  2. 动态与静态物体分离：
    • 静态物体（如地形）可预计算碰撞数据。
  3. 调试工具：
    • 可视化碰撞体边界，便于排查“穿模”问题。

六、未来方向：物理引擎集成

对于复杂项目，可集成成熟物理引擎（如Box2D、Matter.js），它们内置了高效的碰撞检测与响应系统，支持刚体动力学、关节约束等高级功能。

结语
从“等一下，我碰！”的直觉到数学公式的严谨，2D碰撞检测是游戏开发中“看不见的基石”。通过合理选择算法、优化性能，开发者能在保证游戏流畅性的同时，实现细腻的物理交互。

最新文章