Spritely speaking

Many years ago, a computer geek invented a cool way to render and display small images on a computer screen. These images would move around on the screen and even collide with other objects. The computer geek called these images sprites, and that name has stuck ever since.

Sprites versus non-sprites

A sprite is simply an image that represents an object on the screen. Examples of sprites include characters, NPCs, weapons, alien spaceships, and rocks. Anything that can move on the screen or be hit by another object in the game is a sprite. Objects that don't interact with other objects aren't sprites. Examples might include mountains in the background, the ground, and the sky.

Obviously, it takes both sprites and non-sprites to implement a game. Also, the distinction is a little arbitrary. Some games implement all of the images in the game as sprites because it is more convenient to treat all images in the game in a consistent manner.

Flipbook animation

Did you ever create a flipbook when you were a kid? To jog your memory, here is how it worked. First, you sketched a simple figure on a notepad. Then you went to the next page and sketched the same image, but this time something was slightly different. You continued sketching images that were slightly different from the original on successive pages. When you were done, you flipped the pages at the notebook edge and saw what appeared to be a rudimentary movie.

Another example is a movie. Movies are recorded on film as frames. The film is then run through a projector, which plays the film back one frame at a time. The key, as mentioned before, is to play frames back at least 24 frames per second to fool the eye into thinking that there is fluid motion.

Framed animation

2D sprite animation works much like a flipbook. An artist draws successive versions of an image. When the images are rendered one after another, it appears to move. Each image in an animation is called a frame. It takes at least 24 or more fps to create a convincing animation. Obviously, more frames will create a smoother animation.

The preceding image illustrates a very simple animation using four frames. The only thing that changes is the robot's arm position. Played in sequence from Frame 1 through Frame 4, the arm would appear to swing from the front to the back and then forward again. If this was combined with moving the sprite to the right, then you would get a very simple animation of a walking robot.

Tip

As the preceding example illustrates, I am not an artist! I am a coder, so the art created for this book will be very simple. It is actually common for very simple placeholder art to be used in the initial stages of a game. This allows the programmers to test features of the game while the art team is working on the real art that will be put in the game at a later stage.