JumpingJack in Layers

Chapter 12. A Side-Scroller

The player's sprite in a side-scrolling game usually travels left or right through a landscape that extends well beyond the limits of the gaming pane. The landscape scrolls past in the background while the player jumps (or perhaps flies) over various obstacles and bad guys, landing safely on platforms to collect treasure, food, or rescue Princess Peach. Of course, the quintessential side-scroller is Super Mario Bros., still available today in many versions on many platforms.

Most side-scrollers implement their backgrounds using tile maps: the tiles can be square, rectangular, or any shape once transparent GIFs are brought in. Tiles can be unchanging blocks, animated, or they can behave like (clever) sprites.

Backgrounds are often composed of several tile map layers, representing various background and foreground details. They may employ parallax scrolling, in which layers "further back" in the scene scroll past at a slower rate than layers nearer the front.

Tiling is a versatile technique: Super Mario (and its numerous relatives) present a side view of the game world, but tiles can offer bird's eye viewpoints looking down on the scene from above and can offer isometric views, as in Civilization, to create a pseudo-3D environment. You'll see how to implement a basic isometric game in Chapter 13.

This chapter describes JumpingJack, a side-scroller in the Super Mario moldalbeit considerably simplerthat illustrates tile maps, layers, parallax scrolling, and a jumping hero called Jack who has to dodge exploding fireballs.

JumpingJack has some unusual elements: the foreground is a tile map, which Jack scrambles over, but the other layers are large GIFs. The background layers and tiles wrap around the drawing area, so if Jack travels long enough he returns to his starting point. An introductory startup screen doubles as a help screen, toggled by pressing "h."

Two screenshots of JumpingJack are shown in Figure 12-1.

Figure 12-1. Two JumpingJack screenshots

The arrow keys make Jack move left, right, stand still, and jump. Once Jack starts moving (when the user presses the left or right arrow keys), he keeps moving until he hits a brick. To prevent him from stopping, the user should press the jump key (up arrow) to make him hop over bricks in his path.

Fireballs shoot out from the right edge of the panel, heading to the left, unaffected by bricks in their way. If a fireball hits Jack, the number of hits reported in the top-left of the panel is incremented; when it reaches 20, the game is over and a score is reported. (As a slight relief, only a single fireball is shot at Jack at a time, which simplifies the coding).

An instrumental version of "Jumping Jack Flash" by The Rolling Stones repeatedly plays in the background, occasionally punctuated by an explosion audio clip when a fireball hits Jack.