3.3 Sprites
Sprites, also called characters in this paper, move on their
own. The system updates them every clock “tick” (explained
below), where they are erased, moved, and redrawn. Sprites
may be created (activated) or destroyed (deactivated). This
is done internally, with a visible flag. When this value is
true, the sprite may move. This game limits the number
of sprites shown at a time to a set number (20), however,
JavaScript allows dynamic arrays with the push command.
Thus, this set number is done for programming convenience,
not a limitation.
Every sprite has a “sprite sheet” associated with it, which
is an image containing a matrix of sprite views. This is
similar to the way tiles are shown on screen, where only
one view appears at a time. All sprite sheets are stored
as Portable Network Graphic files. The game adopts the
convention of using a row to represent one way that the
sprite faces. Every movement in the same direction means
that the game shows the sprite view located in the next
column. This way, the sprites appear animated.
Example sprite sheets can be seen in Figures 3 and 4. The
first row corresponds to the images shown when this sprite
moves left, the second row has the images shown when it
moves right, and the last row shows the images used when
the sprite gets hit. For example, the sprite in Figures 3
looks the same whether it travels left or right. Notice the
slight up and down differences between images on a row,
meant to give the sprite a jittery appearance, as if it flies.
In Figures 4, we see how the sprite looks different depending
on which way it faces. All that we really need for animation
is a slight change from one column to the next.