Hexagonal TMX Support

[Michael Neel]

First, let me get out front this isn't a request for hexagonal support in the Tiled Map Editor, but rather support for orientation="hexagonal" in a .tmx file, and the conventions followed by renders.

I've started support for hexagonal in my Unity render UTiled.  In implementing it I decided to be pragmatic where possible to ease other implementations and also for the eventual addition of hexagonal maps in the editor itself.  Like isometric, there are many ways to do hexagonal and it would probably be insane to support them all, so I've picked what I think is most common and compatible with the current editor.  I'm posting here to see if there is anything I haven't considered, or things that should be changed.

Okay, changes to TMX:

    <map orientation="hexagonal">

That's it.  Told you I was pragmatic!

Okay, rendering - first I went with what I call a vertical hexagon because the point is at the top and bottom.  The top and bottom points are at 1/2 the tile width, and the left and right points are at 1/4 and 3/4 the tile height.  A sketch:


​ 

This mockup has my rending method as well (in Unity I convert tile layers to 3d meshes).  Reasons for choosing fixed point positions and the 1/4 method of creating a hexagon in a square are
   
    1) no additional data required in the TMX file
    2) no weird ratio math as in isometric maps

    3) 1/4 works nice with common tile sizes to not have rounding / pixel bleeding issues

While vertical hexagons seem to be the most common, I could see a strong desire for horizontal hexagons so my thoughts here are to rotate the above sketch 90 deg counter clockwise (verts and tris stay the same - UVs will remap).  This means the TMX map data should probably be orientation="hexagonal-v" and orientation="hexagonal-h" or some better name I can't come up with right now.

Tilesheets - if you're comfortable with UVs you already know where this is going to go!  Tilesheets would still be in squares where the artist has drawn the tile inside the shape above.  This works like isometric does now and also allows offest to be used to have hex source tiles overlap when rendered, giving a 3d feel (again, like isometric).

For rendering rows, the Y changes by 3/4 tile height each row and the X is offset every other row by 1/2 the tile width.  Basically the isometric staggered we have now.  Like staggered, the even rows are shifted right.

By doing the rendering this way you can actually use the current Tiled Map Editor to create hex maps.  Just create the map as  tilesheets as noted, and create either a staggered or orthogonal map and after editing use a text editor to change the orientation.  Of course either map style will require a bit of imagination to know how it will look in game, but it's not hard to do.

Thoughts? Crazy? Is there already work down this path that this would conflict with?

Mike

--
Michael C. Neel (@ViNull)
http://www.ViNull.com

[Thorbjørn Lindeijer]

Hey Michael,

 

Actually I plan to work on hexagonal support in Tiled during the next week since somebody offered to sponsor this feature. It seems hexagonal maps are all the rage right now!

 

Regarding how to store it, most tiles require pixel-perfect alignment to render correctly, and the slanted edges on a hexagonal tile are commonly 1:2 or 1:1, resulting in a somewhat arbitrary additional shift depending on the tile width and height. Hence, I think we won't get around actually having this additional horizontal or vertical shift (compared to isometric staggered) configurable in pixels.

 

It could be done like this:

 

    <map orientation="hexagonal" tilewidth="64" tileheight="36">

        <hexagonal direction="horizontal" shift="odd|even" sidelength="28" />

 

In this example, with the 1/4th approach the "sidelength" would have defaulted to 64/2=32. However, since the slanted edges were pixeled as 1:1 diagonals, the length of the straight sides is shorter (64 - 36 = 28).

 

Apart from this additional data in the map format, I wonder where to store in in C++ as well as how to display the additional options in the UI. It gets a little tricky when trying to show/hide such settings based on the chosen orientation. I will try to be pragmatic as well. :-)

 

Cheers,

Bjørn

--

--

Tiled Map Editor mailing list

mape...@googlegroups.com

http://groups.google.com/group/mapeditor

 

---

You received this message because you are subscribed to the Google Groups "Tiled Map Editor" group.

To unsubscribe from this group and stop receiving emails from it, send an email to mapeditor+...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Email had 1 attachment:

• 2014-10-04 18.47.22.jpg
    1.8M (image/jpeg)

 

[Michael Neel]

Excellent news (both for the work on the feature and the direct support of Tiled)!  I'll keep an eye out for the daily builds.

Working on this has lead me to rewrite the bulk of my conversion to mesh code for the better.  I had many "if orientation ==" blocks that I've gotten rid of now and condensed a good chunk of code to work on any map type.

