Creating a Hexagonal Isometric Tilemap

Hi everyone!

I'm currently working on a prototype for a hexagonal isometric boardgame and after sharing the current status of the prototype, I thought of writing this post to explain how I did it. If you are reading this, I hope this helps you!

PS: This was made using Godot 4.

The Tiles

First, the final result with a complete tileset is this:

The tile itself is a 32x32 pixel art, exported as a 160x160 image. In my case, I did 4 different tiles, representing different kinds of terrain. The file has a final dimension of 160x640.

Tileset

With the tileset art ready, I imported it to Godot. You will need a TileMap node. Add it to the scene, create a TileSet, and then you can create the Atlas you will use in the TileMap. The Atlas (actually, a TileSetAtlasSource) is the set of textures in a single texture file that you will use to populate your map. After loading the Texture, set the size to the size of each tile - the Region size. In this case, it will be 160x160. Then, you will be able to define the tiles. Just click on them and you will see they are highlighted. With that, they are basically ready to use, you just need to change some things on TileMap settings.

Setting Texture, Region size and defining the tiles

The TileMap

On the TileMap, click on the TileSet property. Now, you need to define these settings.

Tile Shape

Set it as Isometric. You will see the lines of the TileMap orientation changing.

Tile Layout

Set it as Right or Down, depending on what you want. The Layout will define the directions of the coordinates (which direction the Vector goes up or down in each axis). Note that the other layouts can mess up the coordinates and, if you intend to use the tiles' coordinates to code your move and other things, you will have a hard time doing so.

Tile Size

This setting is important because this is where you will be able to gather the tiles together in a cohesive way. I'm pretty sure there must be a math behind this, but I was able to find the correct value by the eye. In my case, setting the Tile Size as 230x80 did the job to make the hexagons aligned with each other.

Please note that the "floor" of the tile is centered on the cell grid. The "height" of the hexagon is down below the grid lines. For this, I needed to draw the hexagon in the lower part of the 32x32 pixel art square. Making the hexagon centered in the square made my hexagon not centered when I added it to the TileMap (not sure why).

TileMap settings

Hexagon centered in the grid cells (see the orange lines)

Hexagon drawn from bottom to top, leaving an empty space on the top

Finally, you just need to enable the Y Sort in the TileMap node so the hexagons appears one behind the other.

TileMap Y Sort enabled

Conclusion

And that's it! The trick here is to adjust the Tile Size to match the hexagons and also design your art so it remains with only the floor centered in the grid cell. Try different values for you

Page updated

Google Sites

Report abuse