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:

  1. 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:

Software Engineer @ Compass. nathanielmorihara.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store