I am working on an isometric grid based game and im having an issue trying to link a mouse click from the user to a tile. I have been able to split the problem into 2 parts :

  • Finding a rectangle that surrounds a tile (which I have been able to do)
  • Figuring out from the rectangle which tile the click landed in (has got me stumped)

Here is an example of a rectangle with tiles on the inside:

Rectangle containing tiles

The rectangle is 70px long and 30px high so if i use an input of say 30x(top)/20y(left) how would I go about determining which tile this fell into?

  • 3
    \$\begingroup\$ Possible duplicate: gamedev.stackexchange.com/questions/12362/… \$\endgroup\$ – thedaian Jun 29 '11 at 2:35
  • \$\begingroup\$ What about a coordinate change and then a check? If your tile where slices of ring, you surely would use a polar coordinate system. \$\endgroup\$ – FxIII Jun 29 '11 at 12:22

For each step you make in x direction you will move 35px left and -15px up to your canvas;

For each step you make in y direction you will move -35px left and -15px up to your canvas;

tile to cartesian

This means that you can convert your tile coordinate system easely in pixel:

(x,y) => (35·x,-15·x) + (-35·y, -15·y) = (35·x - 35·y, -15·x - 15·y) = (Xpx,Ypx)

You have to resolve the inverse problem you know Xpx and Ypx and you want to know x and y (in tile coordinate).

Xpx = 35·x - 35·y ;

Ypx = -15·x - 15·y ;

can you solve this?it should be:

x = 1/70·Xpx - 1/30·Ypx

y = -1/70·Xpx - 1/30·Ypx

Obviously you will have non integer values in general case: taking the ceil of both x and y will gives you the coordinate of the whole tile.

  • \$\begingroup\$ the rectangle is 70px long, then the step is 35px and not 30px (in horizontal) \$\endgroup\$ – CeeJay Jun 29 '11 at 13:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.