常见的2D碰撞检测全解析：方法、实现与优化策略

引言

在2D游戏开发、图形应用或物理模拟中，2D碰撞检测是核心功能之一。无论是角色与障碍物的交互、子弹击中目标，还是UI元素的交互反馈，都需要依赖高效、准确的碰撞检测算法。本文将系统梳理常见的2D碰撞检测方法，从基础到进阶，结合代码示例与优化策略，为开发者提供可落地的技术方案。

一、基础几何形状碰撞检测

1. 轴对齐包围盒（AABB, Axis-Aligned Bounding Box）

原理：AABB是最简单的碰撞检测方法，通过比较两个矩形在x轴和y轴上的投影是否重叠来判断碰撞。
优点：计算量小，适合移动设备或大规模对象检测。
缺点：无法处理旋转矩形，精度较低。
实现示例：

function checkAABBCollision(rect1, rect2) {
    return (rect1.x < rect2.x + rect2.width &&
            rect1.x + rect1.width > rect2.x &&
            rect1.y < rect2.y + rect2.height &&
            rect1.y + rect1.height > rect2.y);
}

应用场景：适用于快速排除不可能碰撞的对象，如角色与静态场景的初步检测。

2. 圆形碰撞检测

原理：通过比较两个圆心的距离与半径之和判断碰撞。
公式：若距离 d ≤ r1 + r2，则碰撞发生。
优点：计算简单，适合圆形对象（如子弹、粒子）。
实现示例：

function checkCircleCollision(circle1, circle2) {
    const dx = circle1.x - circle2.x;
    const dy = circle1.y - circle2.y;
    const distance = Math.sqrt(dx * dx + dy * dy);
    return distance <= circle1.radius + circle2.radius;
}

优化技巧：避免开方运算，改用距离平方比较：

return (dx * dx + dy * dy) <= (circle1.radius + circle2.radius) ** 2;

3. 分离轴定理（SAT, Separating Axis Theorem）

原理：适用于凸多边形碰撞检测，通过检查所有可能的分离轴是否存在来判断碰撞。
步骤：

1. 对每个多边形的边生成法线作为分离轴。
2. 将两个多边形的顶点投影到分离轴上。
3. 若投影区间不重叠，则无碰撞。
   优点：支持任意凸多边形，精度高。
   缺点：计算复杂度较高（O(nm)，n和m为多边形边数）。
   *实现示例（简化版）：

   function checkSATCollision(poly1, poly2) {
    const edges = [...poly1.edges, ...poly2.edges];
    for (const edge of edges) {
        const axis = { x: -edge.y, y: edge.x }; // 法线
        const proj1 = projectPolygon(poly1, axis);
        const proj2 = projectPolygon(poly2, axis);
        if (!isOverlapping(proj1, proj2)) return false;
    }
    return true;
   }

   应用场景：复杂形状的角色或物体碰撞，如平台游戏中的角色与地形交互。

二、像素级碰撞检测

1. 遮罩（Mask）检测

原理：通过位图或像素数据判断两个对象是否重叠。
实现步骤：

1. 渲染对象到离屏缓冲区，生成遮罩图。
2. 逐像素比较遮罩图的重叠区域。
   优点：精度极高，适合不规则形状。
   缺点：性能开销大，需GPU加速。
   优化策略：

• 使用分层检测：先通过AABB或SAT缩小范围，再执行像素检测。
• 降低分辨率：在遮罩图中使用较低分辨率。

2. 颜色编码检测

原理：为每个对象的像素分配唯一颜色ID，通过读取重叠区域的颜色判断碰撞对象。
应用示例：Unity的Physics2D.OverlapAreaAll结合自定义着色器。
适用场景：需要精确知道碰撞点的游戏逻辑（如击中特效）。

三、空间分区与优化策略

1. 四叉树（Quadtree）

原理：将2D空间递归划分为四个象限，仅检测同一或相邻象限内的对象。
优点：减少检测次数，适合动态对象。
实现示例（伪代码）：

class Quadtree {
    constructor(boundary, capacity) {
        this.boundary = boundary; // 矩形边界
        this.capacity = capacity; // 节点容量
        this.points = []; // 存储对象
        this.divided = false; // 是否划分
    }
    // 插入、查询、划分逻辑...
}

应用场景：大规模对象（如子弹雨、粒子系统）的碰撞检测。

2. 网格划分（Spatial Hashing）

原理：将空间划分为固定大小的网格，每个网格存储其中的对象。
优点：实现简单，适合静态或半静态场景。
实现示例：

const gridSize = 100; // 网格大小
const grid = new Map();
function insertObject(obj) {
    const key = `${Math.floor(obj.x / gridSize)},${Math.floor(obj.y / gridSize)}`;
    if (!grid.has(key)) grid.set(key, []);
    grid.get(key).push(obj);
}

四、高级技术：连续碰撞检测（CCD）

1. 射线检测（Raycasting）

原理：发射一条射线，检测与对象的交点。
应用场景：预测子弹轨迹、角色移动路径。
实现示例（简化版）：

function rayIntersectsRect(rayStart, rayEnd, rect) {
    // 计算射线与矩形四条边的交点...
    // 返回最近交点
}

2. 扫掠形状检测

原理：将动态对象的移动轨迹建模为扫掠形状（如扫掠圆、扫掠AABB），检测与其他对象的交集。
优点：避免高速对象“穿透”问题。
数学基础：闵可夫斯基和（Minkowski Sum）。

五、实践建议与工具推荐

1. 分层检测：结合AABB（粗检测）+ SAT/像素（精检测）。
2. 性能监控：使用console.time()或Profiler工具分析检测耗时。
3. 库与框架：
   • Box2D（物理引擎，内置碰撞检测）
   • Matter.js（轻量级2D物理库）
   • PixiJS（渲染引擎，支持像素检测）
4. 调试技巧：可视化碰撞形状（如绘制AABB边框）。

结论

2D碰撞检测的选择需权衡精度、性能与复杂度。对于简单场景，AABB或圆形检测足够；复杂形状推荐SAT；极致精度需像素检测。通过空间分区与分层检测，可显著提升性能。开发者应根据项目需求灵活组合技术，并借助现有库加速开发。