Support for Hexagonal maps added

1

In the latest daily builds, support for hexagonal maps is available. This feature was sponsored by CodePoKE (GJ Roelofs), providing me with the incentive to support all 4 variations of the offset coordinate system. In Tiled this map type is called “Hexagonal (Staggered)”, and the rendering code is now also used for the similar “Isometric (Staggered)” maps.

Example based on http://opengameart.org/content/pixel-hex-tilesets-enhanced:

The configurations Tiled supports are as follows:

Stagger Y axis at odd rows (default):

Stagger Y axis at even rows:

Stagger X axis at odd columns:

When staggering the X axis, Tiled makes sure that the tiles are still drawn top-to-bottom for correctly overlapping tile graphics in most situations. So in the above sample, the drawing order is (0,0), (2,0), (4,0), (1,0), (3,0), etc.

Stagger X axis at even columns:

By default, a new staggered hexagonal map has a staggered Y-axis, with every odd row being shifted to the right. This matches the behavior of the staggered isometric maps, but it is not the same as what the old Java version of Tiled supported. Hence, when loading a hexagonal map that was made with Tiled Java some map properties will need to be changed for it to render correctly.

The main difference compared to staggered isometric maps is the straight vertical or horizontal side. The length of this side needs to be specified (in pixels) for Tiled to be able to align the tiles perfectly. Getting the values of tile width, tile height and side length exactly right for a given tileset usually takes some experimenting. Fortunately these properties can be changed in the Properties view:

In the TMX Map Format the following new attributes have been placed on the <map> element:

  • hexsidelength - Length of side of the tiles in pixels
  • staggeraxis - The staggered axis, either x or y.
  • staggerindex - The indexes to stagger, either odd or even.

At the moment I consider these additions still subject to change, but they won’t change anymore once Tiled 0.11 is released.

Now install a daily build of Tiled and take it for a spin! I’m looking forward to your feedback as well as to see the beautiful hexagonal maps you’ll make for your next game.

1 Like
2

I wrote a [step-by-step tutorial for hexagonal tilemaps in Tiled] (broken link) after fiddling with hexagonal support for a while. I hope this makes certain things clearer for everyone.

The tutorial includes ready-to-use hexagonal tilesets (both “flat top” and “pointy top” tiles) with the corresponding grid and tile sizes given, so you don’t have to guess them.

3

@TilemapKit Awesome document! Of course I should be writing stuff like that, but I don’t get further than the above technical overview… :frowning:

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

It’s called “stagger axis” rather than “pointy top / flat top” mainly because it also applies to staggered isometric maps, not just to hexagonal maps.

“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.”

I should probably make sure the behavior is a little more well-defined…

Many thanks for your work on TilemapKit and these documentation efforts!

4

It’s called “stagger axis” rather than “pointy top / flat top” mainly because it also applies to staggered isometric maps, not just to hexagonal maps.

Yes, I understand that the terminology is supposed to fit in as generically as it’s being used, which sometimes can make it somewhat odd (as opposed to “even” :slight_smile: ).

As for the integer truncation, I noticed that this may render differently when using floating point numbers on a Retina device, because on those devices a 0.5 point is actually still on a pixel-boundary (a point is 2x or even 3x the size of a pixel). So probably won’t make a difference unless you’re working with Retina(-ish) devices.

5

Hello,

This Hexagonal support are welcome.
Thanks.

May i have a question ?
Any idea when this orientation of Map will be supported for IOS developement with Sprite Kit ?

Any way your tool are AWESOME.

6

The images in the OP are no longer working. Not surprising after this many years :slight_smile: