How to Fix Tilemap Gaps and Jittering Problems in Godot 4

The Tilemap node in Godot is an excellent tool for quickly creating 2D games based on a set of tiles. Although you can control and configure the tileset in many ways, there are sometimes issues with the tile rendering. These issues are not necessarily related to the tileset itself but rather to the rendering or image import preferences configured in the engine.

The visual problems can sometimes be seen as gaps between the tiles on the tilemap or as artifacts appearing on a tile. These issues can appear when the image is static but commonly occur when the camera moves around the tilemap and the positions of the tiles on the screen change.

In this article, I will explain the most common causes of these visual problems and provide solutions to solve them or, at least, mitigate them so they are not too obvious.

1. Tiles in the Tileset Are Misaligned

Problem: The difference in location and size of the tiles between the sprite sheet and the definition in Godot may cause misalignment in the tileset division, creating visible gaps or artifacts on some of the tiles.

Solution: Ensure that the tile alignments in the image are pixel-perfect.

One approach is to modify the image using an external art tool/image editor and adjust the tiles so that Godot divides the tileset correctly. The other approach is to leave the image as it is and correct the selected pixels for each tile inside the tileset editor in Godot.

As a rule of thumb, if you created the tileset image, it’s much better to correct the image itself. If the image was not created by you and it’s difficult to modify, go with the second approach.

2. The ‘Fix Alpha Border’ Option Is Enabled

1. Select the image containing the sprite sheet used in the tileset from the FileSystem panel.
2. Open the ‘Import’ tab (usually found in the Scene panel above the FileSystem).
3. In the ‘Process’ section, uncheck the “Fix Alpha Border” option.
4. Click the ‘Reimport’ button at the bottom of the panel to import the image again with the new settings.

---

---

3. Tilemap Texture Filter Is Not Set to ‘Nearest’

When the GPU renders a texture, like your tileset image, it maps the texture pixels to their positions on the screen. During the texture sampling process, it attempts to enhance the quality of the rendered texture by applying a filter. There are several filter options available, such as Linear, Nearest, and Mipmaps.

The ‘Nearest’ filter doesn’t alter the pixel colors; it directly maps each texture pixel onto the screen. In contrast, other filters might distort tiles by blending colors from one tile with its neighboring tile.

Problem: The texture filtering method in the Tilemap node in Godot isn’t set to ‘Nearest’, causing some tileset pixels to be altered (averaged with nearby pixels) when displayed on the screen.

Solution: Set the texture filter of the Tilemap node to ‘Nearest’. This ensures that each tile in the Tilemap is rendered precisely as it appears in the original texture image, without applying any filters. This might result in a more pixelated appearance for the tileset image but guarantees pixel-perfect sampling.

4. The ‘Snap 2D Transforms to Pixel’ Option Is Disabled

1. Open the “Project Settings” window from the top menu in Godot.
2. In the ‘General’ tab, enable the advanced settings located in the top right corner of the tab.
3. Enable the “Snap 2D Transforms to Pixel” option (Rendering -> 2D -> Snap 2D Transforms to Pixel).

Learning Godot and Game Development

I hope this article helped you overcome your tileset issues. Thanks to Genewheel for providing the tileset used in this article: https://genewheel.itch.io/16×16-dungeon-tileset.

Sources of Information for This Article

• Godot Forums: https://ask.godotengine.org/118096/tilemaps-sprite-have-tiny-gap-sometimes
• Texture Filtering: https://docs.derivative.ca/Texture_Filtering
• Godot Project Settings Documentation: https://docs.godotengine.org/en/stable/classes/class_projectsettings.html
• Godot Import Settings Documentation: https://docs.godotengine.org/en/stable/tutorials/assets_pipeline/importing_images.html

The Night Quest Games Blog

For more information and guides about Godot and game development in general, visit the Night Quest Games Blog. See you there!