mathematics - Getting isometric grid coordinates from standard X,Y coordinates

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

After a few days of researching, I found a solution to this particular transform. This is much more mathematical than program-oriented. Therefore, I will be using pseudo code.

Now, given a screen coordinate (x,y), we first want to represent (x,y) respected, or fixed, to the world, not the screen. For example, my game use the top-left most corner of isometric map as (0,0). So anything representation of coordinates in this game will be respected to this world.

Therefore, the new coordinate is calculated like this:

inputWorldCoordXY = inputScreenCoordXY - drawOffsetXY

where drawOffset in my program is the screenCoordXY of the top-left most corner of my isometric map.

The reason we do this is because we want an isometric world coordinate system, not isometric screen coordinate system. As of what we have done so far, we have a cartesian world coordinate system, but we want a projected, or isometric, world coordinate system.

To accomplish this, I'd like to start with the theory behind it. In normal cartesian system, any coord point can be represented in form of vector. These vectors have vector's component, which can be represented by what we called basis vector. In 2D cartesian coord, we have two basis vector i and j, representing x and y respectively.

For a better clarification, the following point can be expressed as vector v which can be represent as a sum of cartesian basis vectors 3i+4j:

So, how does this relate to isometric coord system? Well, the concept is the same, in any isometric coordinate system, any point can be represent in form of vector components, where the basis vectors are parallel with isometric axis:

Let the isometric basis vectors be U,V respectively.

Let vectorW be a vector representation of the point of unknown coordinate system. This vector can be represented with either sum of cartesian components or isometric components. These two ways of representing produce the same vector.

vectorW = cartesianPointX*i + cartesianPointY*j = isometricPointX*U + isometricPointY*V

Now, given that we already know where the point lies in cartesian coordinate and representation of vector U and V in term of cartesian i j. What we want to find is the isometric counterpart of this point: isometricPointXY, which is our desired isometric coordinate. Now, with U,V, and W in term of i j, which enable them to dotproduct each other and produce scalar quantity. We can use this property to produce 2 simultaneous equations:

let A.B be A dotproduct B, from equation above

W.U = isometricPointX * (U.U) + isometricPointY * (U.V)
W.V = isometricPointX * (U.V) + isometricPointY * (V.V)

Dotproduct produce scalar value, or constant. Therefore, we have a simultaneous equation, which can be solve using any mathematical method of your choice--- I prefer cramer rule.

Another thing to point out is the magnitude of U and V will expand or compress your isometric coordinate.

For example, if I define u and v to exactly cover 1 full isometric tile, then (1,1) would be the same thing as 1u + 1v which is the bottom-right corner of the first tile in my isometric system, where top-left most is the origin.