Working with Hexagonal and Isometric Tile Shapes

1. Creating a Non-Rectangular Tilemap

This tutorial has been verified using Unity 2019.4.11f1 LTS and 2D Tilemap Editor 1.0.0 - https://learn.unity.com/tutorial/working-with-hexagonal-and-isometric-tilemaps-2019-3

In addition to Square and Rectangular Tilemaps, Unity can also create Hexagonal and Isometric Tilemaps.

Creating a Hexagonal or Isometric Tilemap is almost identical to creating a traditional Tilemap.

Right-click in a blank area of the Hierarchy panel, or use the top drop-down menu: GameObject > 2D Object > Hexagonal / Isometric Tilemap (Figure 01).

Figure 01: Creating a Hexagonal or Isometric Tilemap

The four types of Tilemaps are pictured below (Figures 02-05).

Figure 02: Hexagonal Point Top Tilemap Grid: XYZ

Figure 03: Hexagonal Flat Top Tilemap Grid: YXZ

Figure 04: Isometric Tilemap Grid: XYZ

When the cells are rearranged from their standard XYZ layout, they are said to be swizzled. For example, in the Hexagonal Flat Top Tilemap Grid, the X and Y dimensions are transposed so that a tile at (3,4,6) is at 4 units in the X dimension and 3 in Y.

2. Working with Hexagonal Tiles

By default, a Tilemap grid’s cell size is set to 1 x 1 units, which is fine for a traditional grid with square tiles, where a cell’s pixels-per-unit matches its resolution. For Hexagonal and Isometric Tilemaps, we will need to change the pixel-per-unit resolution. To find our cell size, we’ll divide the cell’s pixel resolution by its pixels-per-unit setting.

We’ll assume that the tile Sprites (Figures 06-08) have been imported with the default resolution of 100 pixels-per-unit, with their pivot points set to center.

Figure 06: Hexagonal Point Top

Figure 07: Hexagonal Flat Top

Figure 08: Isometric (both)

Hexagonal Point Top Tilemap: Our tile is 55 x 64 pixels. With a pixels-per-unit setting of 100, our cell size is .55 inches for X and .64 inches for Y (Figure 09).

Figure 09: A (nearly) perfect fit! With higher-resolution art, the edges of the tile will more closely conform to the cell.

Hexagonal Flat Top Tilemap: The tile for the Hexagonal Flat Top Tilemap Grid is rotated 90° from the tile in the Hexagonal Point Top Tilemap Grid.. Its dimensions are 64 x 55 pixels. You might expect the cell size to be .64 inches for X and .55 inches for Y. However, with this setting, you will get an incorrect fit (Figure 10) because the cell swizzle is YXZ. In other words, what looks like the X axis from our perspective is actually the Y axis, and vice versa. You will need to transpose the X and Y components of the cell size in order for them to be set properly. With the same cell size as in the Hexagonal Point Top Tilemap — 55 inches for X and .64 inches for Y — we get a much better fit (Figure 11).

Figure 10: Something’s not quite right...

Figure 11: Much better.

Cell swizzle and size considerations aside, hexagonal tiles work much like square or rectangle tiles.

3. Working with Isometric Tiles

While Hexagonal Tilemaps can easily be dragged into place from the Project view, Isometric Tilemaps benefit greatly from the Tile Palette window. In fact, the Tile Palette window is required to use the Z As Y Tilemap feature.

Isometric Tilemaps are 2 x 1 in aspect ratio. Because they can vary in height, and in order to accommodate flat terrain as well as tall trees in the same Tilemap, we will only consider the footprint of the tile. The 2 x 1 rule allows for clean tiling and greatly simplifies the math for calculating cell size.

A good practice is to match the pixels-per-unit setting for your Isometric Tilemaps to their width. So, a tile that is 100 pixels wide would be set to 100 pixels-per-unit. This allows your Isometric Tilemap to use the default cell size of 1 x 0.5.

Even though the base of the tile conforms to the 2:1 aspect ratio, the art itself usually doesn’t. The only exception is with flat isometric tiles with no height information. Even the most “flat” art will typically contain some height information. The example ground tile (Figure 12), enlarged for detail, is 100 x 58 pixels tall. This means there are eight pixels of height information. In this instance, four of the pixels are above ground and four are below (Figure 13).

Figure 12: Isometric ground tile

Figure 13: Isometric ground tile, sliced through its vertical center

One final point to consider is the apparent height of your tile. There are two methods to control this: the pivot-point and the Z Position for Isometric (Z As Y) Tilemaps.

The pivot-point can be manipulated to change the apparent depth or height of a tile. In Figure 14, although the trees’ cells are at the same vertical position, the trees appear to be at different depths. The tree on the left is using the default center pivot-point, while the tree on the right’s pivot-point is set at the bottom of its trunk. To create the terrace (Figure 15), the grass-on-ground tile was duplicated and the duplicate tile’s pivot-point was moved slightly below center, raising its apparent elevation.

Figure 14: These trees appear to be at different depths.

Figure 15: A change in the pivot-point position can also provide an apparent change in height.

Setting the Z position in an Isometric (Z As Y) Tilemap offers less control over apparent position, but is a better choice when you need to stack two tiles in the same cell, such as planting a tree on our terrace (Figure 16).

Figure 16: The Z As Y Tilemap lets the otherwise unused Z Position set a tile’s height, allowing for stacked tiles.

The tree has a Z (effectively Y) position of 1, while the grass tile’s Z position is 0. To set the Z position of a tile, press S in the Tile Palette or use the selection tool (Figure 17) to select the tile you wish to raise or lower.

Figure 17: Tile selection tool

Changing the Z position will change the offset of the tile between where you select (the orange diamond) and where it appears on the Tilemap (the blue diamond) (Figure 18). Select Reset to bring the tile back to ground level with a Z position of 0.

Figure 18: This tree will appear relatively close to where it’s “planted,” but this can be used for a more dramatic effect for flying creatures or hovering objects.

4. Conclusion

Now that you know about non-rectangular Tilemap options, such as Hexagonal and Isometric Tilemaps, you can experiment with them to give your 2D games and other projects a more interesting layout and navigation scheme.