Animation - Building JavaScript Games for Phones, Tablets, and Desktop - page 317

In a similar fashion, you can draw a walking or running character. In addition to moving the sprite,
you draw a slightly different sprite every time. By drawing a sequence of sprites, each of which
represents part of a walking motion, you can create the illusion that a character is walking on the
screen. An example of such a sequence of sprites is given in Figure 25-1 .
Figure 25-1. A sequence of images representing a walking motion
ANIMATIONS IN GAMES
There are different reasons for putting animations in games. When you create 3D games, animation is normally necessary
to enhance realism, but for 2D games this isn't always the case. Still, animations can considerably enrich a game.
Animation brings objects to life. But it doesn't have to be complicated to animate them. The simple animation of a
character closing and opening its eyes results in a strong feeling that the character is alive. Animated characters are
also easier to relate to. If you look at a game like Cut the Rope , the main character (named Om Nom) is simply sitting in
a corner. But from time to time the character makes some funny moves to show you it's there and wants you to bring it
food. This creates a very effective motivation for the player to continue playing the game.
Animations also help to draw the player's attention to a certain object, task, or event. For example, having a small
animation on a button makes it clearer for the player that they have to press the button. And a bouncing water drop
or a rotating star indicates that this object should be collected or avoided. Animations can also be used to provide
feedback. When a button moves downward when you click it with the mouse, it's immediately obvious that the button
click was successful.
However, creating animations is a lot of work. So think carefully beforehand about where animations are needed and
where they can be avoided, to save time and money.
The Animation Class
For animated characters, you usually design one sprite for each type of movement. The example in
Figure 25-1 is the sprite for animating a running character. During the development of the Penguin
Pairs game, you designed the SpriteSheet class that represents a strip or a sheet of images. You
can use that class in combination with a new class, Animation . In addition to a sprite sheet, an
animation requires extra information. For example, you want to indicate how long each frame should
be shown on the screen. You also want to be able to loop your animation, meaning that once you
reach the last frame, the first frame should be shown again. Looping an animation is very useful: in
the case of a walking character, for instance, you only have to draw one walk cycle and then loop