So one of the most delicious techniques for making your two-dimensional side-scrolling game appear more three-dimensional is through an age-old technique called parallax scrolling. It’s a special scrolling technique that makes nearby object seem, closer and distant terrain seem, well, more distant. Below is an example:

So how do you begin implement this parallax scrolling in to your game? Well there are two ways you can go about it…

Technique 1

If your game is a simple side-scroller with the camera moving continuously causing your scene to pan from left-to-right (or vise-versa) without the camera jumping around the scene, we can do as follows:

You can start off by setting the velocity for your closest layer (in the image above, it’s the layer with foreground palm trees and path). Let signify that layer with index 1 that layer’s velocity to c. We our code so that if the camera moves, we move the objects on this layer by velocity c.:

v₁ = c;

Then, lets index the background vegetation layer (the one with dark green grass) with 2. Since it is farther away from the viewer, it “moves” slower than the first layer. Let’s say it moves half as slow..

v₂ = c/2;

After, we consider the mountain layer, which is even farther that the previous layer. Since it’s farther than the background vegetation layer, it should move at a slower velocity.

v₃ = c/3;

For more layers, we can do v₄ = c/4; v₅ = c/5; … v₁₀₀ = c/100 ;

As you can tell, the farther away the object is, the smaller the velocity becomes, all the way until the velocity converges to zero. And since the night background is way off in the distance, we can assume that it’s velocity is so negligible that we can consider it to be zero, which is why the backdrop doesn’t move.

Technique 2

So what happens if we have a scene that requires the camera to occasionally jump around in the scene, how do we handle how much of the layers to offset to still appear to have have parallax when we scroll? If we were to use technique one, the layers would just seem very off only because we expect the movement of the layers to be continuous like the camera.

As you can see from the image above, the position of the layers are affected by one central pivot point in the farthest position of the screen. So how do we calculate the position of any layer of the scene? Well, sir, we must incorporate simple trigonometry into solving this problem:

First, we must designate a central point on each of the layers. And we must also know how far away each layer is from the center pivot point (designated as y in image above). We can assume we are moving the camera in relation to the first layer (which is the foreground layer with palm trees and path).

So we first choose a layer that we want all other layers to move in relation to. Since most games have the characters/sprites on the closest layer, we set it as the first layer (in image above, layer with foreground palm trees and path). Say we move the camera 10 units left of the center axis in relation to that layer. Since we already know how how far this layer is from the center axis (designated x₁) and how distant this layer is away from the center pivot at the backdrop (designated y₁), we can use simple trigonometry to fetch the angle (designated Θ ). Calculate Θ = inverse tangent of x₁/y₁ = tan^-1 (x₁/y₁).

Now that we have Θ, we can now correctly determine the offset for the rest of the layers. For example, if we are calculating how much x to offset the 2nd layer (designated by x₂), we use x₂ = y₂ * tan(Θ), in which y₂ is how far the second layer is away from the center pivot and Θ is the angle that we calculated. The x₂ generated is how far we should offset the center of the layer from the center axis.

Now, don’t you regret dozing off in your high school trig class?