Parallax Scrolling Effect

2D arcade video games often use a frame based approach. This means that the screen is refreshed every so often (for instance every 20 milliseconds). This enables to animate the Graphical User Interface of the game making the game more engaging.

When the main character is moving across the screen, a parallax scrolling effect can be used to animate the background according to the speed of the player.

A parallax effect is based on the idea that when your character is moving side to side, the objects closer to the camera appear to move faster, while the objects in the distance appear to move more slowly.

A parallax scrolling effect is sometimes used in video games to draw and animate the background. This technique is used for instance in the video games Angry Birds and Flappy Bird. It is based on the idea that the background landscape consists of different layers: the foreground closed to the camera viewpoint, short distance background layers (e.g. trees, buildings) and long distance background layers (e.g. mountains).

You can read more about Parallax Scrolling on this page: https://en.wikipedia.org/wiki/Parallax_scrolling

In this challenge we will draw a background consisting of three mountain ranges each having its own skyline. To create our parallax effect we will animate each skyline to translate horizontally at a different speed.

Parallax Effect in 3D games

Parallax effect algorithms can be a lot more complex especially when applied to 3D video games. Such Parallax effect algorithms will involved a lot of trigonometric calculations!

Parallax Scrolling Effect in Web Design

This technique is now used by web-designer to add a parallax animation effect to a web page when the user scroll down the page. It is based on the idea that different components of the web page (background pictures, pictures and video clips, header & footer sections, navigation bar, etc.) are positioned on different layers which will scroll at a different speed when the user scroll down the page.