Isometric and Hexagonal Map Support in Tiled2Unity

by Seanba on May 22, 2015

Isometric and Hexagonal Maps in Tiled2Unity

(Note: Isometric artwork is attributed to Yar via OpenGameArt.org)

Since Tiled2Unity’s release I’ve held firm on not supporting isometric maps due to two reasons:

  1. The game developers of days gone were limited to square tilesets and depended on artwork to give the illusion of their view whether it be top-down, side-view, 2.5D, whatever. Isometric (and hexagonal) were no different – you just bake the effect into the pixels.
  2. It’s a pain in the ass to implement.

However, my inbox tells me my fellow developers would really like to export their isometric maps to Unity with the same relative ease that their orthographic brothers and sisters enjoy. Also, I couldn’t go on pretending Tiled2Unity was the perfect companion app to Tiled for Unity developers when a major feature was not being supported.

Tiled2Unity: Isometric and Hexagonal Maps

If you download the latest version of Tiled2Unity you will find support for the following map types (in addition to orthographic):

  • Isometric
  • Isometric Staggered
  • Hexagonal (including all 4 variations of the coordinate system)

That’s every map type that Tiled is capable of creating right now, and, just like with orthographic maps, you can export collision objects into your Unity projects.

Isometric Preview (with collisions)

Hexagonal Preview (with collisions)

(Note: Hexagonal artwork is attributed to Steffen via TilemapKit)

Object Colliders in Isometric Mode

The isometric map mode in Tiled skews your collision objects so that rectangles becomes parallelograms and circles become ellipses. This complicates things a bit for us in Unity.

Object Shapes in Isometric Mode

For all other map types (including isometric staggered) the rectangle object will be exported as a BoxCollider2D and the circle a CircleCollider2D. Easy.

For the isometric map type the rectangle will be exported as a PolygonCollider2D and will keep the shape as displayed in the image above. The circle, however, will be lost. Note that ellipses with uneven width and height have never been supported in Tiled2Unity due to the lack of an EllipseCollider2D in Unity. Now that the circle in the example above is really an ellipse it falls into that category. Sorry, no cheap circle collisions here. If you really need a circle collider I suggest you go with an isometric staggered map instead.

Beware of Visual Seams

Depending on how your isometric and hexagonal tilesets are authored you may see a lot of visual seams in your Unity project with some camera settings and shaders.

Here’s an example of an 8×8 isometric tile …

Single 8x8 Isometric Tile

… and how you’d expect tiles like this to be rendered together …

Isometric Tiles Grouped Together (expected)

However, due to mathematical imprecision with the texture sampler you may end up with something that looks like this under certain conditions …

Isometric Tiles with Seams

The best way to avoid this is to add extra pixels that bleed outside the isometric shape …

Bleed Out Tiles to Avoid Seams

Generally, those extra pixels will be overlapped by the “proper” pixels of a neighboring tile but in the case where the texture sampling goes a bit out of bounds you’ll be covered.

Isometric Tiles With No Seams

Important Note: Do no increase the size of your tiles in Tiled to make up for those extra pixels. That’s what the margin setting is for in your tileset. Even though the “bleeding” tiles above may now be 10×10, they are really 8×8 tiles with 1 pixel margins.

What if You’ve Found a Bug?

I generally don’t work with isometric or hexagonal maps so at this time I can’t say this tech is too battle tested. If you’ve found an issue you can always leave a comment below or email me. I’m a fulltime game developer by day and a hobbyist programmer by night so keep in mind I can’t always reply right away.

Please Support Tiled on Patreon

I talk about this a lot because I know from Tiled2Unity alone that there is a lot of enthusiasm out there for Thorbjørn Lindeijer’s work with Tiled Map Editor. It is difficult to support the game development community as well as he has with a career and a family so please consider pledging to Bjørn’s Patreon in hopes of making Tiled even better his new fulltime job.

Even a couple of dollars each month adds up quickly so please join me in helping Bjørn reach his goal.

Tiled on Patreon

{ 3 comments… read them below or add one }

Alex May 22, 2015 at 4:22 pm

Thx for great tool

Majicpanda June 20, 2015 at 5:26 pm

I hope people really start using the iso so that you want to develop it out further. This was something I was looking at in Nov-Feb and could not come up with any solution on my own, so this was a huge surprise. The only thing that is troublesome is the fact that iso tiles that need to be dynamic based on Y pos -> sort order cannot be baked into a big mesh. I didn’t see any way to keep certain tiles completely separate and not baked so that we can apply a script that dynamically changes the sort order at runtime or on import.

Luke May 10, 2016 at 10:37 am

Hi Sean,

Thanks for this cool tool!
I’ve just started having a play about with it to see if it will be suitable for an isometric game I’m working on.

I have a similar question to Magicpanda I guess, how do we go about drawing a dynamic sprite in the correct order, say for example we have a ground layer that has a bunch of trees on it and we want characters to walk around the trees, they should get drawn in front of the ones they’re lower than and behind the ones they’re higher than, is that possible to achieve using this?

Any help will be great! Thanks

Leave a Comment

Previous post:

Next post: