Class Diagrams for JumpingJack

JumpingJack in Layers

The easiest way of understanding JumpingJack's coding design is to consider the graphical layers making up the on-screen image. Figure 12-2 shows the various parts, labeled with the classes that represent them.

The scenic background is made from three GIFs (mountains.gif, houses.gif, and trees.gif in Images/), all wider than the JPanel, and moving at different speeds behind the bricks layer and sprites. The images are drawn to the JPanel in back-to-front order and are easily combined since houses.gif and trees.gif contain large transparent areas. Each image is maintained by a Ribbon object, and these are collectively managed by a RibbonsManager object.

The bricks layer is composed of bricks, positioned on the screen according to a bricks map created by the programmer. Each brick is assigned a GIF, which can be any rectangular shape. Other shapes can be faked by using transparency, showing only a portion of the rectangle. Each brick is represented by a Brick object, grouped

Figure 12-2. The visual layers in JumpingJack

together and managed by BricksManager. The brick layer is wider than the JPanel and wraps around in a similar way to the Ribbon backgrounds. Jack walks or jumps over the bricks.

A strange feature of side-scrollers, which is hard to believe unless you watch a game carefully, is that the hero sprite often doesn't move in the x-direction. The sprite's apparent movement is achieved by shifting the background. For example, when Jack starts going right, he doesn't move at all (aside from his little legs flapping). Instead, the scenery (the GIF ribbons and the bricks layer) move left. Similarly, when Jack appears to move left, it's the scenery moving right.

When Jack jumps, the sprite moves up and down over the space of one to two seconds. However, the jump's arc is an illusion caused by the background moving.