6
\$\begingroup\$

I have a function isoToScreen(x, y) that converts Isometric coordinates to Screen coordinates.

var tileW = 16;
var tileH = 16;

var isoToScreen = function(x, y) {
    var posX = (x - y) * tileW;
    var posY = (x + y) * tileH / 2;

    return [posX, posY];
};

But how would I make a function that converts screen coordinates back to Isometric coordinates?

var pos = screenToIso(16, 8); 
pos[0] = 1; // Iso X
pos[1] = 0; // Iso Y
\$\endgroup\$
1
  • 1
    \$\begingroup\$ I don't understand how this function works... I mean, if you input 0,0, you get 0,0 out, and that's clearly not screen coordinates for any isometric view I understand. \$\endgroup\$
    – livingtech
    Dec 17 '12 at 4:15
8
\$\begingroup\$
var screenToIso = function(screenX, screenY)
{
  var isoX = screenY / tileH + screenX / (2*tileW)
  var isoY = screenY / tileH - screenX / (2*tileW)

  return [isoX, isoY];
}

To get this function you need to rewrite the original math

screenX = (isoX - isoY) * tileW
screenY = (isoX + isoY) * tileH / 2

Starting with the first line you get the following:

screenX = (isoX - isoY) * tileW
screenX / tileW = isoX - isoY
screenX / tileW + isoY = isoX

The second line:

screenY = (isoX + isoY) * tileH / 2
2*screenY = (isoX + isoY) * tileH
2*screenY / tileH = isoX + isoY
2*screenY / tileH - isoX = isoY

Now the two lines look as follows:

A) isoX = screenX / tileW + isoY
B) isoY = 2*screenY / tileH - isoX

Then substitute isoY in the line A, with the formula derived from line B:

isoX = screenX / tileW + 2*screenY/tileH - isoX
isoX+isoX = screenX / tileW + 2*screenY/tileH
2*isoX = screenX / tileW + 2*screenY/tileH
isoX = screenX / (2*tileW) + screenY/tileH
isoX = screenY/tileH + screenX / (2*tileW)

And finally, substitute isoX in line B, with the formula derived from line A:

isoY = 2*screenY / tileH - screenX / tileW - isoY
2*isoY = 2*screenY / tileH - screenX / tileW
isoY = screenY / tileH - screenX / (2*tileW)

Solving linear equations comes very much in handy for a lot of programming, especially graphics or game related programming. Pick up a book on Algebra or read some online tutorials, you will thank yourself later.

\$\endgroup\$
1
  • \$\begingroup\$ I know I am not good in math, and this page clearly proof it! Great! \$\endgroup\$
    – swdev
    Dec 17 '13 at 14:10
3
\$\begingroup\$

Just reverse the order of operations:

var tileW = 16;
var tileH = 16;

function screenToIso(x, y)
{
    var posX = ((y * 2 / tileH) + (x / tileW))/2;
    var posY = (y * 2 / tileH) - posX;

    return [posX, posY];
}
\$\endgroup\$
2
  • \$\begingroup\$ Thanks for reply and code! I am try this code, but... isoToScreen(10, 0); -> 160, 80. screenToIso(160, 80) -> 90, -150; :( \$\endgroup\$
    – Veyha
    Jun 14 '12 at 2:31
  • \$\begingroup\$ Whoops, you're right. Fixed \$\endgroup\$
    – Telanor
    Jun 14 '12 at 3:04

You must log in to answer this question.

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