Using Sprite Sheet Animation in HTML5 Canvas

On July 5, 2012, in HTML5, by James

In this post, we will talk about how to use sprite sheet animation png file and JavaScript file to make animation in the HTML5 canvas. Last time, we talked about how to generate the sprite sheet animation in flash. In that post, we are using Flash cs6 to generate a sprite sheet .png files as well as a JavaScript file which can be used directly in the HTML5 page to render the animation in canvas. Here, I will show you how to do it. First of all, let’s the animation I have made in HTML 5 canvas by sprite sheet and JavaScript. The amazing part is that it can work well in iPhone and iPad just because it is HTML5!

This is a sprite sheet animation in HTML5 canvas.

In this example, we are using the sprite sheet png file and an easeljs resource Javascript file which we generated from Flash cs6. If you don’t have the resource file, you can download the source code package here, or you can visit my previous tutorial:Create Sprite Sheet From Flash For HTML5 to generate these file by your self.

Now, let’s see the source code about this example.

<html>
<head>
<title>Sprite Sheet Animation in Html5 Canvas Example</title>

<script type="text/javascript" src="easeljs-0.4.2.min.js"></script>
<script type="text/javascript" src="FLashcs6SpriteSheetTest.js"></script>
<script type="text/javascript" src="spritesheettest.js"></script>
</head>

<body onload="init()">
<canvas id="mycanvas" width="200" height="400"></canvas>
</body>
</html>

In the text.html file, we include three JavaScript files:

  • easeljs-0.4.2.min.js
  • FLashcs6SpriteSheetTest.js
  • spritesheettest.js

EaselJS is a JavaScript Library which provides a good solutions for working with rich graphics and interactivity in HTML 5 canvas. Flashcs6SpriteSheetTest.js is a JavaScript which implement the sprite sheet animation with EaselJS, and the spritesheettest.js is main JavaScript file to make them working well.

var stage;

window.onload = init();
function init() {
stage = new Stage(document.getElementById("mycanvas"));
stage.enableMouseOver();

var ssanimation = new Platypus_Animation();
stage.addChild(ssanimation);
ssanimation.x = 20;
ssanimation.y = 9;

stage.update();
Ticker.addListener(window);
}

var update = true;

function tick() {
if(update) {
stage.update();
}
}

In spritesheettest.js file, we will call init() function after all resource are loaded. Then we initialize the stage on the given Canvas DOM and add the sprite sheet animation on the canvas. To make the animation running, we need to call stage.update() all the time. Therefore, we call Ticker.addListener(window); so that the function tick() will be called per 50 milliseconds by default.

In this example, we know that using Sprite Sheet Animation in HTML5 canvas is quite easy. This is because all the tough part are done by EaselJS and Flash CS6 when you export the animation to Sprite Sheet. We just add the animation object on the stage. If you don’t have the animation implementation Javascript file (FLashcs6SpriteSheetTest.js in this example), we need to write by ourselves to load the sprite sheet png file and render the animations. This part will be more difficult. In the future post, I will show you an example about how to create animation from sprite sheet file with EaselJS.

Tagged with: html5Javascript 

Leave a Reply

Free WordPress Theme

Premium WordPress Themes