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:

enter image description here

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:

enter image description here

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


2 Answers 2


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.


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.

  • \$\begingroup\$ The distance-based metric suggested here will effectively select a cell from the Voronoi diagram of the points. Unfortunately, for an isometric map, the Voronoi diagram of the tile centers is a hexagonal grid — not the grid of rhombuses you actually want to select within, causing mismatches in the selected tile. You can fix this by scaling the y axis before computing the distance. \$\endgroup\$
    – DMGregory
    Jan 8, 2016 at 13:17

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .