Phaser: Spacing between tilemap tiles on camera movement

[16patsle]

This Issue is about

• A bug in the API (v3.2.0)

As spotted by PF_Cactus on Discord, there seems to be a rendering bug which causes the tiles in the tilemap to sometimes have single-pixel spacing between them when the camera moves.

The issue seems to be limited to WebGL, and seems to affect both dynamic and static tilemap layers, but possibly not in every case. Does not seem to be a browser issue, as the same happens in Chrome, Firefox, and Safari.

Based on the examples where the issue is reproducible, it is possibly related to how camera smoothing positions the tiles.

The issue is confirmed to exist in at least the following examples:
(Dynamic tilemap layer)
https://labs.phaser.io/view.html?src=src/game%20objects/tilemap/dynamic/dungeon%20generator.js&v=dev
(Dynamic tilemap, but still issues when changing to static)
https://labs.phaser.io/view.html?src=src/game%20objects/tilemap/static/switching%20tilesets.js

[lizgw]

It also appears in this one (static layer):
http://labs.phaser.io/view.html?src=src\game%20objects\tilemap\collision\csv%20map%20arcade%20physics.js

[Krisblast]

I had the same problem.
this.camera.roundPixels = true;
Setting this on my camera fixed my issue, might help you as well.

[16patsle]

That seems to work pretty good. The examples still needs to be fixed though

[photonstorm]

roundPixels can help in _some_ cases, but not all. For example, if you were to zoom the camera by a non-integer value you'd also see this happen.

You'd think this would be supported by tools like Tiled but it only partially is. Tiled supports margin and spacing between tiles, which the Tiled docs state is the area in which tiles can bleed to avoid display issues like this. But to create that bleed effect is on your own back :(

This is quite a common problem, so there are various little utils out there. A cursory search found things like the Allegro extruder: https://www.allegro.cc/forums/thread/616156 or this Java based tool: https://forum.starling-framework.org/topic/tool-for-extruding-tile-edges-for-tilesets-no-more-bleeding and several others.

It's frustrating because it adds another step into your workflow. Plus I can't guarantee those utils will do what you need (I didn't test them, just searched for them) - it is, however, how you resolve it.

Perhaps we ought to create a cli / web based tile extruder for this purpose.

[indextwo]

Just want to add that I can confirm extruding is a definitive fix for this. I'm brand-new to Phaser 3 (after a year away from Phaser 2, so relearning _everything_), but this.camera.roundPixels = true didn't solve it for me - I was still getting a gap between some of my tiles.

I'm using a tile atlas, and I built my own tile atlas generator in Flash(!) which creates 1px extrusion bitmaps on the fly of the 4 faces for each tile. I could look at making it into an executable if there's any interest, but at the moment it's super-specific to my requirements (I create all my gfx in Flash because it's the tool I know best, so all my tiles are MovieClips); and I don't know if it would be any better than what's already out there.

[photonstorm]

This issue has been mentioned on Phaser. There might be relevant details there:

https://phaser.discourse.group/t/bleeding-tileset/6425/1

[n-is-one]

this.camera.roundPixels = true did not solve the problem for me, instead it added new problems.

I solved the issue the same way @indextwo did, but there is a nice existing tool for it: https://github.com/sporadic-labs/tile-extruder . Use it to create an extra layer of pixels around your tiles, and then import the tilesheet with margin=1 and spacing=2.