Position of points in an isometric image after rotation

Question

I'm developing a game using isometric images for the units. Each units has weapons represented in red on the first image below.

To attach animations to the weapons, I have to be able to calculate the position of each of those points after a rotation of X degrees (units move in 8 directions).

The isometric view is set with an angle of 45 degrees top down :

Points on the image for the main angle

My goal is to find a way to manually spot the red dots on one angle, and then apply a mathematical transformation to get the position of those points for all others angles.

Image after a rotation Image after an other rotation

I have no clue on how to approach the problematic and I'd be happy to get some help here !

The 3 images are properly scaled if you want to give it a try.

Here is the first point coordinates in pixels on each image, from the top left corner (0,0) :

Point A - 0 degree rotation : (89,522)
Point A - 45 degree rotation : (573,550)
Point A - 90 degree rotation : (609,207)

So the goal is to have (89,522) and deduce (573,550) and (609,207) from that.

Thanks a lot !

G.

Edit :

It seems that a rotation on one frame around a given center point would not work as shown in that picture, probably because of the 45 degree top down angle.

Answer 1

You need to know not just the angle of the rotation, but also what axis the rotation is about. A 30 degree rotation about the x-axis is going to give a much different location than a 30 degree rotation about the y-axis. And a rotation about the y-axis passing through the ankles is going to give a different result than the same rotation about the y-axis passing through the shoulders.

Game developers tend to prefer quaternion to matrix notation for these rotations, and I find it hard to believe you don't already such rotations built into your application. If you really haven't worked out how to move the camera around, then I urge you to put aside your immediate problem and start working your way through the wealth of material out there that explains how it's done, because it is far more than I (or anyone else) can adequately explain in a forum post.

I don't have much need for 3D rotations, so I never remember how quaternion rotation works, but if you are interested, this is how it works by vectors:

Suppose you want to rotate the point $\mathbf p$ by $\theta$ degrees about the axis passing through the point $\mathbf q$ and extending in the direction of the vector $\hat n$, where $\|\hat n\| = 1$, and $\theta$ is positive when rotating in the same direction as the fingers of your right-hand curl when your extended thumb points in the direction of $\hat n$.

Let $\mathbf o = \mathbf q + ((\mathbf p - \mathbf q)\cdot \hat n)\hat n$ and let $\vec p = \mathbf p - \mathbf o$ be the vector pointing to $\mathbf p$ from $\mathbf o$. Then $\mathbf o$ is the point on the axis of rotation that is closest to $\mathbf p$, and $\vec p$ is perpendicular to $\hat n$. Let $\vec r = \hat n \times \vec p$. The rotated point that you want is

$$\mathbf p' = \mathbf o + \vec p\cos \theta + \vec r\sin\theta $$

---

FYI - the reason for the somewhat unusual mixture of bold and $\to$ notation is that the bold letters represent points in space, while $\vec v$ represents a vector (direction and magnitude only). And the hat notation $\hat n$ is a common way of denoting unit vectors.