When adding a tilemap in Phaser 3 there is noticeable bleed (or gap) between tiles. This is sometimes described as a "flicker" or "flickering" of tiles.
This is often more prominent when panning.
const map = this.make.tilemap({ key: 'some-map' })
const tiles = map.addTilesetImage('some-tileset', 'some-key')
const baseLayer = map.createStaticLayer('base', tiles, x, y)
How do I stop this from occurring?
The solution is to extrude the tiles in your tileset by 1px (or more) pixels. Currently, the recommended tool by the Phaser community is: https://github.com/sporadic-labs/tile-extruder
You can either perform the extrusion on your "source" image as a once off or on your distributed images as part of your build step.
If you choose to extrude your source images, you will need to make the appropriate adjustments in Tiled. You will also need to make sure you maintain the gap while editing the image.
This is (subjectively) simpler as it allows you to keep Tiled and your images "as is" while working on them, without needing to make any changes in Tiled.
During your build step, introduce a command (for example npm run process-assets) that will extrude the tileset images and copy them to your build folder.
# package.json
{
"scripts": {
"process-assets": "tile-extruder --tileWidth 32 --tileHeight 32 --margin 1 --spacing 2 --input ./src/tilesets/tileset.png --output ./dist/tilesets/tileset.png"
}
}
Just make sure to update your tilemap creation:
const tiles = map.addTilesetImage('some-tileset', 'some-key', 32, 32, 1, 2)
Note Tile extrusion is only needed when using WebGL (and not canvas)
