Tutorial: How to make a simple object shadow in HTML 5

Hi there!

Gdevelop does not as of yet have a built in light-shadow system, but if you want to have just a simple shadow, you can still do that fairly easily. In this tutorial we will create a very simple object shadow system, which will control a little spherical “shadow” object, placed below the main object.

First, here are some animations of the result. Based on the result, you can decide on whether or not this satisfies your project needs before you start doing any of the work. :slight_smile:



(Note that this is an animated gif, so it is low FPS to reduce size).

[size=150]Step 1: Getting the basic images[/size]
We need a player, shadow and light image to have a good test display.

I have created these quick images for testing:

Player/Object:

Shadow:

Light Source:

You can make your own, or get all 3 images here (license is free to use for any purpose, including commercial, no attribution required as long as it is used legally): mega.nz/#!LsYVHKAL!j71pqovqfmMK … dVeCb9HHy8

[size=150]Step 2: Creating objects using those images, and placing them on the map[/size]
Tip: Make sure to give shadow a zdepth below the player/main object, and the light object a zdepth above all else.

[size=150]Step 3: Controlling the shadow object[/size]

Click to zoom in

These 3 lines give us the ability to control the shadow.

Do =10+Object.Distance(Light)*0.1 to variable ShadowDistance

This will give us a minimum distance between the shadow and the light as 10.
So, the minimum distance will be 10 (btw, we can change this to e.g. 0, the value is chosen just randomly).

To this 10, we add a value based on how far away the main object is from the sun, which is this part: Object.Distance(Light)*0.1.

So, the further the object is from the sun, the more distant the shadow will be. This is an attempt to simulate the effect of shadow being longer based on the angle between object and light. In reality, the shadow should also increase in size (and change shape and so forth), but we are not reproducing those 2 effects here.

Do =atan2(Light.Y()-Object.Y(),Light.X()-Object.X()) to variable Angle

This simple calculation will give us the angle between the light and object in radians.

This angle is important later on.

Do X=Object.X()+cos(Variable(Angle))-Variable(ShadowDistance)
Y=Object.Y()+sin(Variable(Angle))
-Variable(ShadowDistance)

Now, we are using the angle variable to move the shadow away from the object a little bit (how much depends on the shadow distance variable, where we actually calculate the distance between the light and object).

But in which direction do we move the shadow? We move it in the line (angle) between object and sun, but in the opposite direction (so not from object to sun, but from sun to object).

That looks something like this:

If you noticed the - before ShadowDistance variable, that is to make it go in the opposite direction. Otherwise, the shadow would move towards the light.

And the sin and cos are simply used to move the object toward a specified direction. You could use a builtin function as well, to simplify if needed.

That is all!

Now, you can also move the light for better testing, this part is optional:

Feel free to tweak all of the parameters until you get what you want, and I hope this simple effect might come in useful for your projects.