I’m working on a TBS game that uses a hexagonal grid. However, I wanted it to be isometric (looks nice and pixel-arty), and the tiling engine works well, this is the result :
However, to achieve this I had to fiddle with the values (tile size, tiling algorithm) to make the tiles fit correctly.
Here’s an example tile :
The tile size is 62×32, and when tiled, each tile is moved 47 (cw) on x, and 16 (ch) on y to fit correctly.
This is how I calculate screen cordinates (for drawing tiles) from map coordinates :
function toScreen(x, y, z, offset)
{
offset = ifndef(offset, {x: 0, y: 0});
var ret = new Vector2D(y*Tile.cw + x*Tile.cw -offset.x, -x*Tile.ch + y*Tile.ch -offset.y -z*16);
ret.y += (Tile.height*this.h)/2; //center the map on screen
return ret;
}
Now, I need to be able to select tiles, and get map coordinates from screen (mouse) coordinates. I can’t figure out if it’s even possible to just transform the coordinates somehow (all my attempts failed).
This is what the map coordinate system looks like and how tiles are drawn :
The selection of tiles, would of course, have to be pixel perfect, but just for flat tiles (don’t need to select trees that go over the tile above), so the algorithm can assume that all tiles are flat (like the one I gave as an example). Does anyone have any ideas on how to do this? I could “brute-force” it, by transforming the tile at [0,0] to screen space, and seeing if the pointer is in it, or how far it is, then slowly walking tile-by-tile until I find a tile that contains the mouse coordinates (or no tile that does), but I’m looking for a more elegant solution, if one exists.
Does anyone have any ideas?
Thanks.
Take a look at this article for an in-depth treatment of hexagonal grids: http://playtechs.blogspot.com/2007/04/hex-grids.html
There’s a section on how to convert rectangular coordinates to hexagonal coordinates. You can easily adapt his method to your “isometic hexagon tiling” by adding an extra affine transformation converting your hexagons into regular hexagons.