Search code examples
flutterdartflame

How to deal with the "anti-aliasing bug" in flutter [3.3.1] using flame [1.7.3]?

I am making a replica of FF3 for learning purposes. The tiles are 15x15, therefore the map looks very small on practically any device. I thought one simple solution would be to set the zoom value of camera as : camera.zoom = scaleFactorOnMap.length;, where scaleFactor is a vector2 with some logic. However, I am experiencing white horizontal and vertical lines when moving. It is worse on an emulator, bad on windows/chrome, slightly better on my real mobile phone.

I have read around that it could be due to this "anti-aliasing bug", which is known since 2018 and appears not to be going anywhere. Since there are possibly many ways to handle my use case, what would be the best workaround here? Is there another (better) way to make the map, collisions, character bigger without the zoom property? Or is it something wrong with the spritesheets, in that case what defines good sprites? Screenshot on windows of the bug in game

I have tried a few alternatives:

  1. Use camera.viewport = FixedViewport(..) disables my joystick, and I didn't test the movement
  2. Use the vector2 I made up as a scale property of everything, but gives the same result
  3. I noticed that if I assign an integer like 4.0 to zoom it's slightly better (probably related to that appoximation error in graphics)
  4. I have read of the cameraComponent which is experimental but I couldn't figure out how to use it.
Solution

  • This bug is going away with Impeller, but since that isn't out on all platforms yet one has to resort to workarounds.

    There is a FixedIntegerResolutionViewport which removes the need for rounding the pixels, which is what is causing this in Flutter.

    https://github.com/flame-engine/flame/blob/main/packages/flame/lib/src/experimental/fixed_integer_resolution_viewport.dart

    This is the issue where it has been discussed: https://github.com/flame-engine/flame/issues/1152