One thing I've kept in the back of my head is "would this work for octagonal maps?"  Not that I'm adding that as well (right now) but it's a good test of the design, since in theory both map types would be pretty similar.

My reason for the sudden interest is from taking a vacation where I wound up playing 80 hours of Civ 5.  I then had to leave the PC so I looked for a Civ on iOS only to find a real lack of titles. Civ Rev on iOS uses square tiles - square! That's unacceptable! =p

Mike

[Thorbjørn Lindeijer]

On Sun, Oct 5, 2014, at 11:57 PM, Michael Neel wrote:

Excellent news (both for the work on the feature and the direct support of Tiled)!  I'll keep an eye out for the daily builds.

 

I'd subscribe to updates on Tiled issue #1. :-)

 

One thing I've kept in the back of my head is "would this work for octagonal maps?"  Not that I'm adding that as well (right now) but it's a good test of the design, since in theory both map types would be pretty similar.

 

Right, actually both "isometric staggered" and "hexagonal" maps are special cases of "octagonal" maps (at least, when we ignore the empty squares that would appear if you would actually use all sides). It might be interesting to support all of them with a single renderer.

 

My reason for the sudden interest is from taking a vacation where I wound up playing 80 hours of Civ 5.  I then had to leave the PC so I looked for a Civ on iOS only to find a real lack of titles. Civ Rev on iOS uses square tiles - square! That's unacceptable! =p

 

Ouch, yes. That is soo 1991!

 

And Civ 5 is quite the time sink. I've launched it once and before I knew it it was 2:00 in the night. So far I have not dared to start it again...

 

Cheers,

Bjørn

 

[Michael Neel]

On Sun, Oct 5, 2014 at 6:07 PM, Thorbjørn Lindeijer <bj...@lindeijer.nl> wrote:

 

Right, actually both "isometric staggered" and "hexagonal" maps are special cases of "octagonal" maps (at least, when we ignore the empty squares that would appear if you would actually use all sides). It might be interesting to support all of them with a single renderer.

 

You are correct - I still had staggered on the todo list and using the new approach I added support in no time!

Mike

[Pelle Nilsson]

Michael Neel <michae...@gmail.com> writes:

> Like isometric, there are many ways to do hexagonal and it
> would probably be insane to support them all,

I am curious enough about this statement to de-lurk here for a
moment. You can make the rows or columns staggered. Also you could begin
with the first row/column right/down or left/up. That is only four ways.
What other ways are there?

Have done some work on scripts to make SVG hex grids and designed a few
hex-based boardgames, so I have given some thought to the layout of
hexes.

https://github.com/lifelike/hexmapextension
http://hexmaps.appspot.com/

> While vertical hexagons seem to be the most common, I could see a strong
> desire for horizontal hexagons so my thoughts here are to rotate the above
> sketch 90 deg counter clockwise (verts and tris stay the same - UVs will
> remap).

In my experience it is the other way around. Maybe that is because I
think mainly of physical boardgames and of computer wargames that often
look like boardgames. They usually have straight columns. Not that it
matters much because I expect both will be added anyway?

One thing that could be worth considering and implement at the same time
would be orthonogal staggered maps, that are topologically equivalent to
hex maps but with rectangular shapes. They are easier to render and in
some cases wastes less screen space, so they can be useful for some
games/platforms. Depending on how hex maps are implemented it might
not require any extra work at all, just be a matter of using the
correct geometry settings and tileset.

Also I guess the rotation bits will have to be treated slightly
differently for hex tiles?

--
/Pelle

[Michael Neel]

On Tue, Oct 7, 2014 at 3:54 AM, Pelle Nilsson <pe...@lysator.liu.se> wrote:

Michael Neel <michae...@gmail.com> writes:

> Like isometric, there are many ways to do hexagonal and it
> would probably be insane to support them all,

I am curious enough about this statement to de-lurk here for a
moment. You can make the rows or columns staggered. Also you could begin
with the first row/column right/down or left/up. That is only four ways.
What other ways are there?

As Bjørn pointed out already, the ratio of the sides doesn't have to be the same.  

 

> While vertical hexagons seem to be the most common, I could see a strong
> desire for horizontal hexagons so my thoughts here are to rotate the above
> sketch 90 deg counter clockwise (verts and tris stay the same - UVs will
> remap).

In my experience it is the other way around. Maybe that is because I
think mainly of physical boardgames and of computer wargames that often
look like boardgames. They usually have straight columns. Not that it
matters much because I expect both will be added anyway?

I went off of Civ and Galactic Civ games, but I think the idea is support for both.

 

One thing that could be worth considering and implement at the same time
would be orthonogal staggered maps, that are topologically equivalent to
hex maps but with rectangular shapes. They are easier to render and in
some cases wastes less screen space, so they can be useful for some
games/platforms. Depending on how hex maps are implemented it might
not require any extra work at all, just be a matter of using the
correct geometry settings and tileset.

Also I guess the rotation bits will have to be treated slightly
differently for hex tiles?

So the secret to rending any of the maps is; it's always rectangles.  When rendering a staggered or isometric map, it's just an adjustment to when the rectangle is position, but the source tile is always a square and always being drawn as such.  This allows you to make maps that have tiles which overlap for perspective.

The other upside to this is the flipping and rotation are the same for all maps, though if you rotate a tile in isometric in the current editor it's going to appear very weird!

The tricky bit that might need changing is Terrains, which would now have six sides to consider.  I barely have my mind wrapped around terrains as it is so I don't know if this is a real issue or even a tricky one.

Mike

[Thorbjørn Lindeijer]

On Tue, Oct 7, 2014, at 10:53 PM, Michael Neel wrote:

So the secret to rending any of the maps is; it's always rectangles.  When rendering a staggered or isometric map, it's just an adjustment to when the rectangle is position, but the source tile is always a square and always being drawn as such.  This allows you to make maps that have tiles which overlap for perspective.

 

The other upside to this is the flipping and rotation are the same for all maps, though if you rotate a tile in isometric in the current editor it's going to appear very weird!

 

Right, and because of the way the actual tile rendering is the same regardless of map orientation, this is not easy to change. Also, since as you say the tiles are quite often expected to overlap or have perspective features, adjusting this logic to the map orientation is often not meaningful (it would only be meaningful for tiles that are physically flat).

 

The tricky bit that might need changing is Terrains, which would now have six sides to consider.  I barely have my mind wrapped around terrains as it is so I don't know if this is a real issue or even a tricky one.

 

Yes, for correct terrain rendering the hexagonal are a new challenge. I will not make this part of the initial release because I have no idea when I would have time for this. Before looking into this it would be interesting to look at how some hexagonal games have solved the transitions, like Battle for Wesnoth:

 

http://www.wesnoth.org/images/sshots/wesnoth-1.10-2.jpg

 

But, I think the effort is high while the use-case is low, so this is not likely to materialize anytime soon or at all. More realistic would be supporting the terrain tool on isometric staggered maps, which is currently still a problem as well.

 

Best regards,
Bjørn

[Michael Neel]

I saw the daily build have the start of hexagonal support - cool progress!  I will be check it out this weekend.

I've thought more on things and the "tile side length" and was wondering if we just had one "type" of map that covered isometric, hexagonal, and octagonal by added a "tile top length".  For isometric these out both be 0, for hexagonal one would be 0 and indicate the direction it points, and for octagonal both would be above 0.

I'm really only talking about the TMX format, how this is exposed to the UI is another matter and can be different.

Mike

--

--
Tiled Map Editor mailing list
mape...@googlegroups.com
http://groups.google.com/group/mapeditor

---
You received this message because you are subscribed to the Google Groups "Tiled Map Editor" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mapeditor+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Thorbjørn Lindeijer]

So, I just pushed support for flat-top hexagonal maps, so now all 4 "offset hexagonal" types are supported, and the support has translated to the "staggered isometric" renderer as well.

 

However, I haven't found a nice way not to duplicate the majority of the code while adding flat-top hexagonal. The thing is that while one could just have "side length" and "top length" separated, this didn't help so much because the main difficulty for me was dealing with the fact that "pointy topped" hexagonal staggers the Y axis while "flat topped" hexagonal staggers the X axis. This totally changes calculations for bounding boxes, converting screen to tile positions and finally the way the tiles need to be rendered to put them in the right order.

 

So at the moment Tiled doesn't support "octagonal" maps, but I think this isn't a huge issue. Of course, suggestions for cleaner code are welcome. You can find my current implementation of the hexagonal renderer here:

 

https://github.com/bjorn/tiled/blob/master/src/libtiled/hexagonalrenderer.cpp

 

I'll get to documenting the new attributes in the TMX format later. I hope it will not be too confusing, but basically the map element now has the following extra attributes:

 

hexsidelength="[pixel length]"

staggeraxis="x|y"

staggerindex="odd|even"

 

The "staggeraxis" means the axis that is staggered, so the non-straight axis. The "staggerindex" means the indexes which are shifted (to the left when Y axis is staggered, or down when the X axis is staggered).

 

