# How to 2D shadow image transformations

I'm writing a 2D top-view game and I will have to draw shadows. Sun will always be at North-West. My game has, for example, tanks. I have tank image and tank's shadow image:

My idea is to draw first the shadow image, then (on top of shadow), the tank image. Like the left part of previous image.

But, when my tank rotates, I simply rotate the tank by its center. But how to transform the shadow image according to the north-west sun ? Is there a classic 2D game algorithm for that ?

• Presumably you started by applying the same rotation to your shadow, before you offset it? Did you find any cases where this did not yield the desired appearance? If so, show us those cases, and the code you're using to generate them. Mar 24 at 19:32
• Maybe I'm wrong, but, if I rotate for example, tank and shadow by 180°, shadow will be north west oriented. But sun is north west.
– bux
Mar 24 at 20:54
• Or I completely mistake. You're probably right. :S
– bux
Mar 24 at 20:55
• It sounds like you should test your method first, and find out what happens. Then ask here if the result looks wrong. Mar 24 at 21:03

## 2 Answers

Order of rotation and offset is the key.

I presume you had tried the following wrong order and it didn't work right:

1. Offset (!) the shadow
2. Rotate (!) the shadow
3. Draw the shadow
4. Rotate the tank
5. Draw the tank

This would be the correct order:

1. Rotate the shadow
2. Offset the shadow
3. Draw the shadow
4. Rotate the tank
5. Draw the tank

Note that the shadow offset may depend on the objects vertical position (height) - e.g. airborne vehicle's (or jumping tanks's) shadow offset will be larger.

Sun will always be at North-West.

As I can see, the shadow you use is no different from the tank itself, and it has a fixed position (relative to the tank) so you may consider using a Shadow component and changing the offset value a bit so it will look as if the sun in at north-west.

• Your answer is about a solution for Unity, but OP didn't specify what technology they're using. Mar 25 at 9:48
• @liggiorgio you're right. funny enough, I thought I've seen a unity tag on this question😅 Mar 25 at 10:11