Learn how to create animated sprites with HTML5, for mobile development and desktop Web browsers.

Introduction

This tutorial provides an introduction to sprite sheets.
Sprite sheets offer lightweight animation for Web pages.
In other words sprite sheets often download more quickly than traditional animation.
We explain a simple method to implement JavaScript for sprite sheets.
The tutorial includes some tips regarding preparing sprite sheet graphics.

Sprite sheets usually run well on both mobile devices and full computers.
The sprite sheet example explained in this tutorial, ran great even on some older mobile devices.

What's a Sprite Sheet?

A sprite sheet is a set of images stitched together into one image file.
Each image in the file represents one frame in an animation.
Over time, different areas of the sprite sheet display to the user,
creating the effect of movement.

Advantages

Sprite sheets are easy to create and implement. They can save
on total download size, as well. That means sprite sheet animations
may load faster than traditional animation.
However that depends on the detail and size of the sprite sheet.

Sprite sheets are great for interactive characters in a game.
It's usually faster to download one graphic, containing a set of frames, than
to download individual graphics for each frame of an animation.

Sprite sheets provide the opportunity to create full color
games and online projects, with 8 bit animation sequences.
Often one character in a game requires just 256 colors.
Indexed image files use just 256 colors.
They're often called 8 bit graphics because 28 equals 256.
Often a character's animation sequence may work well on an indexed sprite sheet graphic.
8 bit graphics are generally one third the size of 24 bit graphics, depending on the compression
format used for the image and the amount of repetitive colors.

A game or online project might display in full color, however individual sprites load as lightweight
indexed eight bit graphics.

Create the Sprite Sheet

There are a number of options for creating animation sprite sheets.
Ideally use an imaging application which allows you to save a set of frames stitched together into one sheet.
However other options exist.
For example
use an animation program to create key frames then tween the various frames to create an animation.
Save the animation as a set of graphics, then place them side by side within one large image.

Key frames represent the critical poses of a character or scene in an animation.
Tween frames are the frames in between key frames. Ideally
tween frames display smooth transitions
between key frames.

For great quality use a 3D software application, such as 3DS Max, and save a bitmap image for each frame of the animation.
With Photoshop, place each frame of the animation in one large image, side by side.

This tutorial uses consistent sizes for each animation frame.
That's not always necessary, but it's helpful to keep things simple for now.
The sprite sheet graphic
for this example includes sixteen frames. Each frame is 256 x 256 pixels in dimension.

Development

This example uses a simple array with preset X and Y coordinates, for each entry in the array.
Each entry in the array represents one frame of the animation.
Each entry in the array tells the code where within the sprite sheet to start displaying the current frame.
The following listing shows part of the
sprite sheet array
prepared for this example.

It's probably more efficient to increment coordinates while looping through the animation.
That allows more programmatic control and requires a smaller JavaScript file.
However, the array seemed like a nice solution for demonstrating sprite sheets.
It's easy to see the coordinates and how they are used to display portions of the sprite sheet dynamically.

The size of the canvas was preset for simplicity sake too.
It's a habit to use powers of two for most graphics because 3D hardware often requires
textures in powers of two. However, the example here does not require bitmap image sizes in powers of two,
because this example doesn't use 3D hardware to render to the display.

Powers of two means that dimensions of the image can be measured in terms of of 2x, where x
represents a power. For example 256 is a power of two because 28 equals 256.
The sprite sheet graphic
dimensions equal 1024 pixels wide by 1024 pixels high.
1024 is a power of two because 1024 equals 210.

Draw the Image

Implement function tapForward() to increment over objects in the array
from the start of the array to the end of the array.
This example uses function tapForward() twice.
During animation a timer calls tapForward() every 100 milliseconds.
If the user taps on the canvas, when the timer's stopped, tapForward()
shows the next frame.

When the user
taps on the canvas, tapForward() activates.
Draw one sprite at a time onto the canvas, based on the coordinates assigned to the
array of
coordinates.
The coordinates indicate which portion of the sprite sheet to
cut out and render.

aImages[iCounter].x and
aImages[iCounter].y, are the coordinates into the sprite sheet where we want to begin display of
the current sprite.

256,256, represent the width and height of the current frame to copy from the sprite sheet.

0,0, represents the position within the canvas where we want to display the current frame.

256,256, represents the width and height within the canvas of the current display frame on the canvas.

The following listing demonstrates calling drawImage().
Variable iCounter represents the current
animation frame.
For example the first animation frame would display when
iCounter equals zero.
The last animation frame would display when
iCounter equals the length of the array minus one.

Animate the Sprite Sheet

To animate the sprite sheet
select the Play button.
The Play button's onclick
event listener is runForward().
Function runForward()
creates a timer that calls tapForward()
every one hundred milliseconds.
The following listing demonstrates creating the timer
within function runForward().

Stop the Animation

To see one frame at a time, stop the animation if it's running.
Select the Stop button.
The Stop button's onclick event listener
runStop() stops the timer with the following
listing.

function runStop(){
clearInterval(
timer
);
timer = null;
}

Move One Frame at a Time

To see one frame at a time, stop the animation if it's running, then tap on the canvas in the example
sprite sheet project.
Each tap calls function tapForward() once.
Therefore function tapForward() is used to play the animation
or increment one frame at a time.

Tips

Before creating a new timer,
be sure to verify the current timer equals null.
JavaScript allows assignment of new timer intervals and functions to the same variable.
When that happens, it's difficult to stop the previous timer intervals.

Be sure to have a method which easily or automatically stops the timer.
Include a Stop button or stop the timer programmatically when a specific number of
animation loops process.