Solved: Lines in sprites flicker when moving

Question

Asked by Mike O on January 13, 2022 (source).

We are creating a game in flutter flame and we notice some strage jitter whenever we move our camera. We have a position component that moves by changing the position and the camera follows

We have very simple movement for now where dt is delta time inside the Player component that extends PositionComponent

  void update(double dt) {
    if (position.distanceTo(moveTarget) > 0.1) {
      final moveDirection = moveTarget - position;
      moveDirection.normalize();
      position += moveDirection * dt * speed.toDouble();
    }
    super.update(dt);
  }

and this is the camera

 camera.followComponent(player);

But our sprite has alot of jitter. The lines of the sprite flicker. We will be using pixel art but this is just an example sprite to illustrate

enter image description here

What causes this?

Movement on 1 axis seem to work better but still

enter image description here

We are running this on flutter web with flutter version 2.8.1

Answer

Question answered by spydon (source).

This is probably caused by Flutter's anti aliasing bug.

If you use a sprite without lines like that in the middle you shouldn't notice it, as can be seen on the component that is solid teal in your example.

DART FLAME FLUTTER
SHARE: