Sign in to follow this  
AesteroidBlues

Isometric Hex Picking

Recommended Posts

Hey everyone,

I was wondering if anyone had any suggestions or words of wisdom on how to perform picking on a grid of isometric hexagonal tiles. Something like this:

[img]http://fc01.deviantart.net/fs70/f/2010/131/a/3/Greyhawk_Isometric_Hex_map_by_Hologramzx.png[/img]

I've read Paul Firth's excellent article on [url="http://www.wildbunny.co.uk/blog/2011/03/27/isometric-coordinate-systems-the-modern-way/"]isometric picking[/url] on a square-tile map and I was wondering if there was a similar method for hexagons. We're using Javascript on an HTML5 canvas and I'm not sure a system that compares pixel color data (as described on [url="http://www.xnaresources.com/default.asp?page=Tutorial:TileEngineSeries:7"]XNA Resources[/url]) would be ideal for performance reasons. Thanks for any advice you can give me!

Share this post


Link to post
Share on other sites
Thanks for link to Paul Firth's article :) It sparked new ideas for me.
I never done isometric let alone hexagonal so please forgive me in advance for guessing.

Looking at the image of the hexagonal tiles in OP, I tilt my head slightly to the left and see that this is still a 2d grid (x,y).
Starting on the far left tile is (0,0) and the far right is (5,3)
Every hex tile has a center. The center point will become the exact tile location.

Based on the 'Coordinate Systems' section of the article: (0,0) will become the origin for the up 'U' and right 'V' vectors.
The two vectors will pass through all the center points of each hex tile along the edge of the map.
Get the screen coordinate 'P'
Do the math to get tU and tV

Temporarily select a tile based on (tU, tV). So if (tU, tV) = (1.3, 2.7) then it will pick tile (1, 3).

Afterwards, do a more comprehensive test.
Using the temporary tile, check the six sides if the (tU, tV) falls within the polygon. All sides are equal distance from the center of the tile.
If any one side fails the check then the adjacent tile is the tile to be selected. Otherwise the current tile is the selected tile.

Share this post


Link to post
Share on other sites
Ah! That makes quite a bit of sense, however does the assumption that all sides of the hexagon are equidistant from the centerpoint hold when the isometric perspective is applied? This would be correct for an orthographic top-down map, but just eyeballing it with my mouse pointer over the image in the OP, it appears that the "top" and "bottom" of the hex tile are closer than the sides. I could be mistaken though.

Share this post


Link to post
Share on other sites
I don't see how it's all that different from regular isometric:

Hex: (Ignore the "Stop deleting my spaces HTML" dots)
[source lang="plain"]
.__ .. __
/ A\__/ B\
\__/ C\__/
/ D\__/ E\
\__/ F\__/
[/source]
Iso:
[source lang="plain"]
/A\ /B\
\ /C\ /
/D\ /E\
\ /F\ /[/source]

The only difference I see drawing/picking logic wise is the tiles are a little wider and slightly differently shaped.

Share this post


Link to post
Share on other sites
"does the assumption that all sides of the hexagon are equidistant from the centerpoint hold when the isometric perspective is applied?"

It should hold true. I though point P is in screen space and it gets translated into point T which is P in grid space. Essentially grid space is like viewing the hexagon tile from perfectly above or basically without perspective.

[img]http://arges-systems.com/images/hex-zoom-d.png[/img]

Picture from this page - [url="http://arges-systems.com/blog/2011/01/10/hex-grid-line-of-sight-revisited/"]http://arges-systems.com/blog/2011/01/10/hex-grid-line-of-sight-revisited/[/url]

Share this post


Link to post
Share on other sites
I find a demo like this but AesteroidBlues shows the pic is slant
[img]http://www.thecodeway.com/blog/wp-content/uploads/2011/04/hex_2.gif[/img]

Share this post


Link to post
Share on other sites
One of the quickest and easiest ways to do it would be to use a mouse map like in [url="http://www.gamedev.net/page/resources/_/technical/game-programming/isometric-n-hexagonal-maps-part-i-r747"]this article[/url] (check out the very bottom for the mouse map idea). Edited by Saruman

Share this post


Link to post
Share on other sites
[quote name='Neometron' timestamp='1344320985' post='4966917']
It should hold true. I though point P is in screen space and it gets translated into point T which is P in grid space. Essentially grid space is like viewing the hexagon tile from perfectly above or basically without perspective.
[/quote]

Oh I see what you're doing, I think I was getting confused by all of the variables [img]http://public.gamedev.net//public/style_emoticons/default/wacko.png[/img]
This method would be great, but I'm afraid I don't know how to transform screen point P into its equivalent point in grid-space. Something tells me it involves matrices [img]http://public.gamedev.net//public/style_emoticons/default/dry.png[/img]

[quote name='Saruman' timestamp='1344393721' post='4967222']
One of the quickest and easiest ways to do it would be to use a mouse map like in [url="http://www.gamedev.net/page/resources/_/technical/game-programming/isometric-n-hexagonal-maps-part-i-r747"]this article[/url] (check out the very bottom for the mouse map idea).
[/quote]

I've read quite a bit about mouse maps, unfortunately I'm wary of their performance cost in my development environment (HTML5 with Canvas and Javascript). I'll certainly be experimenting with this method tomorrow but I've had mixed experiences with Canvas' getPixelData() function.

Share this post


Link to post
Share on other sites
[quote name='AesteroidBlues' timestamp='1344482304' post='4967621']
I'll certainly be experimenting with this method tomorrow but I've had mixed experiences with Canvas' getPixelData() function.
[/quote]
If it turns out to be slow you could always use the equivalent technique but as an array (i.e. just assign each color a number and build an array that you embed as an include), that way the only cost is a very quick array index lookup.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this