Isometric tiles in the Godot TilSet editor

Isometric tiles for a pixel art game in Godot 4.3

In this article, I mention a few things to be aware of when creating isometric tiles for use in a Godot 4.3 pixel art game, based on my own observations.

Choosing an angle

This article on Clip Studio Tips introduced me to the 2x1 pixel rule:

Isometric View - Pixel Art Style (+ drawing Room and Store) "Pixel Art Isometric #1" by Cheishiru …

The 2x1 pixel rule refers to having your width be twice the height. If you’ve drawn diagonal lines in pixel art before, you’ve certainly dealt with these two suspects:

1x1 and 2x1 pixel diagonal lines

On the left is a 1x1 pixel diagonal line which follows a 45° angle. On the right is a 2x1 pixel diagonal line, which follows an angle closer to 26.57°. The latter is more convenient for drawing pixel art than the former “traditional” angle of 30° for isometric games.

Choosing a tile size

Following the 2x1 rule leads to tile sizes like 16x8, 32x16 and 64x32. In my case, I’ve gone with 16x32 in the following style (note the 4-pixel top and bottom boundaries):

A 16x32 pixel tile with a 4-pixel top and bottom

These tiles fit together as follows:

Four tiles of 16x32 pixels in the same style

Isometric tile maps in Godot

In Godot 4.3, isometric tiles are placed using a TileMapLayer node just like any other type of tile. Just change the Tile Shape to “Isometric” and set your Tile Size. As you can see below, I have it set to match my 32x16 pixel tile size.

TileMapLayer with configured for isometric tiles

The tiles can be indexed in the TileSet editor the same way as “square” (or rectangular) tiles.

Isometric tile atlas in the TileSet editor

Ordering

As I was drawing tiles in Krita, I started wondering about something. You may have noticed that some edges of my chosen tile shape are shared. When these tiles are placed next to each other in a 32x16 grid, whose edges win?

A tile in the centre of four others has shared edges on each side

When I first placed them in Godot, I could not identify a pattern to which the tiles’ edges were drawn — it seemed completely arbitrary. I read up on the rendering of TileMaps in the Godot documentation and discovered the Y Sort Enabled setting (documentation here). This setting can be found under the CanvasItem section of the TileMapLayer node.

Enabdling Y-sort on the TileMapLayer

Setting this to “On” means that tiles with a higher Y-position will be rendered over ones with a lower Y-position.

Tiles in TileMapLayer rendered using Y-sort

This results in a more predictable and consistent experience laying out isometric tile maps.

Used for this article

• Godot Engine v4.3
• Krita 5.2.3
• Windows 10 Pro