Line by line rendering issue in flame_tiled map

[metehanyanik]

Hello, I would like to ask you a question about tiled map pixel rendering. In the game I developed with Flame, when I open the map I developed with Tiled Map, the background in the game causes line-by-line image distortion. But there is something interesting. When I open the game from the macbook screen, there is no problem with the pixels, but when I run the game from the 24" monitor, the screen becomes line by line as I said. I was going to share the screenshot files with you, but when I take a screenshot, I do not encounter any problems on both the monitor and the macbook screen. Only when viewed with the eye You can understand the image distortion.

Current bug behavior

This is how it looked when I switched to the new camera component.

Expected behavior

Steps to reproduce

I'm gonna create a very minimal reproducible example so that you can try it.

The code is the following :

class SDIGame extends FlameGame {
  late TiledComponent map;
  late final CameraComponent cameraComponent;
  final world = World();

  @override
  Future<void> onLoad() async {
    cameraComponent = CameraComponent(
      viewport: MaxViewport(),
      world: world,
    );
    cameraComponent.viewport.anchor = Anchor.center;
    cameraComponent.viewfinder.zoom = 1;

    addAll([cameraComponent, world]);

    map = await TiledComponent.load('sdi.tmx', Vector2.all(16));

    world.add(map);
  }
}

Flutter doctor output

Output of: flutter doctor -v
[✓] Flutter (Channel stable, 3.7.11, on macOS 13.3.1 22E772610a darwin-arm64, locale en-TR)
    • Flutter version 3.7.11 on channel stable at /Users/metehanyanik/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f72efea43c (9 weeks ago), 2023-04-11 11:57:21 -0700
    • Engine revision 1a65d409c7
    • Dart version 2.19.6
    • DevTools version 2.20.1

[!] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    • Android SDK at /Users/metehanyanik/Library/Android/sdk
    • Platform android-33, build-tools 33.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.

[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14C18
    • CocoaPods version 1.12.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.79.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.66.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 13.3.1 22E772610a darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 114.0.5735.133

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

More environment information

• Flame version: ^1.6.0

[spydon]

It's this issue: #1152
It doesn't always happen since it depends on the canvas size whether you get the rounding errors.
It isn't anything we can do about it unfortunately since it's a Flutter issue (goes away with Impeller though).
There are some work-arounds in the linked issue.

[ekingunoncu]

I have the very same issue couldn't fix it. I have looked and inspected the issue #1152 But still...

[spydon]

Closing this as a duplicate, here's also a link to Erick's article about the issue:
https://verygood.ventures/blog/solving-super-dashs-rendering-challenges-eliminating-ghost-lines-for-a-seamless-gaming-experience