Skip to Content
Learn
Learn Phaser: Cameras and Effects
Changing the Lighting

Different light colors things differently, so it will be a stronger effect if we color our world for each time of day. In order to convey this effect we are going to use the .setTint() method on each of our GameObjects. .setTint() performs a color multiplication effect that changes each pixel in your image consistently, in a way similar to having a colored light cast on it. It’s a lot like looking at the same thing through a pair of sunglasses. When we do this, we can contrast the effect of a strong overhead sun during the afternoon, with, say, a lavender light present in the early morning. At night, we can just make everything a little bit darker.

Instructions

1.

In .setWeather(), we’ve given each time of day a tint color. Let’s apply that tint to all of our GameObjects to adjust the lighting for that time of day!

First call .setTint() on gameState.bg1, give .setTint() the argument color.

2.

Now do the same for gameState.bg2.

3.

And finally let’s administer that tint to gameState.bg3.

4.

That’s not everything in our game though! Let’s update Codey’s tint too! Use .setTint() on gameState.player.

5.

Lastly, let’s do the platforms. Iterate over the platforms with a for-loop over gameState.platforms.getChildren() and set the tint for each platform.

Folder Icon

Take this course for free

Already have an account?