Pixel Anti Aliasing

[dbroadhurst]

What happened?

When I arrange sprites in a grid and see background pixel appearing due to anti aliasing

I tried the following without any improvement

sprite.paint.isAntiAlias = false;
sprite.paint.filterQuality = FilterQuality.low;

What do you expect?

Expect to see no unexpected visual artifacts

How can we reproduce this?

Arrange sprites in a grid. I suspect this is a known issue but can't find a way to fix.

What steps should take to fix this?

No response

Do have an example of where the bug occurs?

No response

Relevant log output

No response

Execute in a terminal and put output into the code block below

Output of: flutter doctor -v

Affected platforms

All

Other information

No response

Are you interested in working on a PR for this?

• I want to work on this

[spydon]

It is this issue: flutter/flutter#14288
Are you sure it is happening on all platforms for you? Even Impeller backed ones?

Erick has wrote a bit about it here:
https://verygood.ventures/blog/solving-super-dashs-rendering-challenges-eliminating-ghost-lines-for-a-seamless-gaming-experience

[spydon]

There's also some discussion about it in here: #1152

[dbroadhurst]

I forced Impella on macOS, Android and iOS and the lines have gone but now getting unexpected double lines. I think Bilinear filtering is still on since I can see AA where the pink and orange meet.

Seems to have no effect on the rendering

sprite.paint.isAntiAlias = false;
sprite.paint.filterQuality = FilterQuality.none;

To give more context this image is made from 64x64 spritesheet images.

I think the double lines are coming from bilinear interpolation where the edges meet.

[dbroadhurst]

I got AA working. Turns out setting AA in the constructor works but setting the instance does not work. Impeller seems broken right now.

Works

class BuildingBlock extends SpriteComponent
    with HasGameRef<PlunderGame>, CollisionCallbacks {
  BuildingBlock({required Sprite sprite, required double x, required double y})
      : super(
          sprite: sprite,
          position: Vector2(x, y),
          size: Vector2(32, 32),
          paint: Paint()..isAntiAlias = false,
        );
}

Does not work

  var sprite = spriteSheet.getSpriteById(block);
        sprite.paint.isAntiAlias = false;
        sprite.paint.filterQuality = FilterQuality.none;
        _world.add(BuildingBlock(
          sprite: sprite,
          x: blockX,
          y: blockY,
        ));

[spydon]

Right, that is because the component is using its own paint object, not the one inside Sprite, so you could also set it with component.paint = ... for example.