Search code examples
flutterflame

Vertical lines between tiles when camera is moving

I'm trying to build a simple side-scroller game with a level built of square tiles using Flame.

@override
Future<void> onLoad() async {
  final orange = Paint()..color = Color(0xFFFF9000);
  final double tileSize = 64;
  for (var i = 0; i <= 100; i++) {
    add(RectangleComponent(position: Vector2(i * tileSize, 100), size: Vector2.all(tileSize), paint: orange));
  }
}

No camera movement

When the screen is static, everything works as expected. However, when I add camera movement, I see vertical lines between the tiles.

@override
void update(double dt) {
  camera.moveTo((Vector2(camera.position.x + 1, 0)));
  super.update(dt);
}

Camera is moving

I suspect it might be something to do with Flutter antialiasing bug. Does anybody know if there's a workaround? Thanks!

Solution

  • This is indeed that bug, we have it documented on a few of our issues too (like this one for example https://github.com/flame-engine/flame/issues/1888) You can try to use Impeller if that is an option for you, where this bug shouldn't be present.

    Other workarounds would be to draw the same color underneath the tiles where they are overlapping, that is of course not always possible though. And the other option is to use a camera that only moves in full pixels, so that there are no rounding errors.