How to cast shadows that change with time

  • 27 favourites


Attached Files

The following files have been attached to this tutorial:



Download now 209.83 KB


4,102 visits, 8,095 views



This tutorial hasn't been translated.


This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

The Shadow

Image design

I created one generic ellipse to act as a shadow for all of my actors, but in a complex game I don’t see how this could easily work. However, this is a demo so I can get away with it – and I chose the shape of the shadow and the shape of the actors to roughly match. The shadow image origin is set to a position where I imagine the shadow would touch or be just inside the base of whatever object was casting it. That way it can easily be rotated to match the sun's position without causing any odd visual effects.

Shadow Control

All of the shadows are created at the start of the layout and positioned to each member of a shadow caster family. I decided to store the shadow UID in a family variable but you could just as easily use containers for this. There are two groups containing the shadow logic in the event sheet in the demo capx - neither is perfect but hopefully one will be suitable for your needs. Group Option 1 (disabled on download) sets all shadows to a shadow layer and sets that layer to 40% opacity. The position of that layer puts all shadows underneath all objects. That means shadows can overlap without shadow addition/darkening but the shadows don't cast onto the other objects as you would expect. Group Option 2 (the one that is enabled because it's my favorite) places the shadows and objects into the same layer and orders their z position according to their y position to allow overlapping of shadows and objects for a more realistic depth impression (my opinion; thanks to AnD4D for the advice here).

Every tick we want the shadows to be positioned to their respective caster object’s 'shadow' image point and their angles to be set to the reciprocal of the sun's azimuth. The length of the shadow is determined by the elevation of the sun and the height of the object casting the shadow. I chose not to use each object's image height and width for this because those values could cause odd effects if the object is drawn with some depth / perspective - a larger height or width value could cause the shadow’s size to appear as if it didn’t belong to the object that was casting it. In draft 1 of this tutorial the obstacles in the layout were cubes so this feature was necessary (I couldn’t get the cubes to look right for public release and so I ended up with strange tall pebbles instead). So, for this demo, I had to manually enter the height and width values into the family variables.

Each shadow’s apparent length is then controlled by setting the shadow sprite’s width. Just stretching and shrinking the spirit width is not enough to complete the effect - at high sun elevations the shadow looked oddly wide without the addition of an extra function to control the apparent width of the shadow depending on sun elevation.

I hope that all of this contradictory use of ‘width’ and ‘height’ not to confusing! As mentioned before, I found that I needed to limit the maximum length of the shadow so that long shadows didn’t take over the whole layout at low sun elevations. To do this, shadows are not cast when the sun elevation factor is below 0.16 (just a value I found by trial and error to give the appearance I wanted).


  • Order by
Want to leave a comment? Login or Register an account!