# How to convert 3D coordinates to 2D Isometric Coordinates?

I wanted to make an isometric game which has a bouncing ball.

I assume that there is a way I can "show" a jumping motion in isometric, since it has been done before, but I was unable to find the maths/formulae which will help me depict this (Z-axis)motion.

If you know how i could do this please share.

Thank you :D

PS: If this sounded a bit confusing to you, just ask me in the comments.

You can represent the transformation between 3D world coordinates to 2D screen coordinates as a projection matrix:

$$\begin{bmatrix} x\\ y\\ z \end{bmatrix} = \begin{bmatrix} X_x & Y_x & Z_x & T_y \\ X_y & Y_y & Z_y & T_y \\ X_z & Y_z, & Z_z & T_z \\ \end{bmatrix} \cdot \begin{bmatrix} X \\ Y \\ Z \\ 1 \end{bmatrix}$$

Here [x, y, z] is the screen-space projected position of the world-space point [X Y Z], where x & y are the horizontal & vertical pixel positions, and z is the depth (which you can use for sorting, etc). [Tx Ty Tz] is the on-screen position of the world origin (0, 0, 0).

You can think of splitting this matrix into its three columns as separate vectors:

• $(X_x, X_y, X_z)$ is the screenspace projection of the X+ unit vector in worldspace (1, 0, 0)
• $(Y_x, Y_y, Y_z)$ is the screenspace projection of the Y+ unit vector in worldspace (0, 1, 0)
• $(Z_x, Z_y, Z_z)$ is the screenspace projection of the Z+ unit vector in worldspace (0, 0, 1)

For a true isometric projection, where Z is up, your vectors might look like this:

• $(X_x, X_y, X_z) = \frac {\text {size}} 2 \cdot (\sqrt 3, -1,\frac {-1} {\sqrt 2})$
• $(Y_x, Y_y, Y_z) = \frac {\text {size}} 2 \cdot (-\sqrt 3, -1, \frac {-1} {\sqrt 2})$
• $(Z_x, Z_y, Z_z) = \frac {\text {size}} 2 \cdot (0, 2, \frac {-1} {\sqrt 2} )$

Where size is the on-screen length of your worldspace unit vector (eg. the length of a tile's diagonal)

For a 2:1 dimetric projection (commonly used in games to get neat integer tile sizes, without the irrational numbers in a true isometric projection), you might use something like this instead:

• $(X_x, X_y, X_z) = \text {size} \cdot (1, \frac {-1} 2,\frac {-1} {2 \sqrt 2})$
• $(Y_x, Y_y, Y_z) = \text {size} \cdot (-1, \frac {-1} 2, \frac {-1} {2 \sqrt 2})$
• $(Z_x, Z_y, Z_z) = \text {size} \cdot (0, 1, \frac {-1} {2 \sqrt 2} )$

Where size is half the on-screen horizontal width of the tile. Here I left the z-ordering the same as the isometric case, since it's simple and "close enough" ;)

I would like to thank @DMGregory for a detailed explanation.

Initially I did not understand the matrices a lot so after a google search I found the simplified version of the matrices.

Suppose your 2D coordinates are x' and y', and your 3D coordinates are x , y and z.

To convert 3D coordinated to a 2D isometric projection you use the following formulae :

x' = (x-z)/ sqrt(2)

y' = (x + 2y + z) / sqrt(6)

The first thing about game development is not to over thing the thing you are thing to code.

If you want to "show" a jumping motion in an isometric game then break it down in simple parts.

Getting to Destination

I don't know what language or engine you are programming in but I would move your ball from point A to point B. This might be a simple:
'transform = new Vector2(transform.x + 1, transform.y + 1);'

The 'Jumping'

When you are moving to your point, just scale the ball up. That would make the illusion that the ball is jumping. When you are at your end point you would need to revert the scaling back to normal.

var scale = gameobject.localScale; gameobject.localScale = new Vector2(gameobject.localScale.x + 1, gameobject.localScale.y + 1); gameobject.localScale = scale;

• In a truly isometric game (one in which each axis is foreshortened equally), or in similar dimetric/trimetric projections we often lump in with isometric when we're not being too picky about terminology, the height axis of the world is parallel to the vertical axis of the screen. That means just scaling an object isn't enough to make it look like it's rising (in fact, since isometric games don't use perspective projection, scaling an object to represent translation is incorrect in general) - we need to offset its vertical position. – DMGregory Jun 4 '18 at 16:37