Sprite Sheet Animation

Spinning Sprite Tutorial

Create Spinning Sprites with HTML5

Spinning Sprite Example Introduction Tips Spinning Sprite Sheet HTML Markup JavaScript CSS Summary Source Code Page

Introduction

This tutorial explains how to spin a sprite sheet in two directions. For the basics of sprite sheet creation see the free HTML5 Beginner's Guide to Sprite Sheets Tutorial. This tutorial discusses two optimization techniques, and presents the code to spin a sprite representing an Android tablet.

Sprite sheets provide many advantages for both html5 mobile development and desktop computers. Sprite sheets are indispensable to video game development on the Web. Sprite sheets work great for interactive animated graphics on any mobile device with an HTML5 compatible browser including Androids, iPad, iPhone, Windows Phone, Blackberry 10, as well as Windows PCs and Macs.

Optimization

Optimization speeds up processing, reduces memory consumption, or both. This article provides two minor optimization techniques for sprite sheets.

First the tutorial explains how to implement a spinning sprite using an array in JavaScript. Arrays use a little more memory and download size however they conserve processing power.

Second the tutorial demonstrates scaled graphical output. We included scaled output for the animation. Scaled graphics allows smaller sized images to display at a larger size.

Usually smaller graphics download faster which decreases the time it takes to play the animation. However it should be noted, scaling the graphic may have detrimental effects on optimization. Detrimental effects are dependent on the operating system and browser implementation for the canvas API drawGraphic() method. In many cases smaller graphics speed download time. In some cases smaller, but scaled, graphics slow processing time.

Scaling up a graphic may display blurrier images on screens with high resolution. Scaling up works best for detailed images saved with lossless compression. Scaling up also works well for graphics which display on small resolution devices, such as mobile phones.

The algorithm to compress a JPG image is lossy. This example uses a GIF graphic. The compression algorithm for GIF images employs lossless techniques. A lossless compression algorithm means that no information in the graphic will be lost when the graphic is saved. Crispness, colors, and details remain the same.

A lossy compression algorithm mean hues or values may be modified, when the graphic is saved. Therefore some of the detail, hue, or value, will be lost in the process of saving the image. That explains why some JPG images appear blurry.

Create the Sprite Sheet

Our spinning Android tablet was created with one 8 bit GIF image. GIF images provide a high level of compression when large portions of the graphic display one color. The tablet sprite sheet was optimized for GIF compression with large flat one color areas.

We created the individual frames of the sprite sheet with 3DS Max, then output a series of bitmaps. We composed the bitmaps in Photoshop, taking note of the offsets per frame. We'll use the offsets when preparing the JavaScript.

Each frame of the animation was 160 pixels wide by 95 pixels high.

See the spinning sprite sheet graphic for this example.

Development

We used a multi dimensional array with preset X and Y coordinates as indices into the first and second dimension. Each entry in the array represents one frame of the animation. Therefore each entry in the array tells the code where to start displaying the current frame.

var aImages = [
[0,0], 
[160,0], 
[320,0],
[480,0],
[640,0],
[800,0],
[960,0],               
[0,95], 
[160,95], 
[320,95],
[480,95],
[640,95],
[800,95],
[960,95],
[0,190], 
[160,190], 
[320,190],
[480,190],
[640,190],
[800,190],
[960,190]
];
	

Function tapForward() increments over the objects in the array, similar to code in the Beginner's Guide to Sprite Sheets. Draw each sprite onto the canvas, based on the coordinates previously assigned to the array. Width and height appear cut out from the sprite, based on each frame's size in the sprite sheet.

Similar to code in the Beginner's Guide to Sprite Sheets, function tapForward() has two uses. Tap the canvas to display one animation frame at a time. Select the Spin Top button to animate timed calls to function tapForward().

Function tapBackward() decrements over objects in the array. Function tapBackward() draws sprites from the end of the sprite sheet to the start of the sprite sheet. The Android tablet spins the other direction.

We scaled the sprites when displaying them to the canvas. Each frame was only 160 pixels wide by 95 pixels high in the sprite sheet. However, we displayed each frame at 320 pixels x 180 pixels within the canvas element.

Methods runForward() and runBackward() access the drawImage() function of the canvas object. The parameters used for drawImage() follow:

The following call to drawImage() displays one frame of the sprite sheet.

context.drawImage(
 imgSprite,
 aImages[iCounter][0],
 aImages[iCounter][1],
 160,
 95,
 0,
 0,
 320,
 180
);	
	

When the user taps button Spin Top function runBackward() activates. To animate sprites runBackward() creates a timer and assigns function tapBackward() to activate every fifty milliseconds.

Function runForward responds when the user taps button Spin Bottom. To animate sprites runForward() creates a timer and assigns function tapForward() to activate every fifty milliseconds.

The following listing demonstrates function runForward() assigning a timer to call tapForward() every fifty milliseconds.

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

 runStop();
 
}   
timer = setInterval(function(){

 tapForward();
 
 },
 
 50
); 
  
}

For details see JavaScript in the Android Spinning Sprite Sheet Source Code Web page.

Tap the canvas to see one frame at a time in the Android Spinning Sprite Sheet example. Each tap calls tapForward(). To spin the animation backward select the Spin Top button. To spin the animation forward select the Spin Bottom button.

Select the Stop button to stop the animation timer.

Tips

Be sure to verify the current timer is null before creating a new timer. 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.

Summary

This tutorial explained how to spin a sprite sheet in two directions. For the basics of sprite sheet creation see the free HTML5 Beginner's Guide to Sprite Sheets Tutorial. This tutorial discussed two optimization techniques, and presents the code to spin a sprite representing an Android tablet.

Sprite sheets provide many advantages for both html5 mobile development and desktop computers. Sprite sheets are indispensable to video game development on the Web. Sprite sheets work great for interactive animated graphics on any mobile device with an HTML5 compatible browser including Androids, iPad, iPhone, Windows Phone, Blackberry 10, as well as Windows PCs and Macs.

See the Android Spinning Sprite Sheet Source Code and More HTML5 Animation Examples below.

Have fun and love learning!

More HTML5 Animation Examples

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