Flutter+Flame开发游戏时部分设备角色动画异常问题求助

问题核心原因 #

• 代码中精灵帧参数和实际精灵图参数不匹配，且使用了无效的负纹理坐标，不同GPU对非法采样的处理逻辑存在差异，直接导致不同设备表现不一致：
  1. 实际单帧尺寸为256144，但代码中textureSize统一用了Vector2.all(256)（即256256），采样时会误读取相邻帧的像素，造成多帧重叠的视觉效果
  2. 所有动画的texturePositionY值设为-90，Flame纹理采样原点为左上角、Y轴向下，负坐标属于纹理外的无效区域，部分GPU会触发循环采样逻辑，进一步加重帧重叠、动画错乱问题
  3. Idle动画的X坐标计算（29*256=7424）逻辑正确，仅Y坐标需要修正

修复代码 #

1. 修正viking.dart中的动画定义 #

enum VikingAnimationStates {
  Idle,
  Run,
  Kick,
  Hit,
  Sprint,
}

class Viking extends SpriteAnimationGroupComponent<VikingAnimationStates>
    with Hitbox, Collidable, HasGameRef<VikingRun> {
  
  static final _animationMap = {
    VikingAnimationStates.Idle: SpriteAnimationData.sequenced(
      amount: 19,
      stepTime: 0.1,
      // 修正为实际单帧尺寸
      textureSize: Vector2(256, 144),
      // 修正Y坐标为0，X坐标保持原有正确值
      texturePosition: Vector2(7424, 0),
    ),
    VikingAnimationStates.Run: SpriteAnimationData.sequenced(
      amount: 29,
      // 可调整为0.0333，对应30fps的动画更流畅
      stepTime: 0.0333,
      textureSize: Vector2(256, 144), 
      texturePosition: Vector2(0, 0), 
    ),
    VikingAnimationStates.Kick: SpriteAnimationData.sequenced(
      amount: 4,
      stepTime: 0.1,
      textureSize: Vector2(256, 144),
      texturePosition: Vector2(0, 0), 
    ),
    VikingAnimationStates.Hit: SpriteAnimationData.sequenced(
      amount: 3,
      stepTime: 0.1,
      textureSize: Vector2(256, 144),
      texturePosition: Vector2(0, 0),
    ),
    VikingAnimationStates.Sprint: SpriteAnimationData.sequenced(
      amount: 7,
      stepTime: 0.1,
      textureSize: Vector2(256, 144),
      texturePosition: Vector2(0, 0),
    ),
  };

  Viking(Image image, this.playerData)
      : super.fromFrameData(image, _animationMap);
}

2. 实例化代码无需修改 #

原viking_run.dart中的实例化逻辑没有问题，保持原有代码即可：

_viking = Viking(images.fromCache('spritesheet viking 48 frames 256x144.png'),
    playerData);

补充说明 #

如果修复后部分动作帧不对，只需对应调整该动作的texturePositionX轴坐标即可，所有动作的Y轴坐标保持为0即可适配所有设备。

内容的提问来源于stack exchange，提问作者Joao Pedro Fonseca