Lines between tiles on Flame Flutter on Android

Question

There seems to be flickering white lines between the tiles in a game I am trying to make. The flickering lines only appear when I am moving as in the camera is moving. I am using:

Flutter: 3.16.5

flame: ^1.13.1 flame_forge2d: ^0.16.0+3 flame_audio: ^2.1.6 flame_tiled: ^1.18.2

I have used pretty much the same code in a previous project and didnt face this problem in the android build. This time, however with everything on the latest version, I face this issue in the android build. I understand that this is pretty common in the web build and I have faced this in web before but its a first for me to face this in android. Any help would be appreciated!

flicker of white line after first platform block

flicker of white lines on tallest of stairs

class MapLevel extends Component with HasGameRef<MainGame> {
  MapLevel({required this.level}) : super();

  int level;

  late Vector2 mapSize;
  

  @override
  FutureOr<void> onLoad() async {
    TiledComponent map = await TiledComponent.load(
        'map$level.tmx', Vector2.all(32) / 10,
        priority: 20);
    add(map);
    mapSize = map.scaledSize;

    final spawnLayer = map.tileMap.getLayer<ObjectGroup>('spawn');

    final platformLayer = map.tileMap.getLayer<ObjectGroup>('platforms');

    for (final platform in platformLayer!.objects) {
      game.world.add(Platform(
        position: Vector2(platform.x / 10, platform.y / 10),
        size: Vector2(platform.width / 10, platform.height / 10),
      ));
    }

    for (final spawn in spawnLayer!.objects) {
      if (spawn.class_ == 'player') {
        var player = Player(
            spawnPosition: Vector2(spawn.x / 10, spawn.y / 10),
            size: Vector2(spawn.width / 10, spawn.height / 10) * 0.8);
        await game.world.add(player);
        game.player=player;
        game.camera.follow(player);
      }
    }

    game.camera.viewfinder.zoom = (game.canvasSize.x / mapSize.y);

    // game.player?.cameraFollow();
    return super.onLoad();
  }


  

}

Answer 1

This is a common problem in game development, not only within Flutter and Flame, it's called ghost lines and comes from the floating-point number imprecision in computers. You can read more about it in this issue and you can find a work around here.

What you have to do in the workaround is to create an empty spacing between the tiles, since the rounding errors usually will get the pixel right next to it, if we add spacing to the tiles, even if a rounding error happens, the texture sampling will pick a transparent pixel.

You can use the tile patcher tool to do this.