Flutter Flame精灵表逐帧播放异常问题求助

我使用Flutter Flame实现精灵表逐帧播放时遇到异常：动画无法连贯运行，出现向右偏移的情况。该精灵表为跳舞角色的帧序列，正常播放应呈现流畅的跳舞动画效果，目前无法定位问题出在精灵表本身还是代码中，附上相关内容寻求解决方案：

代码实现 #

class _GameScreenState extends State<GameScreen> {
  @override
  void initState() {
    SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft]);
    super.initState();
  }
  late double width, height;
  @override
  Widget build(BuildContext context) {
    width = MediaQuery.of(context).size.width;
    height = MediaQuery.of(context).size.height;
    Size screenSize = MediaQuery.of(context).size;
    double aspectRatio = screenSize.height / screenSize.width;
    return Scaffold(
      backgroundColor: Colors.amber,
      body: AspectRatio(
        aspectRatio: aspectRatio,
        child: GameWidget(
          game: Game(context),
        ),
      ),
    );
  }
}

class Game extends FlameGame {
  BuildContext context;

  Game(this.context);

  SpriteAnimationComponent animationComponent1 =
  SpriteAnimationComponent(size: Vector2(840, 440));


  @override
  Color backgroundColor() => const Color(0xFFFFC107);

  @override
  Future<void>? onLoad() async {
    super.onLoad();
    await loadAnimations();
    add(animationComponent1);

    animationComponent1.position = Vector2(1, 1);

  }

  Future<void> loadAnimations() async {
    SpriteSheet spriteSheet =
    SpriteSheet(image: await images.load('spritesheet.png'),  srcSize: Vector2(1226, 1226));
    SpriteAnimation spriteAnimation =
    spriteSheet.createAnimation(row: 0, stepTime: 0.7, from: 5, to: 24);

    animationComponent1.animation = spriteAnimation;
  }
}

相关素材 #

• 精灵表：跳舞角色的帧序列图
• 异常UI截图：
  
• 问题演示视频：展示动画向右偏移的异常播放状态

问题分析与解决方案 #

1. 修正精灵表单帧尺寸匹配 #

你设置的srcSize: Vector2(1226, 1226)可能与精灵表实际单帧尺寸不符。如果单帧真实宽度不是1226，createAnimation取帧时会出现偏移，导致动画错位。

• 用图片编辑软件查看精灵表单帧的真实宽高，修改srcSize为对应数值。

2. 统一组件与帧的宽高比 #

SpriteAnimationComponent设置的Vector2(840, 440)与单帧1226x1226的宽高比不一致，会导致拉伸偏移；同时默认左上角锚点可能加剧视觉错位。

• 保持组件尺寸与单帧宽高比一致，比如设为Vector2(440, 440)（等比例缩小）；
• 设置锚点为中心并居中组件，优化显示位置：

  animationComponent1.anchor = Anchor.center;
  animationComponent1.position = Vector2(size.x / 2, size.y / 2);
  

3. 验证动画帧范围合法性 #

确认精灵表第0行实际帧数是否覆盖from:5, to:24的范围，若帧索引超出实际数量，会引发异常播放。

• 调整from和to的数值到精灵表实际存在的帧索引区间内。

4. 规范初始化顺序 #

确保动画组件加载完成后再设置位置属性，避免初始化时序问题。可以将位置设置逻辑放在loadAnimations执行完成后。

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