I'm generating an isometric tile map using a diamond pattern:

tileWidth = 128;
tileHeight = 94;

for (var x = 0; x < rows; x++) {
  for (var y = 0; y < cols; y++) {
    var screenX = (x - y) * tileWidthHalf;
    var screenY = (x + y) * tileHeightHalf;
    drawTile(screenX, screenY);
  }
}

This renders correctly, but now I'm having trouble converting screen coordinates (mouse location) back to the isometric coordinates.

I've tried reversing the math:

var x = _.floor(screenY / (tileWidth / 2) - (screenX / tileWidth / 2));
var y = _.floor(screenY / (tileHeight / 2) + (screenX / tileHeight / 2));

It works fine for the 0, 0 tile but fails to produce the right value afterwards.

I'm just unable to e up with the right math - am I missing something trivial or am I just all wrong about the process?

I'm generating an isometric tile map using a diamond pattern:

tileWidth = 128;
tileHeight = 94;

for (var x = 0; x < rows; x++) {
  for (var y = 0; y < cols; y++) {
    var screenX = (x - y) * tileWidthHalf;
    var screenY = (x + y) * tileHeightHalf;
    drawTile(screenX, screenY);
  }
}

This renders correctly, but now I'm having trouble converting screen coordinates (mouse location) back to the isometric coordinates.

I've tried reversing the math:

var x = _.floor(screenY / (tileWidth / 2) - (screenX / tileWidth / 2));
var y = _.floor(screenY / (tileHeight / 2) + (screenX / tileHeight / 2));

It works fine for the 0, 0 tile but fails to produce the right value afterwards.

I'm just unable to e up with the right math - am I missing something trivial or am I just all wrong about the process?

• javascript
• math
• game-engine
• pixi.js

• Future visitors: Nico's solution (the accepted solution) is the only one that works for me out of many different solutions found on the internet. I am following the article clintbellanger/articles/isometric_math - You MUST substitute screenX with (screenX - tileWidthHalf) as suggested in Nico's answer. See my ment in Nico's answer. Be sure to floor the results. – shell Commented Nov 5, 2019 at 18:39
• Nico's solution is correct, but remember you must use FLOATS for screenx, screeny, tileWidthHalf, and tileHeightHalf or there is not enough precision. I was using ints and it did not work correctly. Changed these to floats and it works perfectly. – chewinggum Commented Apr 13, 2020 at 5:27

2 Answers 2

I don't see how you came up with this solution. You have to solve the system of equation, which gives the following solution:

x = 0.5 * ( screenX / tileWidthHalf + screenY / tileHeightHalf)
y = 0.5 * (-screenX / tileWidthHalf + screenY / tileHeightHalf)

If you need the tile index, use floor as in your code.

I can only guess what your alignment of the tiles in the coordinate system looks like. But from the screenshot you posted in the ments, I assume that you need to swap screenX with (screenX - tileWidthHalf) to get accurate values.

I'm writing w for your tileWidth and h for tileHeight. Using this notation, you essentially have

screenX = (x - y)*(w/2) = (w/2)*x + (-w/2)*y
screenY = (x + y)*(h/2) = (h/2)*x + (h/2)*y

This is a linear transformation which you can also write in matrix notation like this:

⎛x⎞ ↦ ⎛w/2 -w/2⎞ ⎛x⎞
⎝y⎠   ⎝h/2  h/2⎠ ⎝y⎠

To reverse the operation you need to invert this. There is a simple formula for the inverse of a 2×2 matrix. Swap the top left and bottom right entries. Negate the other two. Divide everything by the determinant. Use that and you have the inverse transformation:

⎛x⎞ ↦ 2/ ⎛ h/2 w/2⎞ ⎛x⎞ = ⎛ 1/w 1/h⎞ ⎛x⎞
⎝y⎠   wh ⎝-h/2 w/2⎠ ⎝y⎠   ⎝-1/w 1/h⎠ ⎝y⎠

So in your notation you get

x = screenY / tileHeight + screenX / tileWidth
y = screenY / tileHeight - screenX / tileWidth

which is essentially what Nico wrote as well. Turning non-integer coordinates back to integers depends on where you place the reference point for each tile.