Scrolling – Make It Move Without Making It Move


I remember when Super Mario Brothers first came out. My cousin was the first person I knew of who had a Nintendo Entertainment System. He had Super Mario Brothers (SMB) and The Legend of Zelda (Zelda). Both games used scrolling but in different ways. SMB had a scrolling background which moved left or right when you moved Mario or Luigi. Zelda, on the other hand, scrolled the screen only when you moved from one screen to the next.

Super Mario Bros. Speedrun World Record
Legend of Zelda playthrough.

Most video games which have a world larger than a single screen have some sort of scrolling mechanic.

If we have a character in the center of our screen and we want to make it look like he is moving, then we can scroll or animate the background. We can even scroll multiple layers in order to make it look more realistic.

To make a character look like he’s moving, we just need to scroll the world or the background in the opposite direction the player is trying to move.

Suppose our background image is located at the coordinates (0, 0). In order to make the player feel like he’s moving right, we move the background image to the left or to the coordinates (0, -1). We can move the background at different rates to make the player feel like he is walking or running (or in the case of Sonic the Hedgehog, rolling).

Have you ever looked out the side of a car or bus while you were in it and noticed that the objects nearest to you seemed to move faster than the objects farther away? It is particularly noticeable when driving in a rural area with farmland between the nearest objects and the trees or mountains in the distance. The apparent movement of objects when it’s actually you who are moving is called parallax. We use a technique called parallax scrolling to approximate this and give the player a better sense of movement.

To create the parallax scrolling technique, we use many background images built up together. This usually requires some artistic skill. We then scroll the images at different rates. The image in the rear might be drawn at half the rate of the image in front.

Leave a Reply