How to calculate the index of the tile underneath the mouse in an isometric world taking into account tile elevation

Question

I have a tile-based isometric world and I can calculate which tile is underneath specific (mouse) coordinates by using the following calculations:

function isoTo2D(pt:Point):Point{
  var tempPt:Point = new Point(0, 0);
  tempPt.x = (2 * pt.y + pt.x) / 2;
  tempPt.y = (2 * pt.y - pt.x) / 2;
  return(tempPt);
}

function getTileCoordinates(pt:Point, tileHeight:Number):Point{
  var tempPt:Point = new Point(0, 0);
  tempPt.x = Math.floor(pt.x / tileHeight);
  tempPt.y = Math.floor(pt.y / tileHeight);
  return(tempPt);
}

(Taken from http://gamedevelopment.tutsplus.com/tutorials/creating-isometric-worlds-a-primer-for-game-developers--gamedev-6511, this is a flash implementation but the maths is the same)

However, my problem comes in when I have tiles that have different elevation levels:

In these scenarios, due to the height of some tiles which have a higher elevation, the tiles (or portions of tiles) behind are covered up and shouldn't be able to be selected by the mouse, instead selecting the tile which is in front of it. How can I calculate the tile by mouse coordinates taking into account the tiles' elevation?

I'm using a javascript and canvas implementation.

Answer 1

There is a technique of capturing object under the mouse on a canvas without needing to recalculate mouse coordinates into your "world" coordinates. This is not perfect, has some drawbacks and restrictions, yet it does it's job in some simple cases.

1) Position another canvas atop of your main canvas and set it's opacity to 0. Make sure your second canvas has the same size and overlaps your main one.

2) Whenever you draw your interactive objects to the main canvas, draw and fill the same objects on the second canvas, but using one unique color per object (from #000000 to #ffffff)

3) Set mouse event handling to the second canvas.

4) Use getPixel on the second canvas at mouse position to get the "id" of the object clicked/hovered over.

Main advantage is WYSIWYG principle, so (if everything is done properly) you can be sure, that objects on the main canvas are in the same place as on the second canvas, so you don't need to worry about canvas resizing or object depth (like in your case) calculations to get the right object.

Main drawback is need to "double-render" the whole scene, yet it can be optimized by not drawing on the second canvas when it's not necessary, like:

• in "idling" scene state, when interactive objects are staying on their places and wait for user action.

• in "locked" scene state, when some stuff is animated or smth. and user is not allowed to interact with objects.

Main restriction is a maximum number of interactive objects on the scene (up to #ffffff or 16777215 objects).

So... Not reccomended for:

• Games with big amount of interactive objects on a scene. (bad performance)

• Fast-paced games, where interactive objects are constantly moved/created/destroyed.(bad performance, issues with re-using id's)

Good for:

• GUI's handling

• Turn-based games / slow-paced puzzle games.

Answer 2

Your hit test function will need to have access to all your tiles in order to determine which one is hit. It will then perform test hits starting with the tallest elevation.

Assuming that you only have discreet (integer) tile heights, the general algorithm would be like this (pseudo code, assuming that tiles is a two-dimensional array of object with an elevation property):

function getTile(mousePt, tiles) {
    var maxElevation = getMaxElevation(tiles);
    var minElevation = getMinElevation(tiles);
    var elevation;
    for (elevation = maxElevation; elevation >= minElevation; elevation--) {
        var pt = getTileCoordinates(mousePt, elevation);
        if (tiles[pt.x][pt.y].elevation === elevation) {
            return pt;
        }
    }
    return null; // not tile hit
}

This code would need to be adjusted for arbitrary elevations and could be optimized to skip elevation that don't contain any tiles.

Note that my pseudocode ignores vertical sides of a tile and clicks on them will select the (lower elevation) tile obscured by the vertical side. If vertical tiles need to be accounted for, then a more generic surface hit detection approach will be needed. You could visit every tile (from closest to farthest away) and test whether the mouse coordinates are in the "roof" or in one of the viewer facing "wall" polygons.