Parallax scrolling is a technique used by game developers where background images move past the camera more slowly than foreground images and so creating an illusion of depth in a 2D scene of a game. In the early 1980s developers tried to make their 2D games mor attractive by adding a kind of 3D feel by using multiple layers that moved at different speeds. There are several methods od achieving this effect, the most common (also in modern game engines) is using several screen layers. These layers are all virtual screen layers, that will create the whole game screen when they are put on top of each other. The one thing you will need is a transparent color, this is a color value that is not transferred to the read game screen. I will illustrate this bye a simple example.
The first layer is the layer with all the foreground elements that will cover the player and the rest of the scene, most of the time this will be trees and small objects, it is not so nice if this layer covers the game player sprite too long because then the player disappears from the scene. In this example I created only one tree. Notice the white is the transparant color her and this color will be ignored when the layer is copied to the actual screen layer. This layer can be filled with normal game sprites.
The second layer is the layer that the player sprite walks on, this is the “platform” that has all game elements, the player sprite and the enemy sprites will all be displayed on top of this layer so the sprites will cover the area of this layer, giving the illusion that this is in the back and below the player figure.
The last layer is the background layer, this shows items on the horizon and most of the times also a sky with elements like sun, clouds or moon and stars. This will be the layer that is most in the back of the scene and this does not have a transparent color as it will be used to fully erase and initiate the building of a new game frame screen. Most of the time this is a very wide image that tiles on both ends so the viewport can be moved by just selecting a new top / left location within the wide background image.
Now when we want to create a new game screen frame, we start by copying the selected area from the wide background image to the game screen, clipping on both sides of the screen. Now we render the layer 2 screen with all the game elements and put this on top of the background that is already in the game screen. Notice the transparent areas are not copied to the screen.
Now it is time to render the game sprites like the game player sprite and the other moving game sprites like enemies and other elements that can interact with the player sprite. In this case I just put the player sprite on the screen covering everything that is already there so it will look like it is in front of everything.
Now we can render the layer 1 and copy this on top of everything that is already on the screen, notice that the transparent color is very important because on the part that actually contains some image pixels will be copies to the screen. It now looks like the player sprite is hiding partially behind a tree. We now have a complete game screen frame that cam be copied to the physical screen for display.
And now Parallax Scrolling
When you look closely at the background of a game, you often see that it seems to move slower than the foreground. This creates a kind of 3D depth in the game. When you’re on a train and you’re watching outside then things that are close by seem to move quite quickly and as the distance increases things slow down. This has everything to do with the principle of how we as humans see depth. Also, things that are further away from us appear smaller than things close by. These are effects that we can use to enhance our 2D game to give it more depth.
The effect can be easily achieved by using layers where the layers are built up from back to front, like the example above. The layer must support transparency or be able to be printed in small parts, otherwise the layer will cover everything from the previous one layer and you would only see the front layer. The back layer is usually not transparent because this is our horizon scene. Within game design packages, these layers are often also called “layers” and have a so-called Z value that indicates the distance to the physical player. Please note that horizontal and vertical scrolling are very intensive processes for a computer, if it is possible the number of layers should be limited. The easiest way to create a beautiful and realistic parallax scrolling effect is to make the scroll factor of the back (background) layer half that of the foreground layers. So when the foreground layer shifts 24 pixels, the background layer shifts only 12 pixels. By painting the layers each “frame” from the rear layer to the front layer, the depth effect is created automatically.
It is true that the level can sometimes be enormously wide and high, making a background image that is half the size will then still produce a huge image that will take up a lot of memory and a huge amount of processor time to edit. Most games do this a lttle smarter by using a smart tiling background image. This image is two or four times the size of the screen but connect perfectly on the left to the right and possibly also above and below, so that the image like a kind of tile can be pasted next to each other. Because the user does not look at the background in such detail and there are often also a lot of things in front of it, hardly anyone will notice that the background will repeat.
Happy game development, regards, Hein Pragt.
