I am working on my first isometric game, and I am not sure how to go about angles and rotation. Basically, I want the player's forward movement and rotation to coincide with the isometric angles.

I drew an image to represent what I am talking about. Isometric Angles

The player's movement is based on the direction they are pointing. Being an isometric game, there are many sprites in the player rotation animation, and I want the sprites to match up with a certain rotation. Since the rotation of an isometric sprite is different to a straight 2D sprite, I'm not sure how to implement this. Any help would be appreciated.


Keep your world coordinates, movement, and rotation on a standard X/Y coordinate grid (like your leftmost image) and then convert those coordinates to isometric coordinates via linear transformation before rendering.

This question has some good answers on how you might make that conversion.

As far as how you would rotate your sprites, assuming they're 2D bitmaps you would just have the "up" frames be rendered/drawn such that they're facing in the isometrically "up" direction. In other words, the sprite faces that way because it's drawn that way. This means all of your art is going to be drawn angled, not facing straight ahead or what-have-you. (Example: "Up" is the sprite facing towards the northwest corner of the screen.)


I had this same issue, I was using sprites with 8 different directions of movement. Here's how I detected which direction they were moving in:

The way the sprite is facing depends on the direction they were last moving in. You can find the direction of sprite movement by performing some calculations on their original coordinates, and the coordinates of their destination.

First, imagine there are four quadrants around your sprite. NorthWest, SouthWest, SouthEast and NorthEast. You can detect which one the sprite is moving towards by comparing the X and Y coordinates of their current position to those of their destination. For example, if X is less, and Y is more than their current point, we know that they are moving in a SouthEastern direction.

Next, you need to use some trigonometry. To find the angle that your sprite is moving, draw an imaginary right-angled triangle between the sprite and the destination. The length and width of this triangle are found by comparing the coordinates. For example, currentXPosition - destinationXPosition. Sometimes the result will be a negative value. This can't be used, so you have to convert it to a positive, or find its absolute value.

In this triangle, we know the length of the two sides (they are called the opposite and adjacent), so to find the angle you use ArcTan in the calculation. This will return an angle in radians, all you have to do then is convert it into degrees.

So now you have a movement angle. It will never be more than 45 degrees. Now you need to place this angle in a 360 degree space to find which direction your sprite is facing.

Because you know which quadrant the destination coordinates are in, you know one of four possible directions. This tells you how much angle you should add. For example, if I know the sprite is facing toward the North West quadrant, I have to add 270 degrees to my current angle. If they are moving toward the North East, I add zero. If they are moving toward the South East, I add 90 degrees to my angle. And so on.

The rest is easy, just using conditions to find out which of the eight different animations should be played based on if they are moving N, NW, W, SW, S, SE, E or NE.

Eg. They're moving toward the South East quadrant, so you add 90 to the angle. -If they are moving South East but the angle is less than 120, they are moving East. -If the angle is greater than 120 but less than 150, they are moving South East. -If they are doing neither of these things, they must be moving South.

I hope this is easy to understand and that it helps.

You can also find the distance that they move by calculating the hypotenuse side of the triangle.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.