Using sprite sheets for animation


show more Using sprite sheets for animation provides you with in-depth training on Web. Taught by Ray Villalobos as part of the EaselJS First Look show less
please wait ...

Using sprite sheets for animation

A sprite sheet is a bitmap that combines a series of frames into a grid and is commonly used to create animations in games. EaselJS makes it super easy work with sprite sheets. It has a special class called a BitmapAnimation class, so let's take a look. The BitmapAnimation class is a child of the DisplayObject. You can see how it works right here. In addition to this class, you're going to need to look up the SpriteSheet class because the bitmap animation class takes a sprite sheet that is on this page of the EaselJS documentation.

You can create a sprite sheet in any program that lets you generate a bitmap. I've placed an example sprite sheet in the images folder so you could see what one looks like. For the ship I'm animating the red lights so that it looks like the light travels from side to side in the ship. At the end of the animation, I drew an explosion sequence. There is a bunch of programs that make it easier to generate sprite sheet. I like working with vector art, and the ...

Using sprite sheets for animation
Video duration: 8m 2s 1h 28m Beginner

Viewers:

Using sprite sheets for animation provides you with in-depth training on Web. Taught by Ray Villalobos as part of the EaselJS First Look

Subject:
Web
Software:
CreateJS EaselJS
Author:
please wait ...