27 Sep 2015, 06:48

Isometric Rendering, Mouse Cursor

Isometric Rendering, Mouse Cursor

Some Thoughts

The picking is shockingly accurate without the use of an offscreen colored image. There is one pictured here, 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