Isometric Tile Selection with rectangular bounding boxes

Question

I am having problems trying to determine which tile I have selected with the mouse.

Currently it selects two tiles, rather than one. Producing the following results:

My tiles height, is half their width, and all tiles have the same dimensions.

The tiles are rectangles and their Cartesian position has been translated to a relative isometric position.

Because I am checking the mouse position with the sprites bounds, it will select two tiles, as demonstrated in the image below:

I suppose my question is, how to I determine that my mouse x/y is within the 'diamond' of the rectangle?

Answer 1

This is how the original Civ 1 does it:

It separates the world into rectangles as you do, each rectangle's width and height is the same as the maximum width and height of a tile.

When you click on the screen, it gets the relative position if the mouse from the current rectangle's top-left corner and gets the color from the following image with thise relative coordinates.

Based on the cootrdinate, it can determine the currently picked tile.

How you should do it

An isometric tile is a square rotated 45 degrees and scaled vertically to ½.

By reversing this you can transform the mouse's position to a grid. If you divide these coordinates with the height of the tile then you get the currently picked tile.

Answer 2

This is a shot in the blind, but I can see two potential solutions:

Per-pixel collision detection: This is probably too much for the job, but using per-pixel collision detection would solve the issue, as only one tile would have opaque pixel under the cursor at a time.

Distance: When multiple tiles could be selected, calculate the absolute distance ( sqrt((x2-x1)^2 + (y2-y1)^2) ) between the cursor and the centre of the tile. The tile under the cursor will be the one that's the closest.