Starting Out with Isometric Tilemaps in Godot: A Quick Guide

Isometric games started in the late 1970s and early 1980s. Since then, they’ve been used in different types of games like strategy, simulation, role-playing, and puzzles. Nowadays, Isometric games are still being developed both by indie developers and AAA studios. Isometric games offer a unique visual style and gameplay possibilities.

In this article, I will give a brief introduction to isometric projection and isometric games, and then we will delve into how you can use Godot’s Tilemap node to create stunning isometric games. Let’s roll!

What Is Isometric Projection?

An isometric projection is a method for projecting a 3D world onto a 2D space, like a piece of paper or a computer monitor. It belongs to a category of camera projections known as Orthographic projections. In an isometric projection, objects may lose some depth and might seem flat compared to the 3D world you see naturally. This is because isometric objects lack vanishing points; instead, each axis of an object is parallel to the world axis.

In an isometric environment, objects seem the same size, regardless of their distance from the viewer or camera. In contrast, a Perspective projection makes distant objects appear smaller, while closer objects appear larger.

For a more detailed explanation of Isometric projections, check out the Best Examples of Isometric Games and How They Work article.

Examples of Games With Isometric Projection

There are many examples of isometric games from various genres like strategy, city builders, and RPGs. Some well-known classic isometric games include Red Alert 2, WarCraft 2, StarCraft 1, the Age of Empires series, the SimCity series, the Tropico series, Baldur’s Gate 1, Baldur’s Gate 2, and many others.

If you revisit any of these games (or watch gameplay videos), you’ll notice that the camera always maintains the same angle, and objects, whether close or far, appear to be the same size.

Other Types of Camera Projections Used in Video Games

There are various projection types that video game developers have used throughout the years. All these projections offer different ways to project a 3D world onto a 2D screen. Here are some of the most popular ones:

• Perspective projection: This camera projection imitates the human eyes’ vision, providing a 3D view commonly used in first-person shooters, third-person shooters, role-playing games, adventure games, and sports and racing games.
• Top-down projection: Also known as Bird’s-eye view, this projection places the camera directly above the world and points it down. Classic games like the original GTA use this technique.
• Dimetric / Trimetric Projection: The orthographic projections group includes several types of projections distinguished by the camera angle. The camera angle defines the ratio between the width and the height of the objects.

---

---

How to Develop Isometric Games in Godot

Godot provides an excellent framework for developing isometric games. The Tilemap node in Godot allows you to cut a sprite sheet into sprite images and project them onto the screen using your chosen camera projection. When dealing with the isometric projection of the Tilemap node, there are multiple options available. In this article, the focus will be on the most common isometric projection type.

Configuring the Isometric Camera Projection in the Tilemap Node in Godot

Apart from specifying the camera projection of the Tilemap, you need to adjust several parameters to ensure the correct drawing and behavior of the tiles. The first step is to enable Y-Sorting, and the second step is to define the tile size of the TileSet, as well as the tile size of the TileMap node.

What Is Y-Sorting and How to Sort Tiles Correctly

Y-sorting is the process of arranging the drawing order of the objects visible on the screen. In the case of an isometric Tilemap, each tile is drawn in its assigned order. Incorrect Y-sorting may lead to visual issues. Typically, lower tiles are drawn before the upper tiles on the Tilemap. Drawing in this order creates the illusion of a 3D camera while actually operating in 2D space.

As soon as you create a Tilemap node in Godot and configure it to have an Isometric projection, you receive a warning next to the Tilemap node, indicating that the Tilemap node and all internal layers should have Y-sorting enabled. Ignoring this warning will likely result in incorrect sorting of the drawing order of the tiles and lead to visual inconsistencies.

Difference Between Tile Size in Tileset and Tile Size in Tilemap

Godot distinguishes between the tile size defined in the Tileset and the tile size defined by the Tilemap. Understanding the differences is crucial, as it can save you a lot of headaches as your Tilemap evolves.

Advanced Features of the Tilemap Node in Godot

