Flutter Flame游戏：子弹位置异常及随角色移动问题排查

问题描述 #

给游戏角色添加可发射子弹后，出现两个异常：

• 明明设置子弹起始位置与角色一致，却渲染在关卡下方的左下角/右下角；
• 角色移动时，子弹位置会跟着一起变动（子弹水平移动速度符合预期，已刻意调低）。

问题代码 #

Bullet类实现 #

import 'dart:async';
import 'dart:io';

import 'package:flame/collisions.dart';
import 'package:flame/components.dart';
import 'package:marvington_game/game.dart';

class Bullet extends SpriteAnimationComponent with HasGameRef<Gain>, CollisionCallbacks {
  double xdir;
  Bullet({super.position, super.size, required this.xdir});
  final double _speed = 20;
  final Vector2 velocity = Vector2.zero();

  FutureOr<void> onLoad() {
    debugMode = true;

    animation = _createSpriteAnimation();
    add(CircleHitbox(position: position, collisionType: CollisionType.active));
    return super.onLoad();
  }

  void update(double dt) {
    velocity.x = xdir * _speed;
    position.x += velocity.x * dt;
    super.update(dt);
  }

  void onCollision(Set<Vector2> intersectionPoints, PositionComponent other) {
    removeFromParent();
    super.onCollision(intersectionPoints, other);
  }

  SpriteAnimation _createSpriteAnimation() {
    return SpriteAnimation.fromFrameData(
      game.images.fromCache("Marvington/Marv Bullet.png"),
      SpriteAnimationData.sequenced(
        amount: 1,
        stepTime: 0.11,
        textureSize: Vector2.all(16),
      ),
    );
  }
}

玩家发射子弹的函数 #

void _shoot() {
  Vector2 pos = Vector2(position.x, position.y);
  Bullet b = Bullet(xdir: scale.x, position: pos);
  add(b);
}

问题原因 #

1. 子弹被作为玩家的子组件添加：子组件的position是相对于父组件（玩家）的局部坐标，而非全局世界坐标。你传入的角色position被当成了局部坐标，导致子弹出现偏移；同时父组件（玩家）移动时，子组件（子弹）会被带着一起移动。
2. CircleHitbox位置设置错误：你把Bullet的全局position作为Hitbox的局部位置，这会导致Hitbox偏移到奇怪的地方。

修复方案 #

1. 将子弹添加到游戏世界而非玩家子组件 #

修改玩家的_shoot函数，把子弹添加到游戏全局，同时传入角色的世界坐标：

void _shoot() {
  // 获取角色的世界坐标（如果角色有父组件，必须用absolutePosition）
  Vector2 worldPos = absolutePosition;
  // 可根据角色枪口位置调整偏移，比如从角色右侧/左侧发射
  Vector2 spawnPos = Vector2(worldPos.x + (scale.x * 16), worldPos.y + 8);
  // 明确指定子弹尺寸（如果默认有设置可省略）
  Bullet b = Bullet(xdir: scale.x, position: spawnPos, size: Vector2.all(16));
  // 添加到游戏世界，而非玩家的子组件
  gameRef.add(b);
}

2. 修正CircleHitbox的位置 #

在Bullet的onLoad方法中，将Hitbox的位置改为相对于Bullet自身的局部坐标（比如居中）：

FutureOr<void> onLoad() {
  debugMode = true;
  animation = _createSpriteAnimation();
  // 设置Hitbox相对于Bullet自身的位置，这里设为居中
  add(CircleHitbox(
    position: Vector2(size.x / 2, size.y / 2),
    collisionType: CollisionType.active,
  ));
  return super.onLoad();
}

如果Hitbox不需要偏移，直接省略position参数即可：

add(CircleHitbox(collisionType: CollisionType.active));

3. 可选优化：简化子弹移动逻辑 #

Bullet的update方法可以简化为：

void update(double dt) {
  velocity.x = xdir * _speed;
  position += velocity * dt;
  super.update(dt);
}

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