Learn
Learn Phaser: Cameras and Effects
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 to us move faster than things further from us. A full moon or a faraway mountain may not appear to move much at all as you drive down a highway on a clear night, but it’s simply so far away that the movement is occurring very slowly. By comparison, a hedge of trees against the road or a neon light for a roadside shop will whizz by.

In order to simulate this motion, we can to create three different background layers of different sizes. Why do they need to be different sizes? Since we’ll be scrolling some of our “nearer” layers very fast and some of our “farther” layers very slow, we will need our “nearer” layers to be longer or else they will scroll off the screen.

Instructions

1.

Find the .createParallaxBackground() method of our Level. Inside we’re going to create a smooth parallax effect, but first we need to add the three stacked backgrounds. They are gameState.bg1, gameState.bg2, and gameState.bg3. Start .createParallaxBackground() by adding these images to our scene at (0, 0).

2.

Reset the origin for those three backgrounds by calling .setOrigin(0, 0) on each of them.

Folder Icon

Take this course for free

Already have an account?