In most cases, you will need to utilize more advanced features of Tilemaps, such as multi-tile objects or using layers to stack tiles on top of each other. These features enable you to generate variety and complexity in the tilemaps within your games. Let’s explore each of these features.

Creating Multi-Tile Objects and Aligning Them to the Isometric Grid

Multi-tile objects are combinations of several tiles, as defined in the Tileset. For instance, the tile size in a Tileset might be set as a 64×32 rectangle, but a tall object spanning over 3 tiles may require a 64×96 tile. Godot enables you to group tiles and create complex objects.

How to Define Multi-Tile Objects in a Tileset in Godot

Defining multi-tile objects in Godot is relatively easy. Open the TileSet editor tab and follow these steps:

1. Click the ‘Setup’ button to enable atlas setup mode.
2. Press and hold the Shift button on your keyboard.
3. In the tiles area, press and hold the left mouse button and drag the selection across all tiles you want to combine.
4. Release the mouse button and keyboard key to create the complex object.

Once the object is created, you will see a larger tile containing all the selected tiles. You can now place that large tile on the map through the TileMap editor tab.

Using the ‘Texture Origin’ Property to Align Multi-Tile Objects to the Isometric Grid

If you followed the steps to create a multi-tile object as I described in the previous section and tried to place it on the map, you probably noticed that the tile is not positioned exactly where your mouse cursor is found. That’s because the origin of the complex tile image is still in its center. If this works for you – great! If not – you will probably need to change the origin point of the object. For me, the most intuitive location for the origin is at the bottom left corner of the tile.

To change the origin point of the tile, open the TileSet editor tab and follow the steps below:

1. Click the ‘Select’ button to enable tile selection mode.
2. Select the large tiles you want to modify.
3. In the ‘Base Tile’ menu that appears on the left, open the ‘Rendering’ section.
4. Change the ‘Texture Origin’ vector to offset the actual tile origin point.

When you change the origin value, you will notice a diamond shape on the tile itself, marking the new position of the origin point. Note that if the position is beyond the scope of the tile, a text will appear with the newly entered offset.

Using Tilemap Layers to Stack Tiles on Top of Each Other

How to Use Tilemap Layers to Stack Multiple Tiles on Top of Each Other

To create multiple Tilemap layers, open the Inspector panel of the Tilemap node and follow these steps:

1. Click on the ‘Add Element’ button in the Tilemap layers list (Inspector -> Tilemap -> Layers).
2. Give the new layer an appropriate name and enable the “Y Sort Enabled” checkbox.
3. Update the “Z Index” field to represent the new layer. Lower values are rendered at the back, while higher values rendered in the front (closer to the camera).
4. Go to the TileMap editor tab and select the current target layer (top right corner of the tab).
5. Select a tile and start placing it on the map.

You will notice that when you switch layers, all other layers except the selected one will be lightly dimmed so you can see the current layer clearly. If you would like to learn more about Tilemap layers, check out the Godot 4 Tilemap Layers: Everything You Need to Know article.

Rearranging Tilemap Layers for Correct Tile Drawing

The order of the layers in the Tilemap layer list does not determine the drawing order; instead, the “Z Index” field does. While the order of layers in the list does change the drawing order of tiles when all layers have the same Z index, tiles from different layers may still mix and create visual issues. The most effective way to determine the drawing order of layers in your tilemap is by defining the Z index for each layer. Layers are drawn from a low Z index to a high Z index.

---

---

My Take on Isometric Tilemaps in Godot

Godot provides a substantial amount of functionality for Isometric games. The user interface may not always be intuitive, but once you understand the concept, things get relatively smooth. For a more in-depth understanding of the TileMap node and its functions, you can continue reading the official Godot TileMap documentation at https://docs.godotengine.org/en/stable/tutorials/2d/using_tilemaps.html.

If you’re interested in learning more about Godot and game development, explore the Night Quest Games Blog. You’ll find plenty of articles that can help you on your game development journey. Best of luck!