Flutter Flame角色碰撞障碍物角落的处理方案咨询

我正在开发一款俯视视角的开放世界小游戏，玩家可操控角色在布满障碍物的场景中移动。当前实现的onCollision方法能正常处理角色与障碍物横竖墙面的碰撞，但碰撞障碍物角落时，位置修正逻辑失效，导致角色卡顿。

当前onCollision方法代码：

@override
void onCollision(Set<Vector2> intersectionPoints, PositionComponent other) {
  if (other is Wall) {
    if (intersectionPoints.length == 2) {
      var pointA = intersectionPoints.elementAt(0);
      var pointB = intersectionPoints.elementAt(1);
      final mid = (pointA + pointB) / 2;
      final collisionVector = absoluteCenter - mid;
      double penetrationDepth = (size.x / 2) - collisionVector.length;
      collisionVector.normalize();
      position += collisionVector.scaled(penetrationDepth);
    }
  }
  super.onCollision(intersectionPoints, other);
}

问题根源 #

当前逻辑仅适配两个交点的墙面碰撞场景，而角色撞角落时，交点数量通常为1（单点碰撞），或者两个交点间距极小，导致中点计算、穿透深度的逻辑完全失效，进而引发卡顿。

解决思路 #

1. 新增单点碰撞处理逻辑 #

当intersectionPoints.length == 1时，直接取该交点作为碰撞基准点，计算角色中心到该点的向量来修正位置：

if (intersectionPoints.length == 1) {
  final collisionPoint = intersectionPoints.first;
  final collisionVector = absoluteCenter - collisionPoint;
  final penetrationDepth = (size.x / 2) - collisionVector.length;
  if (penetrationDepth > 0) { // 仅在存在穿透时执行修正
    collisionVector.normalize();
    position += collisionVector.scaled(penetrationDepth);
  }
}

2. 优化多点碰撞的边界判断 #

当交点数量为2时，先判断两点是否接近（属于角落碰撞的近似场景）：

• 计算两点间距离，若小于角色尺寸的10%这类阈值，按单点碰撞逻辑处理
• 否则维持原墙面碰撞处理逻辑

示例代码片段：

if (intersectionPoints.length == 2) {
  var pointA = intersectionPoints.elementAt(0);
  var pointB = intersectionPoints.elementAt(1);
  // 判断是否为角落碰撞（两点间距过近）
  if ((pointA - pointB).length < size.x * 0.1) {
    final collisionPoint = (pointA + pointB) / 2;
    final collisionVector = absoluteCenter - collisionPoint;
    final penetrationDepth = (size.x / 2) - collisionVector.length;
    if (penetrationDepth > 0) {
      collisionVector.normalize();
      position += collisionVector.scaled(penetrationDepth);
    }
  } else {
    // 原墙面碰撞处理逻辑
    final mid = (pointA + pointB) / 2;
    final collisionVector = absoluteCenter - mid;
    double penetrationDepth = (size.x / 2) - collisionVector.length;
    collisionVector.normalize();
    position += collisionVector.scaled(penetrationDepth);
  }
}

3. 改用分离轴定理实现更鲁棒的碰撞修正 #

对于俯视视角的矩形角色与矩形障碍物碰撞，使用**分离轴定理（SAT）**计算最小穿透向量，无论碰撞点是墙面还是角落，都能准确计算修正方向和深度：

• 分别计算角色与障碍物在X轴、Y轴上的重叠量
• 取重叠量较小的轴作为分离轴，沿该轴修正角色位置，避免双轴同时修正引发的冲突卡顿

示例逻辑：

if (other is Wall) {
  // 获取角色与墙的矩形边界
  final rect = toRect();
  final wallRect = other.toRect();
  
  // 计算X轴和Y轴的重叠量
  final overlapX = (rect.width / 2 + wallRect.width / 2) - (rect.center.dx - wallRect.center.dx).abs();
  final overlapY = (rect.height / 2 + wallRect.height / 2) - (rect.center.dy - wallRect.center.dy).abs();
  
  if (overlapX > 0 && overlapY > 0) {
    // 选择重叠量更小的轴进行分离
    if (overlapX < overlapY) {
      // 沿X轴修正位置
      final direction = rect.center.dx > wallRect.center.dx ? 1 : -1;
      position.x += overlapX * direction;
    } else {
      // 沿Y轴修正位置
      final direction = rect.center.dy > wallRect.center.dy ? 1 : -1;
      position.y += overlapY * direction;
    }
  }
}

4. 增加碰撞后的速度平滑处理 #

在位置修正后，对角色速度进行衰减或对应轴速度重置，避免碰撞瞬间速度突变导致的卡顿：

// 在位置修正后添加
if (overlapX < overlapY) {
  velocity.x = 0; // 重置X轴速度
} else {
  velocity.y = 0; // 重置Y轴速度
}
// 或衰减整体速度
velocity = velocity.clone()..multiply(Vector2(0.8, 0.8));

内容的提问来源于stack exchange，提问作者manolo