If you want to add fast spritesheet animations, for example, with generated particle spritesheets, then you can use EaselJS.
EaselJS is part of the CreateJS suite, it is an HTML5 Canvas library and it has grown quite the popularity. One of its components is the Spritesheet Animations.
It has always been using the classic Canvas API to render, but it now caught my attention when they pulled out the big guns and went for WebGL.
They wrote spritecontainer.js and spritestage.js which adds this extra functionality to the library, but I’m not going to get into details on this, we’re here strictly for its Spritesheet component.
Basically, the spritesheet renders in WebGL and falls back to Canvas when WebGL is not supported. It does not offer DOM support, but canvas is already sufficiently supported.
After many researches, trials and errors and tons of awesome help from the CreateJS guys, I have created a Repository on GitHub with a proper setup called SpriteAnim, go ahead and check out the example.
USAGE
From the CreateJS Suite, we need to load
EaselJS v0.8.0+
spritecontainer.js
spritestage.js
And my “snippet”
SpriteAnim.js
It’s very important that you get this version of spritestage.js, as it is a custom version with a fix from one of the CreateJS devs who fixed an important issue with loading the spritesheets before rendering in WebGL, and it is not yet available in EaselJS, not at this point at least.
Now that we have everything loaded, let’s create the canvas element:
1
2
3
|
<canvas id="canvas_id_here"></canvas>
|
Let’s store our spritesheets in EaselJS spritesheet objects, like so:
1
2
3
4
5
6
7
8
9
10
|
var imageData = {
images: ['http://img210.imageshack.us/img210/3984/people8.png'], // Spritesheet path
frames: {width:126, height:126}, // Frame sizes
framerate: 30, // Spritesheet framerate
animations: {
run : [0,120,true] // Name of animation || frames range || boolean whether to repeat animation
}
};
|
EaselJS Spritesheet documentation here
Now let’s initiate our first canvas:
1
2
3
|
var firstCanvas = new SpriteAnim('canvas_id_here');
|
Now we can use the assigned variable to start or stop a spritesheet:
1
2
3
|
firstCanvas.start(imageData,126,126); //Spritesheet object, frame width, frame height
|
To stop
1
2
3
|
firstCanvas.stop();
|
There you have it!