This article explains how to use the EaselJS and TweenJS libraries to display images and animations on a browser canvas. EaselJS was first published to GitHub by Grant Skinner in January of 2011 and was recently released as part of the CreateJS suite of libraries for doing flash-like development using HTML5.
The following examples are provided:
- Setting up the canvas and displaying an image using Stage and Bitmap
- Treating multiple images as one object using Container
- Cell animation using Spritesheet & BitmapAnimation
- Moving images around the screen using Tween
Setting up the canvas and displaying an image using Stage and Bitmap
Start by setting up a canvas object. Although no Flash development experience is needed, many of the concepts and terms used in EaselJS are based on their Flash equivalents so the canvas is represented by a Stage. Add Bitmap objects to the stage to display images. Bitmaps can be initialized by passing in a URL or a reference to an HTML image element.
Treating multiple images as one object using Container
In Zolo's Adventure the characters carry items around in their hands. The character and the item they are carrying are separate images that are grouped together and treated as a single object using a container so they can be hidden or moved using the properties of the container.
Cell animation using SpriteSheet & BitmapAnimation
The cell animation in the next example appears in the game when the character dies after triggering a trap. The sequence of images used in the animation are displayed below. Although each image in the sequence could be in a separate file, images are frequently combined into a single file called a sprite sheet.
To display the animation with Easel, construct a new SpriteSheet using the image. Specify how the sheet is divided into individual cells and where animation sequences begin and end. Then pass the sprite sheet to a BitmapAnimation object. Add the bitmap to the stage and use it to play animations from the sprite sheet. Provide a callback function to "respawn" the player when the animation is over.
Moving images around the screen using Tween
The final example uses the TweenJS library to make a player walk around the screen. The sprite sheet used for walking has a separate set of images for when the player is facing left and right. You could create a sprite sheet with images of the player facing in only one direction and then use canvas/easel to flip the image. I don't know how computing intensive it is to flip the image but having a sequence for each direction allows us to skip that step at run time.
There are two factors to consider when animating and tweening. For animation you must decide how long each frame will be displayed and specify that as the number of frames per second (FPS). For tweening you must specify how long it will take to move the object to it's destination. In the example below, the player should move at a constant speed regardless of how far they need to travel. The example adds two functions to the DisplayObject in EaselJS so you can specify the speed of an object and calculate the duration for a given tween based on that speed.
Since the player will be animated while they are moving, construct a sprite sheet and bitmap animation similar to the one in the previous example. A few additional properties are added to the player such as the cell height, width, and the direction the player is facing. When the stage is clicked start the animation that shows the player walking in the direction of the click. Then use the Tween object to move the player to the location that was clicked. When the player reaches the destination switch to a frame of them standing still.
Special Thanks to Wayne
All of the artwork in Zolo's Escape was created by Wayne Denier who is a talented artist and colleague. Wayne is graduating from the Full Sail Online game development bachelors program in August of 2012. In addition to the images and animations, he also suggested a number of improvements to the mechanics and game play so people could use a mouse instead of a console controller. Visit Wayne's blog at http://rightbrainleft.net.