Feedback welcome!

 

Regards,

Bjørn

[Michael Neel]

Awesome - I will take a look and get my UTiled library up to speed.

I cleaned up a lot of my render code but you are right in it's not as straight forward as I first assumed.  I ended up with a "staggerX" and "staggerY" values and set one of them to 0.  Still this didn't eliminate all the if statements.

I believe now that TMX support is defined as a collection of edge cases!

--

--
Tiled Map Editor mailing list
mape...@googlegroups.com
http://groups.google.com/group/mapeditor

---
You received this message because you are subscribed to the Google Groups "Tiled Map Editor" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mapeditor+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Pelle Nilsson]

Fantastic news!

Some messyness in the code for my (python) hex-grid generator was
removed by treating all maps as "flat-top" and when working with
"pointy-tops" I transform all screen coordinates 90 degrees in a
"lower layer" (just recalculate what position to blit each hex tile to
and rotate the tiles 90 degrees, essentially). Maybe for some uses the
slight increase in CPU usage can be a problem though and unfortunately
my code is old and messy for other reasons anyway.

/Pelle

[Pelle Nilsson]

Decided to check out the latest nightly build, but the OSX file is
broke and will not open. The file size is a bit suspicious as well,
being only 4.2 MB when almost all older nightlies are 11 MB (exception
of recent days is the one from 29/10 that was only 1.9 MB).

--
/Pelle

[Thorbjørn Lindeijer]

On Fri, Nov 7, 2014, at 11:12 PM, Pelle Nilsson wrote:
> Decided to check out the latest nightly build, but the OSX file is
> broke and will not open. The file size is a bit suspicious as well,
> being only 4.2 MB when almost all older nightlies are 11 MB (exception
> of recent days is the one from 29/10 that was only 1.9 MB).

For some reason it happens quite often that the upload is interrupted.
I've manually re-uploaded the latest build now:

http://koboldkit.com/tiled/?C=N;O=D

I've also uploaded a new Windows build here:

http://files.mapeditor.org/daily/?C=N;O=D

Regards,
Bjørn

[Thorbjørn Lindeijer]

On Fri, Nov 7, 2014, at 10:54 AM, Pelle Nilsson wrote:
> Fantastic news!
>
> Some messyness in the code for my (python) hex-grid generator was
> removed by treating all maps as "flat-top" and when working with
> "pointy-tops" I transform all screen coordinates 90 degrees in a
> "lower layer" (just recalculate what position to blit each hex tile to
> and rotate the tiles 90 degrees, essentially). Maybe for some uses the
> slight increase in CPU usage can be a problem though and unfortunately
> my code is old and messy for other reasons anyway.

Right, I've considered doing this in some places, but this is not a
solution for the actual tile rendering since they are expected to be
drawn in a certain order for them to overlap properly (for certain
tilesets, at least).

Regards,
Bjørn

[Breno Azevedo]

One problem I found with the hex implementation was when trying to player objects in an object layer. It's offset from the actual tileset layer (using the exact same tile size) as you can see in the screenshot below:

I can reposition objects freely after placing them, but it's a huge turnoff not being able to snap things to the grid properly. Anything I can do to offset that by default or something?

[Thorbjørn Lindeijer]

Hey Breno,

I've just disabled the unwanted snapping in the following commit:

 

https://github.com/bjorn/tiled/commit/4aad4d3d750b6e28448dead14761059e6102caf6

 

However, the main problem you're having with things not snapping to the grid properly is still there. I've done some additional cleanup which should make fixing this a little easier, but I'd still need to find some time to look into actually fixing it.

 

Regards,

Bjørn

[Breno Azevedo]

Hi Bjørn. Thanks a lot for your reply! One thing I found which might help fixing the issue, is that if I make the object image width double that of the cell width, it snaps properly horizontally. 

I can never align the base of the image with the (pointy) bottom of the cell though, it always snaps the image base to the 'hex side height' base, ie. the bottom part of the side edge.

Thanks again, please keep up with the amazing work!

--

--
Tiled Map Editor mailing list
mape...@googlegroups.com
http://groups.google.com/group/mapeditor

---

You received this message because you are subscribed to a topic in the Google Groups "Tiled Map Editor" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/mapeditor/L8Uy--dFV5s/unsubscribe.
To unsubscribe from this group and all its topics, send an email to mapeditor+...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

____________________
Breno Azevedo da Silva
@brenoazevedo
-- Freakow