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
Zolo's Escape
The examples in this article are taken from a browser based video game prototype I developed to experiment with writing applications in JavaScript. The game is called Zolo's Escape and is inspired by the 1984 game Spy vs. Spy for the 8-bit NES. The object of the game is to escape with four items that are initially hidden in different rooms of a building before your opponent can do the same or time runs out. While searching for the items, players set traps for one another and try to avoid or disable the traps set by the opponent. All the source code for Zolo's Escape is available on GitHub.
JSFiddle
All the examples in this article are displayed with JSFiddle which allows you to view the JavaScript, HTML, CSS, and a functioning demonstration in separate tabs. You can also open each example in a new window and experiment with the code yourself.
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.
 |
 |
| player.png | key.png |
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.
Sprite sheet used for animation sequence when player dies
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.
Sprite sheet used for player walking around the screen
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.
