Subpixel problem - incorrect rendering

Phaser 3
1

Hello,
I have two problems with rendering.

The first of them is a gap between some tiles. Whenever I drag the camera I see black, empty lines between tiles. I believe it has something with the camera. I tried to use Math.RoundTo(I thought it was a subpixel problem) but it didn’t work. What is more, it destroyed the smoothness.

The second one is a problem with the size of GameObjects. If you draw lines and zoom in/out you will see that the size of these elements is cut.

What is the correct way of solving such an issues?

incorrect_rendering_black_line
incorrect_rendering_black_line687×657 4.69 KB

incorrect-rendering-close
incorrect-rendering-close522×531 2.12 KB

incorrect-rendering
incorrect-rendering563×525 2.47 KB

2

You can try roundPixels: false in the game config. If that doesn’t work you probably need to extrude the tileset.

Explain?

1 Like
3

It seems you need this: Tile Extruder

1 Like
4

Thank you for the help,
roundPixels and extruder helped me a lot.

After debugging I see that the camera.scrollX/scrollY is also a problem - it generates ± 12 fraction digits and it may cause a subpixel problem. My code is:

            this.camera.scrollX -= ((pointer.x - pointer.prevPosition.x) / this.camera.zoom); 
            this.camera.scrollY -= ((pointer.y - pointer.prevPosition.y) / this.camera.zoom);

I have to figure out how to move the camera smoothly, but without these bleeding effects, so my problem will be resolved.

To summarize, an extruder, roundPIxels, and correct camera code(unlike this one above) is the way to go. Thank you for the help