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:



I've read Paul Firth's excellent article on isometric picking 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 XNA Resources) would be ideal for performance reasons. Thanks for any advice you can give me!

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.

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.

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.

"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.



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

I find a demo like this but AesteroidBlues shows the pic is slant

One of the quickest and easiest ways to do it would be to use a mouse map like in this article (check out the very bottom for the mouse map idea).

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.

Oh I see what you're doing, I think I was getting confused by all of the variables
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

One of the quickest and easiest ways to do it would be to use a mouse map like in this article (check out the very bottom for the mouse map idea).

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.

I'll certainly be experimenting with this method tomorrow but I've had mixed experiences with Canvas' getPixelData() function.

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.