一、2D图形碰撞检测的核心价值与应用场景

在2D游戏开发、CAD设计、物理模拟等领域，碰撞检测是核心功能模块。其本质是通过数学方法判断两个或多个图形是否发生空间重叠，进而触发交互逻辑（如游戏角色受伤、物体反弹）。以《超级马里奥》为例，马里奥与砖块、敌人的碰撞检测直接决定了游戏玩法；在工业设计软件中，碰撞检测可验证部件装配的合理性。

传统方法中，开发者常采用“包围盒检测+像素级细化”的分层策略：先通过粗略检测快速排除不相交对象，再对可能碰撞的对象进行精确计算。这种设计兼顾了效率与准确性，是现代2D引擎的通用方案。

二、基础几何形状的碰撞检测算法

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

轴对齐矩形（Axis-Aligned Bounding Box）是最简单的碰撞形状，其边与坐标轴平行。检测逻辑仅需比较两个矩形的左右、上下边界：

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. 圆形碰撞检测

圆形碰撞通过计算圆心距离与半径之和的关系判断：

def checkCircleCollision(circle1, circle2):
    dx = circle1.x - circle2.x
    dy = circle1.y - circle2.y
    distance = math.sqrt(dx*dx + dy*dy)
    return distance < (circle1.radius + circle2.radius)

应用场景：粒子系统、弹道模拟等需要平滑碰撞的场景。
优化技巧：避免频繁调用sqrt，可比较距离平方与半径平方和。

3. 多边形碰撞检测：分离轴定理（SAT）

对于凸多边形，分离轴定理（Separating Axis Theorem）是高效解决方案。其核心思想是：若存在一条直线（轴），使得两个多边形在该直线上的投影不重叠，则它们不相交。

实现步骤：

1. 获取两个多边形的所有边，计算每条边的法线作为检测轴。
2. 将两个多边形投影到每个轴上，计算投影区间的最小/最大值。
3. 若任一轴上投影不重叠，则无碰撞；否则发生碰撞。

// 简化版SAT实现（需补充向量计算）
boolean checkPolygonCollision(Polygon a, Polygon b) {
    for (Edge edge : a.edges.concat(b.edges)) {
        Vector axis = edge.normal; // 边法线
        float minA = Float.MAX_VALUE, maxA = Float.MIN_VALUE;
        float minB = Float.MAX_VALUE, maxB = Float.MIN_VALUE;
        // 投影多边形A到轴
        for (Vector vertex : a.vertices) {
            float projection = vertex.dot(axis);
            minA = Math.min(minA, projection);
            maxA = Math.max(maxA, projection);
        }
        // 投影多边形B到轴
        for (Vector vertex : b.vertices) {
            float projection = vertex.dot(axis);
            minB = Math.min(minB, projection);
            maxB = Math.max(maxB, projection);
        }
        // 检查投影是否重叠
        if (maxA < minB || maxB < minA) {
            return false; // 存在分离轴
        }
    }
    return true;
}

关键点：

• 仅适用于凸多边形，凹多边形需先拆分为凸多边形。
• 轴数量与多边形边数成正比，复杂度为O(n+m)。

三、高级技术：像素级碰撞检测

当几何方法无法满足精度需求时（如不规则图形），可采用像素级检测。其流程为：

1. 将图形渲染到离屏缓冲区，用特定颜色标记碰撞区域。
2. 读取目标位置的像素颜色，若为标记色则判定碰撞。

Canvas实现示例：

function isPixelCollision(ctx, obj1, obj2) {
    // 绘制obj1到离屏Canvas（用红色标记碰撞区）
    ctx.save();
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    drawObject(ctx, obj1, "red"); // 自定义绘制函数
    const pixelData1 = ctx.getImageData(obj2.x, obj2.y, 1, 1).data;
    ctx.restore();
    // 绘制obj2并检查重叠区域
    ctx.save();
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    drawObject(ctx, obj2, "blue");
    const pixelData2 = ctx.getImageData(obj1.x, obj1.y, 1, 1).data;
    ctx.restore();
    // 简单判断：若两对象在对方区域检测到标记色则碰撞
    return (pixelData1[0] > 0) && (pixelData2[0] > 0);
}

适用场景：

• 高精度需求（如医学图像分析）。
• 图形边缘复杂（如手写字体）。
  性能警告：单次检测需多次渲染和像素读取，仅适合小规模或低频场景。

四、性能优化策略

1. 空间分区技术：

   • 四叉树：将场景递归划分为四个象限，仅检测同一分区内的对象。
   • 网格分区：固定大小的网格，每个对象关联其占据的网格单元。
     效果：可减少90%以上的无效检测（如开放世界游戏中远距离对象）。

2. 宽相位检测（Broad Phase）：
   先使用AABB或空间哈希快速排除明显不相交的对象，再对候选对进行精确检测。例如，在Unity中可通过Physics2D.OverlapAreaAll实现。

3. 持续碰撞检测（CCD）：
   针对高速移动对象，传统单帧检测可能漏判。可通过预测轨迹或插值计算解决。例如，Box2D引擎提供了m_continuousPhysics选项。

4. 多线程与GPU加速：

   • 将碰撞检测任务分配至Web Worker（前端）或Compute Shader（原生开发）。
   • 实验数据显示，GPU并行计算可使大规模粒子碰撞检测提速10倍以上。

五、工具与框架推荐

1. Box2D：成熟的2D物理引擎，支持复杂形状、关节、布料模拟。
2. Matter.js：轻量级JavaScript物理库，适合游戏开发。
3. Chipmunk2D：高性能C语言库，提供多种碰撞约束。
4. 自定义引擎开发建议：
   • 从AABB+SAT组合开始，逐步添加空间分区。
   • 使用TypeScript/Rust等强类型语言提升可靠性。

六、未来趋势

随着WebGPU的普及，浏览器端将实现更高效的GPU碰撞计算；AI技术可能用于自动生成碰撞多边形或优化检测顺序。开发者需持续关注硬件加速接口和算法创新。

结语：2D图形碰撞检测是连接数学理论与工程实践的桥梁。通过合理选择算法层级、优化数据结构，开发者可在精度与性能间取得平衡，为项目奠定坚实基础。