Bug on some devices with animation using flutter and flame

Question

Basically, I have a problem in an app I'm creating from a game based on a tutorial I saw, however, my character's animation is buggy on some devices, and on others it's running normal, as follows the viking animations with animation correct in how it appears on some devices:

and Viking with wrong animation on some devices (more than one viking showing up almost always, with the animation well buggy):

The spritesheet I'm using has 256x144 pixels images for the viking, where the first 29 frames are him running and the rest he's jumping (idle) follow the lines of code that define the viking animation in Flutter:

part of the animations in the viking.dart file:

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.all(256),
      texturePosition: Vector2(7424, -90), //29*256
    ),
    VikingAnimationStates.Run: SpriteAnimationData.sequenced(
      amount: 29,
      stepTime: 0.034,
      textureSize: Vector2.all(256), 
      texturePosition: Vector2(0, -90), 
    ),
    VikingAnimationStates.Kick: SpriteAnimationData.sequenced(
      amount: 4,
      stepTime: 0.1,
      textureSize: Vector2.all(256),
      texturePosition: Vector2(0, -90), 
    ),
    VikingAnimationStates.Hit: SpriteAnimationData.sequenced(
      amount: 3,
      stepTime: 0.1,
      textureSize: Vector2.all(256),
      texturePosition: Vector2(0, -90),
    ),
    VikingAnimationStates.Sprint: SpriteAnimationData.sequenced(
      amount: 7,
      stepTime: 0.1,
      textureSize: Vector2.all(256),
      texturePosition: Vector2(0, -90),
    ),
  };



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

part where i create the viking in the game inside the viking_run.dart file:

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

And the versions of android on both devices are the same

Solution

You say that your sprites are 256x144 in the sprite sheet, but you use textureSize: Vector2.all(256). Try changing that to Vector2(256, 144) instead.

Also the texturePosition should never be anything negative, it defines a position in the sprite sheet. Since you only have one row of sprites in your sprite sheet you should always have y as 0 and then you can change x for where the sequence of each animation should start.

Comments

[spydon]

Something is weird with your texturePositions, why do you have -90 as y? And what is happening on the idle state, where you say that it has 19 frames, but from the texturePosition I assume that it starts in the bottom right corner and should only be one frame?

[Admin]

Well, the texture position by -90 is to the viking stay on the ground, if i don't put this he stay floating on the screen, the idle state basically is when he jumps, where is located in the same spritesheet of he running, where the firsts 29 frames are composed by he running, and the rest of the frames, until the 48th frame is composed by the "idle" state, that is like the jumping animation for the character, this 19 the amount of frames for this state

[spydon]

I don't really get what would happen if you set texturePosition to something negative, it should be a coordinate within the spritesheet. Try to remove it (Vector2(0, 0)) is default. And then try to set the position of the viking instead. You can join our discord if you want realtime help. discord.com/invite/pxrBmy4

[Admin]

Well,I entered your discord, I tried to change the texturePosition like you said to 0 in all the animations, but the issue stay happening on some devices, of the animation beeing bugged this problem is very strange, i am weeks trying to figure out but I can't understand really why this is happening

[spydon]

Write something in the Flame channel and I'll help you :)