Log in from a computer to take this course

You'll need to log in from a computer to start Learn Game Development with Phaser.js. But you can practice or keep up your coding streak with the Codecademy Go app. Download the app to get started.

apple storegoogle store

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.



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.


Now do the same for gameState.bg2.


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


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


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.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?