How do I stop my tiles from bleeding when using a tilemap in Phaser 3?

Question

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?

Answer 1

Solution

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

Workflow

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.

Option 1: Extrude the source image

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.

Option 2: Extrude the distributed 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)

Image from https://github.com/sporadic-labs/tile-extruder