Gap between tiles for layers using the same tileset

[PavelMishin]

Version

• Phaser Version: 3.16.2

• Tiled: 1.2.2

• Operating system: Windows 10

• Browser: Google Chrome 73.0.3683.86

Description

When two tilemap layers use the same tileset image, and they placed under each other, there appear gaps on the above layer when the camera moves.

Example Test Code

https://jsfiddle.net/Trobing/vwyebxcu/43/

In the example I have created 4 layers in Tiled, with 3x3 tile squares, the light square is under dark square: two layers that use the one common tileset (on the left), and two layers that use the separated tileset (on the right). To see the issue move to the right-bottom direction through the cursor keys.

Additional Information

I have extruded tilesets through TexturePacker on 2px. In Firefox and Opera it seems ok - the issue appears only on Chrome with enabled hardware acceleration, with WebGL renderer and enabled Phaser antialiasing. In JSFiddle it also requires to zoom out the camera, but in my game on the local server, there are gaps (but they smaller and rare in this case) even without zoom changing.

P.S.: Only on the screenshot, I have noticed that right square also have some artifacts on corners.

[photonstorm]

Do you have a clearer visual? I'm struggling to see anything really.

[PavelMishin]

@photonstorm , Well, it's strange but it's actual just if it's using Nvidia card, and it looks fine with integrated Intel card. So I suppose it's not a Phaser issue.

But recently I notice another issue with Firefox and canvas renderer - in this case, the gaps appear when it's using zoom on camera. https://jsfiddle.net/Trobing/vwyebxcu/48/ P.S: I have checked it with both GPU))

[mikewesthad]

I had someone report something similar in tile-extruder not that long ago. When I tested using extruded tiles, there were no gaps in Chrome under CANVAS or WEBGL, but gaps were present in FF and Edge in CANVAS. At least part of the issue here seems to be how the canvas drawImage is implemented in each browser. It appears that if you draw tiles at floating point positions / float point scales with canvas in FF/Edge, the anti-aliasing filter that gets applied to each tile causes the background to bleed through the tiles.

This happens with the raw canvas API in FF/Edge:

Here's a codesandbox with a demo and a possible fix that I created (from the tile-extruder ticket). It's showing the issues with the raw canvas API. If you draw your tiles to an offscreen buffer and then draw that to the screen, it eliminates the FF/Edge issue in my simple test. That approach might work in Phaser's canvas renderer.

[PavelMishin]

@mikewesthad Thank you! I'm just considering such workaround with converting tiles layer to texture.

[gfordinal]

See this alternative for a different approach:

Render Layer as Texture