Black lines rendering on certain camera and tileset settings

[MarcJamesIO]

Version

• Phaser Version: 3.85.2

• Operating system: MacOS Sonoma 4.5

• Browser:

Description

Black lines rendering over the screen when camera moves or at certain zooms, making it unusable.

Example Test Code

Live bug example: https://phaser-test-hazel.vercel.app/

Code: https://github.com/MarcJamesIO/phaser-test

Additional Information

tile extruder tool: https://github.com/sporadic-labs/tile-extruder

Tile extruder tool has been mentioned as a potential fix: The original tileset has no margin or spacing which should render properly. Of course the black lines appear. So following advice we try the tile extruder tool:

tile-extruder --tileWidth 128 --tileHeight 128 --input ./assets/grassland.png --output ./assets/new-extruded.png

Because the tiles are 128 x 128 and there's no margin or spacing. We then follow the tile extruder docs and load as shown:

const grasslandTileset = this.map.addTilesetImage(
"grassland",
"grassland",
128,
128,
2,
1
);

Makes no difference, lines still appear.

[photonstorm]

Additional information from testing:

Happens in Canvas, too.
Happens even right back to v3.55.2 - not a new bug
Happens with pixelArt on/off and RP on/off. Those don't cause it.
Happens with fixed size canvas with no scale mode.

Not yet tested with one of our own tilemaps. The problem isn't extrusion though.

[samme]

I've been testing the extruded dungeon tileset with camera zoom 0.714 and seen:

• The black lines don't appear with roundPixels: false.
• The black lines don't appear in Phaser v3.85.0 or v3.80.1.

https://phaser.io/sandbox/vp8vBLuJ

[MarcJamesIO]

It happens both in Phaser v3.85.0 or v3.80.1 just to a much lesser extent in v3.80.1

[photonstorm]

Samme meant the sandbox link above, using the fully extruded dungeon tileset, doesn't have the black lines under 3.80.1 - and it doesn't. That test also doesn't have camera zooming in it, though, so isn't an apples to apples comparison.

[azarzaza]

I faced the same issue on the current version of phaser v3.85.0, but after reverting back to v3.80.1, it works.

[photonstorm]

Adding this as reference: https://phaser.io/sandbox/pnvebnPT

[photonstorm]

Ok, this is now fixed in the main branch. It can handle Sprites and Tiles with float value camera zooms in both WebGL and Canvas. You should still extrude tilesets, but this will resolve most issues including tightly packed sprites (such as in the sandbox link above).