Parallax Scrolling

Overview

There is a wonderful Halloween episode of The Simpsons that parodies a classic Twilight Zone episode in which a young girl passes through a wall and is trapped in the fourth dimension. In the The Simpsons variant (episode 706, "Treehouse of Horror VI," for all you The Simpsons fans), Homer stumbles into a dimensional portal and ends up in a reality that has three dimensions (amusingly rendered with 3D software by Pacific Data Images). His two-dimensional family and friends are shocked to discover the existence of such a place, while Homer is surprised to discover how his body bulges out in front and behind him. What makes this idea even more amusing is the fact that we as an audience never really thought of Homer's Springfield as a two-dimensional place and consequently never thought that Springfield inhabitants were conscious of being two-dimensional. Of course, in the back of our minds we knew that what we were watching on our television screens consisted of two-dimensional drawings, but the animators always succeeded in making those drawings seem three-dimensional.

One technique used frequently in most 2D animation to help simulate a three-dimensional feeling is parallax scrolling, where different planes of graphics and/or animation scroll at different rates depending on their relation (or supposed relation) to the viewer and camera, creating an illusion of depth as the nearer planes scroll at a faster rate than the farther planes.

To better understand what parallax scrolling is, you can first think of it in terms of your own three-dimensional reality. Imagine you're looking straight down on three different-colored balls. As you watch, each ball moves in the same direction 50 meters . From your vantage point high above, each ball appears to move the same distance:

Now let's take the same situation and reposition your vantage point. Imagine you are on the ground looking at the three balls as each moves that same distance of 50 meters. Because of your new vantage point and the depth of the balls, the ball that is farthest from you appears to be moving less of a distance, while the ball that is nearest to you seems to move the most distance (each ball would be scaled differently as well, which is a related concept):

From this you can conclude that the farther an object is away from the viewer, the less it will appear to be moving in relation to objects closer to the viewer.

Another classic example you should be familiar with from the world around you is the movement of the landscape as you view it from a moving vehicle. If there are mountains in the distance, they will appear almost stationary while the roadside trees fly by, even though you are moving the same rate past these two sets of stationary objects. So how would you re-create this 3D effect on a 2D screen? Parallax scrolling is the answer.