How to create Hexagonal Tilemaps in Tiled Map Editor

How to create Hexagonal Tilemaps in Tiled Map Editor v0.11 and later

Hexagonal tilemaps support was added in Tiled v0.11, released in January 2015. This article explains how to set up hexagonal tilemaps with “pointy top” and “flat top” orientation and you’ll learn what the various “stagger” settings do.

Download Tiled and our Hexagonal Tilesets

If you haven’t already, download Tiled for free and run it. Also grab our public domain hexagonal tilesets that you’ll be using in this tutorial:

Hexagonal Map Types: “flat top” vs “pointy top”

There are two orientations for hexagonal tilemaps which require different settings and tilesets. In this tutorial you’ll find the settings for “flat top” hexagonal maps on the left, and the settings for “pointy top” hexagonal maps on the right side.

"Flat Top" Hex Tiles"Pointy Top" Hex Tiles
"Flat Top" Tileset"Pointy Top" Tileset

Create a Hexagonal Tilemap in Tiled

In Tiled, create a new map (File -> New) and use the settings below depending on what type of map you want to create. You are free to use any Map Size. No need to ponder about this now, you can later resize the map easily via Map -> Resize Map.

"Flat Top" Hexagonal Map"Pointy Top" Hexagonal Map
Tiled "New Map" settings for "Flat Top" Hexagonal MapTiled "New Map" settings for "Pointy Top" Hexagonal Map

Note that the Tile Size setting in this dialog actually refers to the grid size. So if you have 3D-ish tiles or just tiles that overlap tiles above them, this size will be smaller on at least one axis (typically height) than the actual pixel size of the tiles in the tileset. Here, the grid size is 60×39 for our flat top tiles, and 60×52 for the pointy top tiles.

Add a Tileset with Hex Tiles

Use the Map -> New Tileset menu command to add a new tileset image.

"Flat Top" Tileset"Pointy Top" Tileset
Tiled Add "Flat Top" Hexagon TilesetTiled Add "Pointy Top" Hexagon Tileset

Notice that the tile size varies, “flat top” tiles are 60×60 in size while “pointy top” tiles are higher with 60×80 pixels. Both tilesets do not use any spacing and margin between tiles (spacing) or the image borders (margin).

Transparent color is not used because transparency is already provided by the PNG’s alpha channel. This is generally recommended because few engines these days still use color coding for find transparent areas. The days of bit-blitting images into the framebuffer are long gone but gives me a reason to add this link for those interested in some background on 2D computer graphics.

Draw some tiles to try it out

It doesn’t look quite right, does it?

"Flat Top" with default settings"Pointy Top" with default settings
"Flat Top" hex map with incorrect settings"Pointy Top" hex map with incorrect settings

Let’s fix this by applying …

Correct Settings for Stagger Axis and Stagger Index

Choose the Map -> Map Properties command from the menu to bring up the map properties with the Stagger Axis, Stagger Index and Tile Side Length (Hex) settings. See also the announcement post for hexagonal tilemap support for further visualizations.

Tiled “Stagger Axis” Explained

The stagger axis for hexagon maps merely refers to the orientation (pointy top vs flat top), albeit in a non-intuitive way.

  • Set Stagger Axis to X for “Flat Top” hexagon tilemaps
  • Set Stagger Axis to Y for “Pointy Top” hexagon tilemaps

Now set the stagger axis in your map accordingly, depending on which tileset you are using.

Tiled “Stagger Index” Explained

The stagger index can be set to “even” or “odd” which simply changes which row or column is shifted (“staggered”). Whether it shifts rows or colums depends on the stagger axis setting.

  • Set the Stagger Index to Even to offset even-numbered columns (Stagger Axis: X) or rows (Stagger Axis: Y), ie 0, 2, 4, 6
  • Set the Stagger Index to Odd to offset odd-numbered columns (Stagger Axis: X) or rows (Stagger Axis: Y), ie 1, 3, 5, 7

Which setting you use for stagger index is largely a matter of personal or technical preference.

Tiled “Tile Side Length (Hex)” Explained

The hex side length basically determines tile overlap for hexagonal tilemaps. This overlap is always along the Stagger Axis, ie for Stagger Axis X the hex side length determines horizontal spacing between tiles.

The Tile Side Length value needs tweaking to get it right, and also depends on the design of the hex tileset. For example some tilesets are designed with a small amount of overlap (1-2 pixels) between tiles in mind. A good starting point is to take half the width of “flat top” (Stagger X) tiles respectively half the height of “pointy top” (Stagger Y) tiles.

  • Set the Tile Side Length (Hex) of your “flat top” map to 30 (half of the tile width)
  • Set the Tile Side Length (Hex) of your “pointy top” map to 26 (half of the tile height)

Note that in Tiled odd-numbered values for Tile Side Length seemingly have no or only a miniscule effect. I’m not sure if this is by design, it certainly is a rounding/truncation problem associated with integer numbers. A tile rendering engine may show different results for odd-numbered Tile Side Length settings, so I would recommend to stick to even-numbered values.

Now enjoy editing hexagonal tilemaps with Tiled!

"Flat Top" Hex Map"Pointy Top" Hex Map
Tiled "pointy top" hex mapTiled "flat top" hex map

Comments

Loading Facebook Comments ...

Leave a Reply

Your email address will not be published. Required fields are marked *