Flutter Flame引擎中如何基于箭头角度正确发射CircleComponent？

问题核心原因 #

Flame引擎采用y轴向下的坐标系，与常规数学坐标系（y轴向上）相反，再加上箭头图片初始朝向、角度偏移计算的错误，导致发射方向与预期完全相反。

解决方案 #

根据箭头图片的初始朝向，调整角度计算逻辑和速度分量的符号：

情况1：箭头图片初始朝向为向上（箭头尖朝上） #

移除错误的角度偏移，同时修正y轴速度的符号以适配Flame坐标系：

void launchBubble(double speed, Arrow arrow) {
  isMoving = true;
  // 基于箭头当前角度计算水平方向速度
  double dx = math.cos(arrow.angle) * speed;
  // Flame坐标系y轴向下，向上运动时dy需取反sin结果
  double dy = -math.sin(arrow.angle) * speed;
  velocity = Vector2(dx, dy);
}

情况2：箭头图片初始朝向为向右（箭头尖朝右） #

先将箭头角度偏移至向上的基准方向，再计算速度：

void launchBubble(double speed, Arrow arrow) {
  isMoving = true;
  // 将初始朝右的角度转换为向上的基准角度
  double adjustedAngle = arrow.angle - math.pi / 2;
  double dx = math.cos(adjustedAngle) * speed;
  double dy = -math.sin(adjustedAngle) * speed;
  velocity = Vector2(dx, dy);
}

额外调整点 #

若箭头旋转方向不符合预期，可修改aimAt函数中的旋转速度符号：

void aimAt(double dt) {
  double rotationSpeed = -0.02; // 负号改为逆时针旋转
  angle += rotationSpeed * dt;
  angle %= 2 * math.pi;
}

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