Getting isometric grid coordinates from standard X,Y coordinates

Question

I'm currently trying to add sprites to an isometric Tiled TMX map using Objects in cocos2d. The problem is the X and Y metadata from TMX object are in standard 2d format (pixels x, pixels y), instead of isometric grid X and Y format. Usually you would just divide them by the tile size, but isometric needs some sort of transform.

For example on a 64x32 isometric tilemap of size 40 tiles by 40 tiles an object at (20,21)'s coordinates come out as (640,584)

So the question really is what formula gets (20,21) from (640,584)?

Answer 1

Straight from cocos2d's CCTMXLayer source code:

-(CGPoint) positionForIsoAt:(CGPoint)pos
{
    CGPoint xy = {
        mapTileSize_.width /2 * ( layerSize_.width + pos.x - pos.y - 1),
        mapTileSize_.height /2 * (( layerSize_.height * 2 - pos.x - pos.y) - 2),
    };
    return xy;
}

Answer 2

Wikipedia's isometric projection article is your friend here. In the maths section:

cx   | 1  0  0 |  | c' 0 -s' |  ax
cy = | 0  c  s |  | 0  1  0  |  ay
cz   | 0 -s  c |  | s' 0  c' |  az

Where c is the vector you get by rotating a through some angle alpha (first matrix) and then beta (second matrix), s = sin(alpha), c = cos(alpha), s' = sin(beta), c' = cos(beta). You then project that onto 2d by pre-multiplying c:

vx   | 1 0 0 |  cx
vy = | 0 1 0 |  cy
vz   | 0 0 1 |  cz

Combining all these matrix transforms into one:

vx   | c'  0  -s' |  ax
vy = | ss' c  sc' |  ay
vz   | 0   0   0  |  az

To get the transform in numbers, use your own values of alpha and beta to generate the coefficients.