How do I go from world coordinates (X/Y) to tile coordinates?

Question

So, I've got this game rendered in fake isometric view with the following code for generating the mesh:

_x = x + ( y & 1 > 0 ? 0 : 0.5 );
_y = y * 0.25;

ADD_VERTICES( [
        _x-0.5,  _y,      0,  _uv[0], _uv[3], //B
        _x,      _y+0.25, 0,  _uv[0], _uv[1], //A
        _x+0.5,  _y,      0,  _uv[2], _uv[1], //C

        _x+0.5,  _y,      0,  _uv[2], _uv[1], //C
        _x,      _y-0.25, 0,  _uv[0], _uv[1], //D
        _x-0.5,  _y,      0,  _uv[0], _uv[3], //B
] );

Which creates quads (2 triangles really) with the following corners:

0 0 [0.5, -0.5  -   0, 0,       -   0.5, 0.5    - 1, 0]
1 0 [1.5, -0.5  -   1, 0,       -   1.5, 0.5    - 2, 0]
0 1 [0, 0       -   -0.5, 0.5   -   0, 1        - 0.5, 0.5]
1 1 [1, 0       -   0.5, 0.5    -   1, 1        - 1.5, 0.5]

I can get the world coordinates from the mouse position, how ever, I can't for the life of me figure out how to get from world coordinates back to tile coordinates. What is the algorithm for that? (Or, how can I change the vertices around so that that is easier)

Simply invert the matrix - either by hand, or by invoking a Math library and printing the result. — Pieter Geerkens, Aug 30 '15 at 23:38
Sure @pieter, what matrix though? As shown above, no matrices involved... — Elva, Aug 31 '15 at 07:31
As It seems, you have tiles with equal height and width that both are 1, am I right? — Iman Nia, Sep 01 '15 at 13:48
@Iman They are 1 wide and a half tall actually (but unit size is just a reversible transformation away of course). — Elva, Sep 01 '15 at 13:56
ok, I get it, You have chosen the hardest isometric coordinate system which makes all the transformation very hard of course, is it possible to change the tile map to something like this http://i.stack.imgur.com/QQKfB.png — Iman Nia, Sep 01 '15 at 14:02
Yeah, I mean. That's just doubling the Y axis before selection and then halving it afterwards =p — Elva, Sep 01 '15 at 14:04

Iman Nia · Accepted Answer · 2015-09-01T15:11:32.360

First You need to re-organize numbering your tiles in an Isometric map it is much easier to defined the isometric axis along to tiles lats.

Like This

Tiles Coordinate System

Take a look at the following tutorial which is the best one that I found on the Internet, there is alot of isometric map math tutorial on the web but this guy is a prophet!

http://clintbellanger.net/articles/isometric_math/

as the tutorial says you may transform map coordinate to isometric coordinate via the following equations

screen.x = (Isomap.x - Isomap.y) * TILE_WIDTH_HALF;
screen.y = (Isomap.x + ISomap.y) * TILE_HEIGHT_HALF;

since your tiles have equal width and height its a bit easier but I used this tile size : (36,24) which has a better look, but still camera location is high enough so all the elements on the map can be viewed without much overlap

My Game

However the above formula may need to be changed a little bit since the origin of tiles coordinate system is the above point of the first tile from top, But you may use the center of the top tile as a your origin, I personally used lower left vertex of MBB of the top tile as origin So I had to translate (move) the coordinate halfwidth,halfHeight so this was mine :

func project(Cartesian screen : CGPoint) -> CGPoint {
    let TILE_WIDTH_HALF = (tileWidth / 2)
    let TILE_HEIGHT_HALF = (tileHeight / 2)
    let movedScreen = CGPointMake(-1, -1) * (screen - CGPointMake(tileWidth,tileHeight))
    let mapx = ((movedScreen.x / TILE_WIDTH_HALF) + (movedScreen.y / TILE_HEIGHT_HALF)) / 2;
    let mapy = ((movedScreen.y / TILE_HEIGHT_HALF) - (movedScreen.x / TILE_WIDTH_HALF)) / 2;
    return CGPointMake(mapx+0.5, mapy+1.5)
}

if you look deeper you see that I am inversing Y before and after of Tile 2 Map transformations formula since in iOs y ascends by going up on screen but in tutorial y descends by going up.

So if you are write your game for a mobile device you need to do it too

At the end of my function I have added 0.5,1.5 to what is suppose to be my tiles coordinate system.

As you see, it is a little bit confusing and depending on how you have drawn your tiles and y positive direction is up or down, you need to change the basic formula in the tutorial slightly. Sorry that I can not provide you the exact equation but I can show you how to do it. (find your own equations)

write down the basic formula but add an Tx and Ty to both equations, you need to find what is Tx and Ty is in your case. To find out what they are just write the equations for two different tiles (eg. Tile 0,1 and tile 1,1) as you did in your question above. afterwards you will have a complete equation.

    screen.x = (Isomap.x - Isomap.y) * TILE_WIDTH_HALF + Tx;
    screen.y = (Isomap.x + ISomap.y) * TILE_HEIGHT_HALF+ Ty;

And here it is my reverse code, if you compare it with the tutorial you will see that it has slightly changed too. and you have to find your own by the skill you just gained above.

func unproject (tileIndex tileIdx : CGPoint) -> CGPoint
{
    let TILE_WIDTH_HALF = (tileWidth / 2) // 16
    let TILE_HEIGHT_HALF = (tileHeight / 2) // 12

    let screenX = TILE_WIDTH_HALF * (tileIdx.y - tileIdx.x + 1)
    let screenY = 24 - TILE_HEIGHT_HALF * (tileIdx.x + tileIdx.y)
    return CGPointMake(screenX, screenY)

}

Sweet! That's an awesome answer. I'll implement it when I get home and accept then :) Thanks. — Elva, Sep 01 '15 at 15:00

How do I go from world coordinates (X/Y) to tile coordinates?

1 Answers1