An Introduction to Spritesheet Animation MMF 2

Spritesheets Spritesheets have been used in games for a long time. Classic games such as Legend of Zelda: A Link to the Past and even modern games like Steppy pants have used them.

animation, sprite, and spritesheet

Animation Creating animations for video games is much different from creating animations for movies. The major difference is that a movie is meant simply to be viewed, while the purpose of a video game is to interact. For this reason, animating for video games can be much more difficult than animating for video games;

Back in 1872, Eadweard Muybridge was commissioned to prove whether a horse lifted all four legs off the ground at once when it ran. To do so, he set up a series of cameras along a track and took pictures in quick succession as a horse ran by. This process allowed him to capture 16 pictures of the horse's run. In one of the pictures, the horse did indeed have all four legs off the ground. Eadweard Muybridge 9 April 1830 – 8 May 1904, born was an English photographer important for his pioneering work in photographic studies of motion, and early work in motion-picture projection.

Muybridge later repeated the experiment and placed each photo onto a device that could project the photos in rapid succession to give the illusion of the horse running, creating the first movie projector.                                                  The process of changing images in quick succession to give the illusion of movement is called animation.

Simulation of a spinning zoopraxiscope

Sprite A sprite is a single graphic image that is incorporated into a larger scene so that it appears to be part of the scene.

Sprites are a popular way to create large, complex scenes as you can manipulate each sprite separately from the rest of the scene. This allows for greater control over how the scene is rendered, as well as over how the players can interact with the scene. It is not uncommon for games to have tens to hundreds of sprites. Loading each of these as an individual image would consume a lot of memory and processing power. To help manage sprites and avoid using so many images, many games use spritesheets.

Spritesheet When you put many sprites into a single image, you get a spritesheet.

Spritesheets are used to speed up the process of displaying images to the screen; It is much faster to fetch one image and display only a part of that image than it is to fetch many images and display them. Spritesheet animation is nothing more than taking a spritesheet and changing which sprite is rendered in quick succession to give the illusion of movement, much like a film projector displaying a movie.

HINT: It is important that each frame of the spritesheet is the same width and height; otherwise, drawing the animation to the screen is very difficult.

Spritesheets are made up of two parts: frames and cycles Parts of a Spritesheet Spritesheets are made up of two parts: frames and cycles A frame is a single image (or sprite) from the spritesheet. Going back to the Muybridge's horse example, each picture of the horse in the image would be a frame. When the frames are put in an order that creates a continuous movement, it creates a cycle. Putting the photos of the horse in the order that they were taken produces a "run" cycle since the horse is running (as opposed to a "walk" or "idle" cycle).

Coding Spritesheet Animations Creating the image Updating the image to each frame of the animation Drawing the frame to the screen

Creating the image

Updating the image to each frame of the animation To update the spritesheet animation, all we have to do is change which frame we will draw.

the spritesheet divided into each of its frames and numbered.

Animated Sprite