Tile bleeding

Phaser 3
1

Hello! The tile is rendering with semi-transparent pixels along its edges, and I’m not sure why. This results in a “tile bleeding” artifact when the camera moves. How can I fix this?

Screenshot_4
Screenshot_41374×948 114 KB

Background
Background896×256 12.3 KB

tile-bleeding

2

The problem was that the character wasn’t moving in whole pixel increments. Setting this.cameras.main.roundPixels = true; fixed the issue

3

It appears the problem persists, but its occurrence has significantly decreased. The issue remains relevant

4

Sometimes this needs extruding (padding) texture frames in WebGL. Phaser 4 will have a built-in solution for tilemap rendering.

5

I’ve updated Phaser from version 3.80.1 to 3.87.0, and it seems to have resolved the issue

6

But now there’s a new problem: the camera is noticeably jittering because of pixel rounding. So, I switched to version 4.0.0-beta.5, and those problems are gone there.

7 
this.load.image('tile', 'path/to/tile.png');

// After loading the texture, set the filter mode to nearest

this.textures.get('tile').setFilter(Phaser.Textures.FilterMode.NEAREST);