How To: Fix Gaps Between Tiles in Godot
TL; DR: Turn off “Filtering” on your imported image for the Tileset.
The Problem:
Gaps are showing between tiles on your Godot TileMap, something like this:
The Solution:
There are a couple of potential problems that could be causing this behavior.
One potential problem is that “Filtering” is on for the imported image that is used for the TileSet.
To fix this:
- Turn off “Filtering”
2. Reimport the image
The TileMap should no longer show gaps between the tiles:
This should also help resolve some issues with blurriness of your image and make the pixels sharper.
Why
Godot 3.0+ manages the importing of resources into your project for you. This makes it as simple as dragging a file into the directory of your project to add an image.
Under the hood, Godot manages import information about your resource, such as resource type, compression modes, and image quality. It stores this import information as *.import files and keeps an imported version of your resource hidden under res://.import/ (see Godot documentation for more about importing).
One such import option is “Filtering”. Filtering employs linear interpolation in order to smooth textures and make them appear less “blocky” (read more about it here). This is great for games where the art should have smooth lines, but for games that use pixel art, you want those sharp edges.
The reason that filtering can result in gaps between tiles is because filtering attempts to blend pixels with neighboring tiles, which sometimes results in weird gaps that shouldn’t be there.
Other Problems/Solutions
“Filtering” isn’t the only thing that can cause unexpected gaps between tiles. Other problems/solutions include:
