Professional Documents
Culture Documents
Sprites Animation Arcade PDF
Sprites Animation Arcade PDF
Sprites Animation Arcade PDF
By Ari Feldman
ari@yogicflyer.com
What is Animation?
Animation is the process that produces the illusion of movement. It works by dis-
playing two or more image fragments called frames (also commonly referred to as
cells). When these frames are displayed in rapid succession with subtle changes
made to their content, our eyes register these changes as movement.
Animation is not a mystical art. Rather, it’s a well-established process that com-
bines the aesthetics of design with real-world physics in order to breathe life into
what are otherwise static objects and scenes. This chapter will introduce the fun-
damental concepts behind animation to you so that you can create and implement
animation in your own arcade game projects.
Motion Lines
A motion line (sometimes referred to as a natural path) is an invisible line created
by an object as it performs a series of sequential movements.
Chapter 9 / Arcade Game Animation 295
Motion Line
Motion lines are essential to creating effective animations, and manipulating the
motion line can add realistic emphasis to animated objects. For example, you can
create very smooth animations by making small alterations to the motion line.
Conversely, you can produce very dramatic animations by making large or exag-
gerated changes to the motion line.
Even more interesting to the animator is how objects produce different shaped
motion lines depending on how they move. For example, a bullet has a motion line
that is straight and even while a bouncing ball has a motion line that is wavy and
uneven. This being said, motion lines must be consistent with an object’s real-
world behavior in order to produce realistic-looking animation. Otherwise, the
quality of the animation will suffer. Therefore, you can use an object’s motion line
as a means of determining whether or not it is being animated correctly and
convincingly.
The best way to follow an object’s motion line is to locate its center of gravity. The
location of the center of gravity varies according to the type of object involved.
To help you accomplish this, Table 9-1 provides some examples of where the cen-
ter of gravity is for a number of common objects. Using this information, you
should then be able to identify the center of gravity for other types of objects.
TABLE 9-1: Location of the Center of Gravity in Different Objects
Object Type Estimated Center of Gravity
2-legged animals Head
4-legged animals Chest
Flying animals Torso
Humans Head
Insects Torso
Spaceships or airplanes Hull or fuselage
Tracked or wheeled vehicles Turret or body
296 Chapter 9 / Arcade Game Animation
Motion Angles
Motion angles are one of the most obvious clues as to an object’s direction as it
moves. It’s important to point out that there is a direct relationship between an
object’s direction and its motion angle. Almost any change in an object’s speed or
direction will require a similar adjustment to its motion angle. Therefore, the
sharper the motion angle, the faster or the more extreme the change in the
object’s motion or direction will be.
Motion angles are particularly useful for conveying a sense of realism in animated
objects. For example, a jet fighter making a steep bank will have a motion angle
that is sharper than a jet fighter that is flying straight and level as shown in Figure
9-2. In this case, you can use its motion angle to visually discern that it is travel-
ing at a high speed, which ultimately helps to reinforce the illusion of realism.
Although the actual location of motion angles varies, most motion angles are
located along the spine of an object, i.e., the backbone of a human being or the hull
of a spaceship.
Key-frames
Most people are aware of the extremes that occur during movement, i.e., such
noticeable things as the flapping of wings or kicking of legs. In animation, we refer
to these actions as key-frames.
Being able to determine which frames in an animated sequence are the
key-frames is an extremely important part of the animation process. This is
because key-frames serve as the framework for the entire animation sequence.
In addition, there is a direct relationship between the number of key-frames used
and how smooth a particular animation appears. The presence of more key-frames
in an animated sequence means smaller incremental changes in the animation and
Chapter 9 / Arcade Game Animation 297
It’s important to realize that the more key-frames a particular animation has, the
more complex it is and the longer it will take to design. This is certainly some-
thing to consider when designing the artwork for an arcade-style game, especially
when working under a tight deadline. In addition to taking longer to create, com-
plex animations make it easier to introduce errors and mistakes into the animation
sequence, which can have a negative impact on the animation’s overall quality and
effectiveness.
In reality, however, the actual situation dictates which approach to take and how
many key-frames to use for a given animation.
There will be instances where you can get away with using fewer key-frames than
in others. In most cases, you can use as few as two or three key-frames per object
in arcade-style games, with little or no detrimental impact. However, you should
look at each game on a case-by-case basis before deciding on a particular number
of key-frames to use. If you don’t, you run the risk of reducing the quality of your
game’s animations and, ultimately, the quality of the game.
Please refer to Table 9-2 for general suggestions on key-frame usage in different
arcade game genres.
TABLE 9-2: Object Key-frame Quantity Suggestion Chart
Arcade Game Type Key-frame Usage Suggestions
Pong games 2 per animated object
Maze/chase games 2-3 per animated object
Puzzlers 2-3 per animated object
Shooters 2-4 per animated object
Platformers 2-6 per object
298 Chapter 9 / Arcade Game Animation
NOTE: These are subjective estimates only. Each game situation will be differ-
ent and will depend on the design time, the game’s target platform, and the
overall level of animation quality you want to achieve.
It’s important to note that key-frames can occur at any point within an animated
sequence. However, certain factors such as the type of animation involved and its
relative complexity can influence where in the sequence they might actually
appear. For example, non-repetitive motions such as explosions have many
key-frames and tend to be located at several points within the animation sequence
or wherever there is a major change. In comparison, repetitive motions such as
walking or flying have only a few key-frames (i.e., two or three). These tend to be
distributed at the start, middle, or end of the animation sequence.
After the key-frames of the animation are identified and established, the
in-between frames must then be added. In-betweens are frames of animation that
are used to smooth out the transition between individual key-frames.
In animation, key-frames are important for defining the object’s primary move-
ments, while in-betweens are responsible for making the entire animation look
smooth and convincing. Introducing slight or subtle changes to each frame
between key-frames creates in-betweens. This process is also known as tweening,
and great care must be taken to ensure that these changes are small in order to
maintain the illusion of continuous and realistic movement.
Figure 9-4 shows an example of how in-betweens co-exist with key-frames. This
example shows an animation of a man swinging a stick. The start of the sequence
shows the man with the stick up at the shoulder and ready to swing, while the
final frame shows the end of the swinging process with the stick fully extended.
These are the key-frames of the animation while the frames that occur in-between
them are the in-betweens of the animation.
Key-frame Key-frame
Key-frame
In-Between
In-Between
FIGURE 9-4: Key-frame and In-Between Example
Chapter 9 / Arcade Game Animation 299
In addition to influencing the speed at which objects travel, weight can also affect
how easily an object can move. For example, think about how fast a racecar moves
in comparison to a battle tank. The tank will plod across the ground whereas the
racecar will quickly skim across it. This is because the racecar weighs less.
Then there’s the issue of gravity. Gravity also influences the motion of objects. In
the real world, gravity will exert more force (resistance) against heavier or denser
objects than it will against lighter ones. To see how this works, consider how
quickly a bomb falls from the sky when compared to a feather, or how a rock
bounces off the ground in comparison to a rubber ball. Remember that people
aren’t always easily fooled. Believe me, they are well aware of such things and
failing to account for these behaviors in your animations can have a negative
impact on how they are perceived in a game.
Incidentally, the principles of weight and gravity can be applied to virtually any
animated object. Therefore, the more attention you pay to them, the more realistic
your animations can be.
Flexibility
Flexibility is essential to producing convincing and fluid animation, particularly
when depicting complex, jointed objects such as animals, insects, and human
beings. Animations without proper flexibility can appear stiff and rigid, which for
these types of objects is a less than desirable effect.
The key to adding flexibility to your animations is careful planning coupled with
careful observation of how different objects behave when they move. Whenever
you animate a jointed object, you must always determine which parts of the object
(i.e., arms, legs, etc.) lead the movement and which ones follow it. It’s very impor-
tant to realize that not all body parts actually move at the same time on all objects.
For example, consider how a swordsman might slash with his sword. The swords-
man leads with his legs first to gain a solid footing and then follows through with
his arm to complete the cutting motion. In animation, this flow of movement is
called the range of motion.
When attempting to incorporate flexibility into an animation you must take care to
account for the limits of anatomy. That is to say, never attempt to unrealistically
extend the available range of motion that a given object has. Don’t depict objects
moving in ways that aren’t possible in the real world. Examples of this might
include, but aren’t limited to, such things as bending a joint backward or in a posi-
tion that is not normally possible for one to make.
Chapter 9 / Arcade Game Animation 301
Secondary Actions
As mentioned in the previous section on flexibility, not all parts of an object move
simultaneously when animated. There are parts that lead the flow of movement
and parts that follow it. The parts that follow the movement are called secondary
actions.
Secondary actions are extremely important to the animation process because they
add an extra dimension of realism to animations. Essentially, anything that is free
moving can qualify as a secondary action. This includes everything from hair and
clothing to eyes and lips. So, for example, if a character in a game is wearing a
cape and walking, the secondary action of this action would occur when the char-
acter’s cape bounces and sways as the character moves. Figure 9-5 shows this in
frames 1 and 2.
Secondary Action
1 2 3 4
Secondary actions are not limited to small details such as clothing or hair. It’s
important that you understand that they can be virtually anything in an animation
sequence that isn’t the main focus.
represent the major points of movement. Although key-frames usually fall into
this category, it’s important to realize that there isn’t always a direct one-to-one
relationship between key-frames and cycles.
While cycles focus on repeating the occurrence of specific frames within an anima-
tion sequence, loops emphasize the repetition of the entire sequence as a whole.
For example, an animated sequence of a man walking goes through a number of
frames to produce the illusion of movement. By looping the sequence, you can
simulate the effect of constant motion so that the walking sequence appears to be
continuous. Therefore, it can be said that loops help us to keep animated move-
ment constant.
However, this being said, it’s important to understand that not all objects require
constant motion while being animated. Loops are a device to help us achieve this
but they shouldn’t be used in all animations. In fact, quite a few types of animation
don’t rely on loops at all.
In addition to adding realism and continuity to your animations, looping can also
save you time by preventing you from having to manually repeat the individual
frames of the entire animation sequence.
Figure 9-6 shows an example of how cycles and loops work together in anima-
tions. Here, frames 1 and 5 are cycles because they are repeating the same frame
of animation. When the sequence reaches frame 5, it would loop back to frame 1 to
create the illusion of continuous movement.
Tempo
Every animated object can display at a specificed tempo, or speed. Tempo can be
used to control the rate at which entire animation sequences are shown as well as
the speed of the individual frames that comprise the sequence.
Tempo is important because it allows us to create more realistic-looking animation
sequences. Its usefulness becomes immediately apparent when you consider that
most real-world objects move at different rates during the course of their move-
ments. For example, consider the average marathon runner. When running, a
marathoner’s legs move faster during mid-stride than they do when they are fully
extended. You can account for this fact in your own animations by using the dis-
tance of the object between successive frames as a means of depicting animations
Chapter 9 / Arcade Game Animation 303
Faster Tempo
Slower Tempo
We measure tempo in frames per second (FPS), or the number of frames that can
be displayed per second of time. The human eye can perceive movement (or the
illusion of it) in as few as 12 frames per second. Generally speaking, the higher
the frame rate (FPS), the smoother the animation. Therefore, it is preferable to
display most forms of animation at a tempo that is greater than 12 frames per
second.
Table 9-4 compares some of the more common animation frame rates for different
forms of animation.
TABLE 9-4: Comparisons of Common Animation Frame Rates
Animation Type Frame Per Second (FPS)
Computer video 15
Fast-action arcade game 30
Motion picture 24
Television 30
animation that appears in computer games, as they tend to really tax the systems
that they are played on.
Table 9-5 provides some suggestions on the common frame rates for each type of
arcade game.
TABLE 9-5: Common Arcade Game Frame Rates
Arcade Game Type Common Arcade Game Animation Frame Rates (FPS)
Pong games 15-30
Maze/chase games 20-30
Puzzlers 9-15
Shooters 20-50
Platformers 20-30
Most game developers consider 15 FPS to be the minimum acceptable frame rate
for fast-action arcade games and consider 20 or 30 FPS to be a desirable frame
rate. Certain arcade game genres demand higher animation frame rates than
others. This is because the fluidity of their animation enhances the overall user
experience.
Sprites
Sprites are special graphic objects that can move independently of the screen back-
ground. Sprites are used in arcade games to represent spaceships, bombs, aliens,
soldiers, and so on. In addition, they can be either animated or static and can also
be used to represent a variety of fixed game objects such as treasure and power
ups as well.
Sprite Properties
Sprites are used extensively by arcade games and have a number of interesting
and distinct properties, including:
n Variable sizes and shapes
n Free range of movement
n Separate from background
Despite their unique advantages, sprites are among the most challenging aspects
of creating arcade game graphics. This is because designing most sprites involves
a complex two-step process. First, the sprite must be created just as any other
graphic image. However, unlike most graphic objects, sprites tend to face more
restrictions in terms of their size and use of color, which can complicate their
design and increase the time required to create them. Then, after doing all of that
306 Chapter 9 / Arcade Game Animation
work, the sprite needs to be animated, which, as you will soon see, is a very com-
plicated process.
Grid Squares
As previously mentioned, the size of the sprite being animated can also impact the
speed at which a sprite is animated. Smaller sprites will always animate faster
than larger sprites, especially when there are lots of objects being displayed on
the screen at once. This is because the computer has to manipulate less data with
smaller sprites than it does with larger ones. Because of this, you should limit the
size of your sprites whenever possible. One of the best ways to do this is to create
your sprites in predefined size using a grid as a guide. Grids squares are miniature
“screens” on which to draw sprites. As such, all grids have an origin, or a starting
reference point. The origin helps us pinpoint the location of individual pixels
within the grid when designing and editing individual sprite images. Like a graph,
the origin of a grid square always starts at position (0,0), the position on the grid
where X and Y are both equal to 0.
Sprite
24 x 24 Grid
NOTE: These sizes change in proportion to the screen resolution in which they
are displayed. For example, an object animated at 16x16 at a resolution of
320x240 will appear as if it were created at 8x8 when shown at a resolution
of 640x480. You can easily draw grid squares by using the Grid tool of your
favorite painting program. This tool is described in more detail in Chapter 5.
You may have noticed that most of the common sprite grid square sizes are based
on even multiples. This is intentional. In addition to helping with screen perfor-
mance, evenly sized sprite grids also simplify the programming process because
they allow for cleaner and more optimized math in programs. This being said, this
doesn’t actually mean that the sprites you design inside these grids have to be
evenly sized. For example, a given grid square might be 32x32 but the sprite
inside the grid square might actually measure 29x27.
Table 9-7 provides some examples of how these different grid square sizes might
be used for different types of arcade game objects.
TABLE 9-7: Example Grid Square Sizes for Different Game Objects
Grid Square Size Comments
8x8, 16x16 Useful for small objects such as bullets or missiles. Can also be used
to represent on-screen text characters at lower screen resolutions (i.e.,
320x200).
32x20, 32x32 Useful for objects such as spaceships, bonus items, icons, and other
small on-screen objects in most screen resolutions.
64x64, 96x64, 128x128 Useful for larger spaceships and vehicles as well as most on-screen
objects in most screen resolutions.
Greater than 128x128 Useful for very large objects, namely “boss” objects, or major
characters that frequently appear at the end of game levels, etc.
Chapter 9 / Arcade Game Animation 309
32x32
64x64
128x128
Table 9-8 provides some suggestions for using sprite grid sizes for different types
of arcade games.
TABLE 9-8: Suggestions for Using Grid Square Sizes in Different Arcade Game Genres
Grid Size Suggested Arcade Game Genre
8x8, 16x16 Pong games, maze/chase, shooters
32x20, 32x32 Pong games, maze/chase, shooters
64x64, 96x64, 128x128 Pong games, maze/chase, puzzlers, shooters,
platformers
Greater than 128x128 Shooters, platformers
Table 9-9 shows the grid square sizes that are most useful at different screen
resolutions.
TABLE 9-9: Using Grid Square Sizes at Different Screen Resolutions
Grid Size Suggested Screen Resolution
8x8, 16x16 320x200, 320x240, 640x480
32x20, 32x32 320x200, 320x240, 640x480, 800x600
64x64, 96x64, 128x128 320x200, 320x240, 640x480, 800x600
Greater than 128x128 640x480, 800x600
NOTE: The information presented in Tables 9-7, 9-8, and 9-9 is to be used as
general guidelines only. You are certainly free to use grid sizes other than
the ones mentioned here.
310 Chapter 9 / Arcade Game Animation
run, and jump to spaceships and special effects such as flashes and explosions. It’s
these objects that ultimately make arcade games engaging and appealing to those
who play them. Yet, despite all of the outward differences each arcade game
exhibits in terms of their looks, the animations that give them unique character all
share a common set of primitives, or techniques of producing animated sequences.
This is a little-known fact but an extremely important one. Once you understand
how these arcade animation primitives work, you will have an important insight
into how arcade game animations are designed and created.
The purpose of this section is to highlight these core animation primitives and
explain both how they work and how to use them effectively in your own arcade-
style game projects.
For the purposes of this book, these key animation primitives can be grouped into
three general categories. These categories include:
n Major arcade game animation primitives
n Minor arcade game animation primitives
n Complex arcade game animation primitives
to occur between frames to produce its intended effect. Rather, cylindrical anima-
tions rely on points or lines called markers that change gradually from one frame
to the next as illustrated in Figure 9-12.
1 5
When animated it will produce the illusion of the object rotating in place. Here’s a
quick breakdown of the motion that’s taking place:
n Frame 1: The marker (the horizontal line) is positioned near the top of the
object.
n Frame 2: The marker moves down slightly from the previous frame.
n Frame 3: The position of the marker moves to the center of the object. This
provides an unmistakable visual clue that the object is starting to rotate since
the marker has made a dramatic and visible positional change since frame 1.
n Frame 4: The marker moves down past the center. If you look carefully, you’ll
see that frame 2 and frame 4 are exact opposites of each other in terms of the
position of the marker.
n Frame 5: The marker moves to the bottom of the object. At this point, a sin-
gle rotation has been completed and the animation is ready to be cycled.
Creating effective cylindrical animations requires that you pay close attention to
three things: color selection, proper positioning of the marker, and sequence
length.
Because it doesn’t rely on the broad or exaggerated changes used by the other
forms of animation, the cylindrical primitive requires that you pick suitable colors
to support the effect. These colors should be high contrast shades with the
marker color being the most prominent of them. Making the marker brighter than
the rest of the object serves two important purposes. First, it establishes the point
of change on the object. This cues the user’s eyes to follow the object as it is ani-
mated. Second, it serves as a highlight that reinforces the object’s illusion of
roundness.
The position of the marker can make or break a cylindrical animation. The marker
should always travel from one end of the object to the other in a smooth and pre-
dictable fashion. If it doesn’t, the illusion of motion won’t be properly established
Chapter 9 / Arcade Game Animation 313
and the animation will fail. To ensure that the marker is always positioned cor-
rectly, move it in gradual increments as this will give you more control over its
progression along the surface of the object and give you the opportunity to correct
it during the design process. The correct positioning of the marker is one of the
more difficult aspects of creating this type of animation. To help give you a better
sense of how to do this, look at a real-world object such as a large coin. Turn the
coin on its side and roll it in your fingers. Notice how the light moves along the
edge of the coin. Move the marker in the same fashion and the animation will pro-
duce the desired result.
The effectiveness of cylindrical animations is also greatly influenced by the num-
ber of frames used to create the effect. To ensure that the animation is successful,
plan on rendering the cylindrical animation using between three and ten frames.
In my experience, seven works best, but more can be used without drawing out
the effect too much. Never use less than three frames to represent any cylindrical
animation since there won’t be enough frames available to adequately show the
flow of movement.
TABLE 9-10: Cylindrical Primitive Animation Property Summary
Animation Property Comments
Motion lines Cylindrical animations should never have an uneven
(non-linear) motion path. Cylindrical animations always have
straight motion lines.
Motion angles Motion angles are always straight.
Key-frames and in-betweens Three to four key-frames with up to three in-betweens produce
the smoothest and most effective cylindrical animation
sequences.
Weight and gravity These properties may influence the speed at which a cylindrical
object rotates if it’s large or heavy.
Flexibility Does not apply and has no effect.
Secondary actions Has no effect as all parts of the object move at the same time
during cylindrical animations.
Cycles and loops Cycles are used extensively in cylindrical rotation sequences. All
cylindrical animations loop; otherwise, the effect won’t seem
continuous.
Tempo Used extensively to adjust the speed at which the cylindrical
action occurs. Be careful not to move objects too quickly when
performing cylindrical animations. Doing so has a tendency to
ruin the effect.
314 Chapter 9 / Arcade Game Animation
1 8
NOTE: Rotational animations are the basis for other animation effects such as
motion blurs. Motion blurs are effects used to depict the movement and
passing of air that is disrupted by the motion of another object. For exam-
ple, motion blurs occur when helicopter rotors move or when a fighter kicks
or punches.
removal and the extent of the removal that occurs between each frame. Let’s start
with the removal method first. The three most common removal methods, or disin-
tegration effects, are melting, dissolving, and color fading.
Table 9-13 identifies how each of these removal methods work and differ from
each other.
TABLE 9-13: Common Object Removal Methods
Removal Method Effect Produced How it Works
Melting Causes an object to appear as if it’s Gradually reduces the vertical area of
melting, similar to a candle. an object and blends its pixels together
to form an unidentifiable mess.
Dissolving Causes an object to decay similarly Gradually removes random patterns of
to being dissolved by acid. pixels from the object over successive
frames.
Color fading Causes an object to slowly vanish. Introduces gradual (or in some cases
extreme) color changes to erase the
object from the screen over time.
In order to remove an object effectively, once you select a removal method, it’s
imperative that you stick with the mechanics associated with the effect. In other
words, if you choose to employ the dissolving method, don’t use color fading as
part of the removal process.
The example in Figure 9-14 uses the dissolving removal method.
1 5
FIGURE 9-14: Dissolving Removal Example
* Denotes that frames used should correspond to available palette entries to produce the
best results.
in the middle of these extremes. Determining the right size for the color flash
takes experience, but after creating just a few implementations, you’ll begin to
notice a pattern and will be able to judge the size properly.
Color flashes are generally meant to happen quickly. Therefore, their animations
should be short and should not extend beyond a few frames. Color flashes that are
between two and five frames in length are ideal. Anything less won’t work and
anything more can seem too drawn out. Thus, be careful in this regard and try to
keep your sequence lengths relatively short.
Finally, the position of the color flash itself can make or break the intended effect.
To ensure that the effect works as expected, always position the color flash logi-
cally. In other words, place the color flash where the user expects it to be. For
example, jewels sparkle at the point where they reflect light. So, if you shade a
jewel with the light source along the upper left-hand corner, the color flash should
appear there and not in the middle or on the right-hand side. Like anything else,
failing to take into account physical laws can diminish the effect that you’re trying
to achieve.
Figure 9-15 illustrates a complex form of the color flash as used in an animated
logo sequence for a game.
n Frame 3: The light’s intensity and flash radius increase by about 50%.
n Frame 4: This frame shows an increase in the light’s size and radius by an
additional 50% of what it was in frame 3.
n Frame 5: By the end of the sequence the light is several times larger and
brighter than it was in frame 2. At this point, the animation should cycle back
to frame 1 in order to restore the animation to its original state and create the
sudden flashing effect that is the hallmark of this primitive.
TABLE 9-16: Color Flash Primitive Animation Property Summary
Animation Property Comments
Motion lines Do not apply and have no effect.
Motion angles Do not apply and have no effect.
Key-frames and Three to five key-frames and in-betweens are optimal. More can be used
in-betweens to smooth the effect but at the risk of appearing too drawn out.
Weight and gravity Do not apply and have no effect.
Flexibility Does not apply and has no effect.
Secondary actions Do not apply and have no effect.
Cycles and loops Used frequently to produce the illusion of continuous action.
Tempo Used extensively to adjust the speed at which the color flash occurs. Most
color flash animations occur quickly; therefore, use a fast tempo
whenever possible when creating animations of this type.
When using this primitive, it’s important to pay close attention to the element of
scale. Scale determines how large an object can become during the course of the
animation. Always make sure that you use a constant scale. In general, it’s good
practice to use a scale based on a multiple of two. This ensures that the object will
scale consistently. Otherwise, the object in question won’t look right when it
grows during the animation sequence.
TABLE 9-18: Growing Primitive Animation Property Summary
Animation Property Comments
Motion lines Generally tend to be uneven as the growing object “grows.”
Motion angles Do not apply and have no effect.
Key-frames and This effect requires two to three key-frames to create effective growing
in-betweens sequences. Five to seven total frames is the optimum for most purposes.
Weight and gravity Do not apply and have no effect.
Flexibility Does not apply and has no effect.
Secondary actions Do not apply and have no effect.
Cycles and loops Cycles tend not to apply to these types of animations due to the fact that
object growth is incremental in nature and each frame requires a larger
version of the object. Growth animations rarely loop due to this fact but
can if the effect is warranted.
Chapter 9 / Arcade Game Animation 323
NOTE: This primitive should not be confused with the cylindrical primitive as it
is not intended to simulate the motion of an object spinning in place.
of walking for characters, human and otherwise. In fact, alien invader type objects
frequently use it.
Stomp-like animations are largely secondary actions since they typically only
affect the feet or bottom of an object.
NOTE: Several of the figures used in this section of the chapter are based on
observations and computer drawings made from material presented in
Eadweard Muybridge’s books, The Human Figure in Motion and Animals in
Motion. Both of these books do an excellent job of breaking down the com-
plex movements of both humans and animals into easy-to-digest pieces.
These books are excellent resources for anyone interested in creating more
realistic arcade game animation.
1 2 3 4
n Frame 3: Here we see the snake’s body beginning to flatten. At the same
time, the snake’s head and neck lurch forward. This further reinforces the
notion that the snake is moving by the sheer force of momentum.
n Frame 4: Here, the snake’s body is nearly completely flat and its head and
neck are in a similar position to how they were originally in frame 1. At this
point, you would cycle the animation to continue the flow of movement.
TABLE 9-27: Slinking Primitive Animation Property Summary
Animation Property Comments
Motion lines Always have slightly wavy motion lines.
Motion angles Always have straight motion angles.
Key-frames and All four frames qualify as key-frames when using this type of primitive. Of
in-betweens course, smoother animation can be achieved by adding corresponding
in-betweens for each key-frame used.
Weight and gravity Can influence the speed at which the animation is displayed. For
example, larger objects or denser gravity will result in a slower overall
slinking movement.
Flexibility Although snakes, worms, and snails don’t have joints or backbones, you
should pay attention to flexibility when applying slinking movements, as
these will enhance the naturalness of the movement.
Secondary actions Secondary actions occur very frequently in slinking animations. Pay close
attention to heads and tails in addition to the main part of the object’s
body as it moves.
Cycles and loops Depending on their complexity, slinking animation sequences can make
use of cycles. However, all slinking motions require loops to provide the
illusion of continuous movement.
Tempo Used extensively to adjust the speed at which the slinking movement
occurs. Slinking animations run slower than most other animation
primitives; therefore, slow down the tempo when creating slinking effects.
NOTE: It’s actually quite possible to produce passable flying animations with
as few as two key-frames (up and down). However, you will need to make
sure that you compensate for the lack of key-frames by using extensive
exaggeration between the two frames and by using the proper tempo.
When studying a bird’s flight, you should take careful note of motion path, motion
angles, tempo, and secondary actions of the wings and body. Failing to do so can
cause you to produce animations that are inaccurate and unconvincing.
To get a better idea of how the flying process works, let’s look at a simplified
example. Figure 9-26 shows a simplified flying sequence rendered in just five
frames.
1 2 3 4 5
n Frame 5: The wings are now in a full upright position. At this stage, you
could cycle the animation in reverse to restart the sequence and keep the
sense of motion constant.
NOTE: You can start simplified flying animation sequences in either the up or
the down state. It doesn’t really matter as long as there is a beginning and
an ending to the sequence.
As mentioned, it’s very important not to neglect tempo when creating flying ani-
mations. Different birds fly at different speeds. For example, insects and
hummingbirds tend to flap their wings at very high speeds, whereas most birds
tend to flap their wings more slowly.
You should also remember to consider the effects of weight and gravity of the fly-
ing creature. For example, smaller birds and insects will tend to have very uneven
motion lines because they flutter as they fly, but larger birds don’t.
TABLE 9-28: Flying Primitive Animation Property Summary
Animation Property Comments
Motion lines Always have wavy motion lines. Certain objects, namely complex bird and
butterfly animation sequences, will have very wavy motion lines.
Motion angles Always have straight motion angles.
Key-frames and Requires at least two key-frames. More frames will result in smoother
in-betweens flying sequences. In Figure 9-26, frames 1, 3, and 5 are key-frames while
in Figure 9-27, frames 1, 5, 7, 9, and 12 are key-frames.
Weight and gravity Can influence the speed at which the animation is displayed. For
example, larger objects or denser gravity will result in a slower overall
flying movement.
Flexibility Flexibility should be emphasized around certain object parts such as the
head, neck, and wings.
Secondary actions Secondary actions occur very frequently in flying animations. Pay close
attention to heads and tails in addition to the main part of the object’s
body as it moves.
Cycles and loops Cycles are used extensively in all flying animation sequences. All flying
animations make use of loops to provide the illusion of continuous and
realistic flight.
Tempo Used extensively to adjust the speed at which the flying movement occurs.
Different animals fly at different speeds. For example, insects move their
wings faster than birds. Along the same lines, smaller birds tend to move
their wings faster than larger birds. Make sure you account for this and
apply tempo properly.
also one of the more difficult types of character actions to animate, especially for
beginners. This is because walking is a complex motion. You see, walking
involves multiple body parts such as the head, arms, and body, as well as the legs.
However, the process becomes much easier if you break the walking process
down into smaller pieces by focusing on animating each body part that is affected
by the movement individually. Thus, walking is also an excellent way to sharpen
your skills in creating secondary actions.
However, in order to do this, we need to review the different components of the
walking process:
n Step 1: The legs—Walking always starts off with the legs. One leg grips the
ground and pulls the other one forward. This essentially produces a propelling
type of movement. When creating a walking sequence, always concentrate on
the legs first.
n Step 2: The arms—The arms swing back and forth along with the motion of
the legs but in the opposite order, i.e., as the leg on one side moves forward,
the arm on that side moves back and vice versa.
n Step 3: The head—Factor in how the head moves along with the rest of the
walking motion. In the real world, the head bounces slightly up and down as
the positions of both legs change and the weight of the body shifts.
Simple walking can be achieved with only two key-frames as shown in Figures
9-28 and 9-29. One frame has the object standing still while the other frame has
the legs of object spread widely apart. Also notice the use of a modified and
heavily exaggerated form of the scissors primitive and the addition of secondary
action subtleties such as arm and head movement. This enhances the effective-
ness of the walk despite the small number of frames used to depict it.
FIGURE 9-28: Basic Walking Example #1 FIGURE 9-29: Basic Walking Example #2
1 12
moves forward slightly while the left arm moves back slightly. The position of
the head drops once again due to the shift in body weight.
n Frame 7: This frame demonstrates what is known as the passing position of
the walk sequence. This is when one leg passes the position of the other leg.
In this frame, the right leg is almost completely straight. Because of this, the
character’s back straightens and the head returns to its normal positioning. At
the same time, the left leg passes in front of the right leg, although it’s still
bent and slightly off the ground. The right arm continues forward while the
left arm continues backward.
n Frame 8: This frame shows the right leg starting to move backward slightly
while the left leg continues to move forward. The right arm is now fully in
front of the character’s torso while the left arm is moving backward in small
increments. The position of the head is unchanged from the previous frame.
n Frame 9: In this frame, the right leg is moving backward with the heel off the
ground and is only stabilized at the foot by the toes. The left leg is nearing the
completion of its forward movement. The right arm is nearing completion of
its forward motion while the left arm continues its slow backward movement.
The head is slightly dropped from the previous frame.
n Frame 10: This frame demonstrates the heel to toe part of the walk stride. In
this frame, both legs are at their maximum distance from each other. In addi-
tion, only the toe of the foot stabilizes the right leg. The left leg has completed
its forward movement. The right arm has completed its forward motion while
the left arm has completed its movement backward. The head’s position
remains stable and largely unchanged.
n Frame 11: This frame shows the right foot positioned back. The left leg has
locked out and the left foot lies flat against the ground. The right arm begins
to reverse its movement and move backward. The left arm starts to reverse
its motion and move forward. The head’s position dips slightly due to the
shifting in weight across the body.
n Frame 12: This is the final segment of the animation sequence. The right
foot now begins its sweep forward while the left leg begins its sweep back-
ward. The right arm continues to move backward while the left arm moves
forward. The head returns to its normal position. You can create a very fluid
walking sequence by cycling back to the first frame of the animation and then
looping it.
Of all of the actions described in this section of the chapter, it’s the legs that are
the most difficult to visualize and animate. Therefore, use Figures 9-31 and 9-32
as “cheats” to help you break down this complex movement.
338 Chapter 9 / Arcade Game Animation
1 2 3 4 5 6
7 8 9 10 11
12
Figure 9-33 provides an example of a complex running sequence. As you can see,
a realistic running sequence requires as many as 12 frames to complete the illu-
sion of movement.
1 12
FIGURE 9-33: Running Primitive Example (Humans)
n Frame 6: This frame shows the character near full stride and once again leav-
ing the ground. The right leg is extended almost completely forward. The
right leg is almost fully bent and completely off the ground. The left leg is
almost straight as it extends backward toward the ground. Both arms appear
to pump furiously. The right arm is completely back and bent at a perfect
90-degree angle. The left arm is bent upward at a near perfect 45-degree
angle. The head and back are almost completely straight.
n Frame 7: This frame is very similar to frame 6 as both legs remain com-
pletely off the ground. The right leg is now fully extended forward while the
left leg continues to stretch backward. The right arm is still bent at a
90-degree angle and begins to move forward. The left arm is still at a
45-degree angle and starts to move back and downward. The head and back
continue to straighten up.
n Frame 8: In this frame, the right leg is still off the ground but rapidly moving
backward and down. The left leg is almost fully bent upward and is quickly
moving forward and down. The right arm is moving forward and the left arm
continues to move backward. In this frame, the head and neck are slowly mov-
ing forward again as the running motion again produces momentum.
n Frame 9: This frame has the right leg slightly bent and now touching the
ground. The left leg is fully extended back. It won’t move any farther back at
this point, only forward. The right arm continues to move forward while the
left arm moves back. It’s interesting to note that both arms are almost even
with each other. This is the only time during the entire sequence that such an
event will occur. The character’s head and back are once again starting to
straighten.
n Frame 10: This frame is almost the direct opposite of frame 4. Here, the
right leg is still on the ground but is about to spring off the ground. The left
leg is also in the process of swinging forward. The right arm is now almost at a
90-degree angle as it moves forward. The left arm continues to move back-
ward. Both the head and neck continue to straighten.
n Frame 11: This frame shows the beginning of the springing action of the run-
ning movement. The right leg extends as it moves backward. The left leg
moves forward in a wide, exaggerated stride. Both arms are now at a
45-degree angle with the right arm moving up and forward and the left moving
backward and upward. The head and back are now straight.
n Frame 12: This is the final frame of the animation sequence and it shows the
character in a full running stride. The actions here are very similar to those in
frame 1. You can create a very fluid running sequence by cycling back to the
first frame of the animation and then looping it.
Use Figures 9-34 through 9-37 as “cheats” to help you break down this complex
movement. Unlike walking, it’s important that you capture all of the motion asso-
ciated with this primitive, including the exaggeration of the arms and legs.
342 Chapter 9 / Arcade Game Animation
1 2 3 4 5 6
8 9 10 11
7
12
1 2 3 4 5 6
7 8 9 10 11 12
NOTE: Running actions are enhanced when you incorporate the element of
anticipation. Anticipation helps to make runs look more realistic since it’s
not very convincing for full-speed running to occur from a walking or stan-
dard start. You can create the impression of anticipation by adding some
additional transitional frames at the start of the running sequence. If this is
too difficult or time-consuming, a simple alternative is to slow the tempo of
the action during the first cycle of the animation.
NOTE: You can add personality to your walking and running sequences by
embellishing and exaggerating the various frames that make up the
sequence. For example, you can simulate heavier characters (i.e., the effect
of gravity) or double up frames to mimic the effect of a limp.
In any event, Figure 9-38 shows the basic action of a four-legged animal running. I
decided to focus on the running action over walking because it is less complex and
generic enough to represent a variety of four-legged animals including tigers,
wolves, and even horses, albeit with somewhat less accuracy and realism.
1 2 3 4 5 6
NOTE: Generally speaking, standing jumps have a shorter and more constant
length than running jumps.
346 Chapter 9 / Arcade Game Animation
1 10
FIGURE 9-40: Complex Jumping Primitive Example
n Frame 9: The character lands. The feet of both legs are now firmly on the
ground while bent forward. The rest of the body is arched forward in order to
minimize the effect of the impact.
n Frame 10: The jump sequence is completed. The character’s body begins to
rise and straighten as the force of the jump is absorbed and dissipated. Here,
both knees remain bent, the back remains arched, and both arms continue
their lunge forward. Unlike walking or running sequences, jumping animations
are rarely cycled due to the nature of the action.
5 6
1 2 3
4
9
7 8
10 11
1 2 3 4 5 6
7 8 9 10 11
As you can see, a complex crawling sequence can require as many as 11 frames of
animation. Here’s a frame-by-frame breakdown of the action:
n Frame 1: The first frame shows the character fully bent on all fours. The
right leg is positioned forward; the right arm is positioned back. The left leg is
shifted back and the left arm leads forward. The head is nearly level and facing
the ground.
n Frame 2: This frame has the right arm moving forward and right leg moving
backward. The left arm moves backward and the left leg moves forward. It’s
interesting to note that both legs are touching the ground at the knees with
the calves suspended in the air. This is done in order to propel the body for-
ward and gain momentum.
n Frame 3: This shows the progression of the right arm moving forward and
up. It moves up in order to gain leverage for the forward motion of the crawl.
The right leg is now at the midpoint of its motion and is closely aligned with
the position of the left leg. The left leg continues to move forward while the
left arm moves backward.
n Frame 4: In frame 4, the right arm stretches outward and forward as it
attempts to pull the body of the character forward. The right leg shifts back-
ward to aid in stabilizing the body. The left arm pushes back and the left leg
moves forward.
n Frame 5: Here the right arm is fully extended forward while the right leg
continues its backward motion. The left arm reaches back while the left leg
aggressively shifts forward.
n Frame 6: Frame 6 is similar to frame 5, as all of the limbs continue their
direction and force of movement.
n Frame 7: In this frame, the right arm is now beginning to move backward and
the right leg is beginning to move forward. The left arm and leg start to move
forward and backward, respectively.
n Frame 8: This frame shows the right arm continuing its backward motion and
the right leg its forward movement. The left arm and leg continue their sup-
porting motion as well.
n Frame 9: Here the left arm is now outstretched and duplicating the action
that the right arm made in frame 4. The right arm and both legs help stabilize
the body while this occurs.
350 Chapter 9 / Arcade Game Animation
n Frame 10: This frame has the right arm slowly moving back while the right
leg thrusts forward. The left arm is now nearly fully extended, as it
approaches the ground. The left leg continues to shift backward.
n Frame 11: This frame shows the right arm moving back and coming close to
the right leg as it moves forward. The left arm is now completely extended
and touching the ground. The left leg continues to shift backward. At this
point, the animation would cycle back to frame 1 to complete the sequence
and the continuous flow of motion.
NOTE: In most situations, you can also create simple, two-framed crawling
actions. However, such animations require heavily exaggerated movements
between frames and ample delineation between different parts of the figure
in order to convince the observer that movement is actually occurring.
position the individual frames until the object starts to conform to these
norms.
7. Apply secondary actions and animation enhancements—Add any sec-
ondary actions that might be needed, and if applicable check to see if the
object exhibits sufficient flexibility. This is also a good time to add any addi-
tional “character” to your object(s). In other words, feel free to embellish the
movement so it looks both convincing and enticing at the same time.
8. Test each movement—Don’t forget to test every animation you create. The
easiest way to do this is to use your painting program’s Copy tool and copy
one grid square to another and then apply an undoable undo. This temporarily
combines two frames and then flips between them to produce a quick ani-
mated effect. For longer, more complex animations, see if your painting
program offers an animation tool so that you can see the entire animation in
context and at different tempos. A few of the ones mentioned in Chapter 6
actually do. In any case, be on the lookout for flaws in how the object moves
and how the object appears. Often, you will catch minor mistakes such as dis-
colored pixels or missing pixels, or even major mistakes such as improper
movement (i.e., not enough exaggeration, too fast, etc.) at this stage of the
process. Make corrections to the sequence as needed and do them before
handing off your work to the programmer. It’s recommended that you do at
least two such tests for complex animations, while one test can suffice for less
sophisticated objects.
9. Repeat—Repeat the previous eight steps to create all of the animations
required by your game.
It’s important to point out that different people have different opinions on how to
go about this process. Some, like myself, prefer to create highly detailed figures
and then animate them, while others prefer to work from rough items first.
How you choose to proceed really boils down to a matter of time, efficiency, and
personal taste. When in doubt, particularly when you’re first starting out, I recom-
mend that you work from rough shapes. Later, when you’re more experienced and
comfortable with creating animation, you can work from more detailed object
images.
n Always account for color—Color can affect animations the same way it does
other types of graphics. Always make sure that you choose suitable colors
when creating your animations. Primary actions and secondary actions should
be rendered in colors that make them easy to see. Otherwise, the effective-
ness of the animation can be compromised. For more information on proper
arcade game color usage and selection, refer to Chapters 7 and 8.
n Use tempo wisely—Tempo, if used properly, is your friend. If used incor-
rectly, it is your enemy. Use tempo to pace your animations. Your animations
should never appear to move too fast or too slowly, as this will be perceived as
unrealistic and distracting. Try to mimic nature. Study the speed at which dif-
ferent types of objects move in different situations. After a while, applying the
correct tempo to your animated sequences will become second nature.
n Try to individualize your objects—Adding unique and individualized
touches to your objects has the effect of making them seem real to the
observer. Therefore, every distinct object you create and animate should have
some sort of unique “personality” that distinguishes it from the other objects
on the screen. One of the easiest ways to do this is to apply different degrees
of exaggeration and embellishment (i.e., secondary actions) to each object.
n Keep it simple—Adding unnecessary complexity can ruin an animation
sequence as it opens up the possibility of introducing flaws and other types of
errors into it. To avoid doing this, keep your animations simple as much as
possible. Therefore, stick with using established animation primitives and
minimal frames unless the object requires more subtle effects. In other words,
don’t do any more work than you have to!
n Use exaggerated elements—As an animation device, exaggeration adds
realism and depth to animations. Therefore, use it as much as possible. Exag-
geration is especially important when working with short animation
sequences as they have fewer frames available to them in order to create
effective and convincing motion.
n Constantly observe—Successful animation requires the careful study of the
objects around you. Study how different things move. Study books on anima-
tion such as those by Eadweard Muybridge in addition to studying how the
animation featured in your favorite arcade games was created. Studying these
sources will give you useful insights into animation techniques and will enable
you to create better and more accurate animations.
In any case, don’t get discouraged if the animation process doesn’t go smoothly for
you the first few times you try. Like most things, creating effective animations
takes time and experience. Start off by working on simple animation sequences
first. After you’re comfortable with the basic animation process and are satisfied
with the results, move on to animating more sophisticated subjects.
354 Chapter 9 / Arcade Game Animation
Remember, when it comes to creating arcade game animation, take baby steps.
Never bite off more than you can handle. Take it slow. As the adage says, “Rome
wasn’t built in a day,” and neither will your animations. Be patient and keep prac-
ticing. The more you do, the better you will eventually get at creating arcade
game animation.
Due to limitations imposed by different design styles, not all animation primitives
can or should be used. For example, the more complex animation primitives really
are not suitable for use in a retro-style arcade game. It simply doesn’t look right.
Conversely, games with realistic design styles should not overuse simple anima-
tion primitives as they undermine the element of realism present in these games.
Table 9-35 summarizes the suitability of animation primitives in the most common
design styles.
TABLE 9-35: Summary of Animation Primitive Usage in Arcade Game
Design Styles
Animation Primitive Cartoon Retro Realistic
Cylindrical ´ ´ ü
Rotational ü ü ü
Disintegration ü ü ü
Color flash ü ü ü
Scissors ü ü ´
Growing ü ü ü
Shrinking ü ü ü
Piston ü ü ´
Squeeze ü ü ´
Swing ü ü ´
Slide ü ü ü
Open/close ü ü ü
Bounce ´ ü ´
Stomp ü ü ´
Slinking ü ´ ü
Flying ü ü ü
Walking ü ü ü
Running ´ ´ ü
Jumping ü ü ü
Crawling ´ ´ ü
356 Chapter 9 / Arcade Game Animation
NOTE: The information presented in Tables 9-34 and 9-35 are general sug-
gestions only. Every arcade game project is unique and can define its own
rules for the use of animation primitives.