Learn Game Development with Phaser.js: Course OverviewCourse Overview

Learn Phaser: Visual Effects

Learn about Phaser's camera effects and other visual tools to help your games stand out!

Start

Learn Phaser: Cameras and Effects

Lesson 1 of 1

1
Cameras
In order to grant the joy of exploration and discovery it becomes important for the game world to be larger than what a player immediately sees upon entering the game. A useful way to convince the …
Start
2
Platforms
If we want to create a side-scrolling platformer, we better make some platforms for the player to jump on! We’ve created a static group for our platforms as before. But how do we decide where to pl…
Start
3
Levels
Now that we have a system for specifying where platforms should be in each level, we can create multiple levels! Each level is going to inherit from our customized Level class and then inject infor…
Start
4
Shaking the Camera
Camera shake is an indispensible effect in the modern video game. It hints to the player that something jarring and surprising is happening. When a player falls down we’re going to start the level …
Start
5
Fading Out
Fading out of a Scene seems like a fitting transition. A cue taken from the film industry, fade-out offers a much softer effect than the shake but is as concise in Phaser. .fade() is a camera metho…
Start
6
Parallax Scrolling
We’re going to create the illusion of depth in our frozen tundra world using something called a parallax effect. Parallax motion refers to an observable real-world phenomenon that things closer t…
Start
7
Determining The Scroll Factor
In order to accomplish this effect, we’ll update the scroll factor of each of our background layers. The scroll factor is how fast an object scrolls (with respect to our camera). By default, all …
Start
8
Changing the Weather
If a long journey goes on for several days, how do we communicate that length to the folks playing our game? We’re going to use a few strategies to add in concepts of ambience, lighting, time of da…
Start
9
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 ea…
Start
10
Making It Snow
Where does all of the snow in our game world come from? We assume it falls from the sky, but how? In order to enhance the realism of our game we want the snow to fall as the player crosses through …
Start
11
Review: Credits
Throughout this lesson you learned many ways to polish the effects in Phaser games, we’ve added: - Cameras - Special Camera Effects (Fade Out and Shake) - Particle Emitters - Tinted Sprites -…
Start