Help With Rotating Turret and Muzzle Flare Sprites

Question

I am making a top down game that involved tanks rotating their turrets and firing at other tanks.

I have the turrets rotating independently of the tank itself about the center. However, I am now trying to rotate a muzzle flare sprite animation around with the turret.

I am struggling with keeping the muzzle flare at the end of the barrel when the turret rotates.

Here is the two sprites lined up at position (0, 0):

And here is the position I would like the muzzle flare to be at:

The problem is, the muzzle flare does not maintain the offset (45, 8) when the turret rotates.

I have tried using the equations:

x2 = x * cos(theta) - y * sin(theta)

y2 = x * sin(theta) + y * cos(theta)

Where x = 45 and y = 8.

But I have had no luck.

Where is my math wrong?

Answer 1

I assume your flare is positioned correctly at the coordinates (45, 8) with respect to the origin of the tank turret. The problem then should be that the flare does not move along with the turret even though it's orientated correctly. You need to offset the flare with the same offset as the tank turret after rotation.

Example pseudo-code:

tx, ty;  // Turret's points.
fx, fy;  // Flare's points.

// Offset the flare with respect to the turret's origin.
fx = fx + 45;
fy = fy + 8;

theta; // The angle the turret is rotated by.

// Rotate both the turret and the flare.
txr = tx * cos(theta) - ty * sin(theta);
tyr = tx * sin(theta) + ty * cos(theta);
fxr = fx * cos(theta) - fy * sin(theta);
fyr = fx * sin(theta) + fy * cos(theta);

wtx, wty; // Turret's world coordinates.
tx = txr + wtx;
ty = tyr + wty;
fx = fxr + wtx;
fy = fyr + wty;

Generally speaking if you want to attach something to something else so that it transforms (moves, rotates, scales, etc.) with the object it's attached to. What you do is you transform your attached object to where you want it to be relative to the original object, and make sure this object is not transformed by any means. Then when you perform a transformation on the original object you also perform a identical transform on the attached object.

Or said specifically. First move and rotate the flare to where you want it on the tank, this is your new flare. Whenever you rotate and move your tank, apply that movement and rotation to your new flare as well. This gives the illusion of the flare sticking to the tank.

If you wanted to rotate the turret around the turret's center; here is one easy solution. First position the flare without changing the turret or do anything different from above. Then if you want to rotate the turret around a point A, just move the turret so that the point A is at the origin, then do the rotation. And remember any transformation you do to the turret you also do to the flare, so move and rotate the flare by the same amount.

You could say that the flare inherits its transformation from its parent, the turret in this case. If your world were more complex, like the flare had a sparks animation attached to it, then the sparks would inherit its transformation from the flare, which again gets its transformation from the turret which probably gets its transformation from the tank. So you get a tree-structure of parents and children with the world being the root node. So whenever the tank moves 1 unit right, so does the turret, and in turn the flare, and in turn the sparks. So it all moves together. If you rotated only the turret, only its children would be affected, and their children again, and so on... (the flare and the sparks, here)

Note: Remember that all coordinates and rotations in the children are defined in their parent's space, which may or may not be the world/root.