Sprite Sheet Animation

Beginner's Guide to Sprite Sheets Tutorial

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

Sprite Sheet Example Introduction Advantages Create the Sprite Sheet Draw the Image Tips Summary Sprite Sheet Graphic Source Code Page

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.

var aImages = new Array(iIndex);
aImages[0] = new Object();
aImages[0].x = 0;
aImages[0].y = 0;
...
aImages[15] = new Object();
aImages[15].x = 768;
aImages[15].y = 768; 
	

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.

tapForward() accesses method drawImage() of the 2D canvas object. The parameters this example uses for drawImage() follow:

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.

context.drawImage(
 imgSprite,
 aImages[iCounter].x,
 aImages[iCounter].y,
 256,
 256,
 0,
 0,
 256,
 256
);
	

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

function runForward(){
 
if (timer == null){

timer = setInterval(
function(){
 tapForward();
 },
100
);
} 
} 

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.

Summary

This tutorial provided an introduction to sprite sheets. Sprite sheets offer lightweight animation for Web pages. Lightweight means sprite sheets often download more quickly than traditional animation. We explained a simple method to implement JavaScript for sprite sheets. The tutorial included 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.

See the Beginner's Guide to Sprite Sheets Source Code for more details. Enjoy more HTML5 Animation Examples below.

HTML5 Animation Examples

Animated Effects
Copyright © 2015 Seven Thunder Software. All Rights Reserved.