sheenobu dot net

Isometric Rendering, Mouse Cursor - 2015-09-27

Some Thoughts

The picking is shockingly accurate with the use of an offscreen colored image. There is one pictured here (LINK DEAD AS OF 2021), shown as the red, blue, yellow, green, and white isometric image.

There is some jitter when going between locations but we can eventually avoid that by providing a delay between entering the tile and “picking” the tile.

Some Math

The isometric tiles are rendered:

XPos = MapOffsetX + 32 * Column - 32 * Row
YPos = MapOffsetY + 16 * Row + 16 * Column

And the reverse is done during mouse picking:

XPos = MouseX - MapOffsetX
YPos = MouseY - MapOffsetY + (Height*TileHeight)

Row = math.floor((YPos + XPos/2)/32 + .5) - 1;
Column = math.floor((YPos - XPos/2)/32 + .5);

To compensate for height, I get the pixel value of the height map canvas (usually drawn offscreen):

TileHeight = Pixel Height of tile between top plane and bottom plane (around 5 pixels)
Height = (255 - greyValue) / 15