Sprite artwork is commonly used in video games. Spritesheets contain multiple sprite frames in a single image to efficiently display animations. Creating game animations differs from movies as games require interactivity. Eadweard Muybridge pioneered motion studies through sequential photography, creating early animated images and film projectors. Spritesheets display frames in quick succession to simulate movement. Coding sprite animations involves creating the image, updating the displayed frame, and drawing it to the screen.

1. SPRITE ARTWORKS
VC 772 - GAME ARTWORK

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.

5. 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;

6. 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.

8. 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.

9. SIMULATION OF A SPINNING ZOOPRAXISCOPE

10. 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.

11. 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.

12. CG ART TO SPRITE
• Check the most
iconic things in the
character arts put
in on the sprite
• Don’t be too
detailed, since it
will be drawed
again and again
• Practice, practice,
practice

13. CG ART TO SPRITE
• Don’t forget to do
the sprite from
front, side and
behind
• Check the art once
again if you want
to add some iconic
detail

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

16. 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.

17. 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.

18. 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).

19. CODING SPRITESHEET ANIMATIONS
1.Creating the image
2.Updating the image to each frame of the
animation
3.Drawing the frame to the screen

20. CREATING THE IMAGE

21. 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.

23. ANIMATED SPRITE