Using sprite sheets for animation
Video: Using sprite sheets for animationA 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.
- Next steps
Viewers: in countries Watching now:
- Installing EaselJS
- Understanding how Canvas draws and animates
- Drawing lines and strokes
- Drawing with graphic primitives
- Using the chaining and compacting commands
- Animating shapes
- Working with text
- Importing bitmaps and vector graphics
- Working with sprite sheets
- Handling mouse events
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 ship was originally drawn an Illustrator. You can see the graphic right here. So what I did is I created a series of guides that defined the size of 100x100 pixels and then on each one of the "frames" I create the different parts of my animation.
Once I have this artwork done, I like to use Fireworks, since Fireworks lets you just copy and paste Illustrator graphics, and it has some excellent animation features. So this file called ship.fw.png is also inside my images folder. Once you bring the ship in, you can create a series of States. States are Fireworks' version of frames of animation, so when you go to State 2, I just change the color of the lights on the second and third dot and I continue doing that for every one of these frames.
To create a new frame in Fireworks all you do is just grab an existing frame and you drag it onto this icon that'll create an additional frame at that position. So now we have two frames that look exactly the same. So let me go ahead and get rid of that one. So as I go through and I create my frames of animation, my object will animate. There's even a way of previewing that. You can hit this Play button; you could see how the whole animation plays out. And these are just the different frames that I've inserted into Fireworks. So right over here is where our explosion sequence happen, and I just copy and paste the graphics from Illustrator as well.
These are still vector graphics, so that's kind of cool. So once you have all the states of your animation, you're going to need to create a Slice. Slices are how you export pieces of a Fireworks' document. So you can use this tool right here to create a slice the size of the canvas. I'll just draw a rectangle, and now that becomes a slice. I am going to put this on State 1 so we could see the ship. Once we got our Slice, then we need to go to the File menu and select Export. From here you want make sure that you choose under the Export option to export as CSS Sprites.
I am going to put this on the Desktop. And normally we would click on Options right here and modify some of these options. This is going to create a CSS file as well as the sprite graphic. We're not going to need the CSS class, so most of these options are not going to matter for us. You may want to set the Padding to 0. I think the default is 10 px. It remembers the last thing that you did. We don't need any extra room around each graphic for game sprites, so we could just set the Padding to 0. The layout is not really going to matter; you can set it to be Horizontal, Vertical, or Grid.
And the last thing is the Optimization Preset. You want to make sure you choose something that's not JPEG. A PNG will be a transparent background image, so that's what you want. then I am going to hit OK, I'll go ahead and select Export, and don't worry about this dialog box. So when that happens, let's go back to our Desktop. So if you go to the Desktop, you'll now have a CSS file, which you don't really need. I can just toss that and you'll also have a PNG. So I am going to hit the spacebar because I'm on a Mac to preview that and you can see that the sprite sheet has been generated for you.
So I already have a copy of this in my images folder. So if you want to learn more about Adobe Fireworks and how to generate sprite sheets, check out my course Fireworks CS6 Essential Training. There is a section down here on Drawing with Fireworks as well ask Creating Sprites. So once you have a sprite sheet, it's time to bring it into your EaselJS project. this is mostly like working with a bitmap, but Easel uses a special class called the BitmapAnimation class. Like the bitmap, it's also a child of the DisplayObject.
If you want to review importing bitmaps, take a look at the video on importing bitmap and vector graphics. Let's go back and take a look at the SpriteSheet class. You can see that it looks a lot like a JSON document. So you specify a JSON variable that keeps track of the different animation frames in your sprite sheet, so let's go ahead and create one. We'll call it ss and we'll add a sprite sheet by using the SpriteSheet class. So inside an animations object we're going to create a few name and value pairs.
That way after my ship explodes it will go back and play the animation of the ship flying. Now we'll create an images variable, and here we'll pass it along that location of our sprite sheet. Now we'll create a frames object and then this object will pass along some of the parameters for our animation. So we can pass along a registration point for X and Y. I know that my ship is a 100x100, so the registration will be at 50, 50. And now I'll tell it the height as well as the width of the document. This way when EaselJS encounters the image, it'll know how to break it up.
So I want to specify my fly sequence and that will show our ship in normal mode. Now we need to add our ship as a child of the stage. So I am going to save this, and let me refresh my screen, and we should see our ship appearing with the animations. The animation that is playing is from frame 0 to 15, and that makes our lights go from side to side. So if we want to, we can play another part of the animation. Let's go ahead and try playing the explosion. I am going to save this, and when I refresh you'll see the ship exploding and then immediately go back to the animation of the ship flying.
That's because we specify that at the end of the explode sequence, we would go back to the fly sequence. Because this class is a descendent of the DisplayObject, like the bitmap or shape, we can transform or animate the ship in the Ticker loop. If you want to learn more about animating and transformation, make sure you check out the movies on transforming and animating shapes and animating the bitmap class with math.
There are currently no FAQs about EaselJS First Look.