Spritesheet animations in WebGL/Canvas using EaselJS

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:

Let’s store our spritesheets in EaselJS spritesheet objects, like so:

EaselJS Spritesheet documentation here

Now let’s initiate our first canvas:

Now we can use the assigned variable to start or stop a spritesheet:

To stop

There you have it!

Catalin

My name is Cătălin Berța and I'm a front-end web developer. I was born in Focsani, Romania and currently living in Bucharest. Started playing with some good old html tables ever since 2004 as a hobby, turned out to be a full-time career! :) I've had the chances to experience and witness web development's rapid growth over the years where I've mainly focused on front-end web technologies.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">