Introduction to CreateJS – Part II

In the first part, we talked about creating geometrical shapes in canvas using EaselJS. In this article, we will talk about animating sprites in canvas with EaselJS. We will use the sprites sample as a base and we’re going to use this PNG files as a source of our sprite sequences.

Our pegasus in running mode:

royalPegaGuard

which contains 16 different sprites.

Setting Up the Platform

First, let’s define a canvas element, for moving the running pegasus between the beginning and the end of our canvas. Along with canvas, we will define two buttons to start and reset the animation.

< div>

< canvas id="gameCanvas" style="background-color:#607d8b;" height="100" width="290">< /canvas>

< /div>

< div>

< button id="start" onclick="init();" style="background-color:#cfd8dc">Start< /button>

< button id="reset" onclick="reset();" style="background-color:#cfd8dc">Reset< /button>

< /div>

Building the SpriteSheet and the Sprite

Before initializing SpriteSheet, the first step is to load the complete sequence contained in the PNG file via the following code:

function init() {

//find canvas and load image

canvas = document.getElementById("gameCanvas");

imgPegasus.src = "images/royalPegaGuard.png";

imgPegasus.onload = handleImageLoad;

imgPegasus.onerror = handleImageError;

}

SpriteSheet encapsulates the properties and methods associated with a sprite sheet.

So, what is a sprite sheet? It is a bitmap image file that contains several smaller graphics in a tiled grid arrangement. By compiling such several graphics into a single file, it enables animate and other applications to use the graphics while only loading a single file. The loading efficiency becomes necessary in situations such as game development where performance is especially important.

We can create a sprite sheet from a selection of any of these combinations such as movie clips, button symbols, graphic symbols, or bitmaps.

Let’s initialize the SpriteSheet to initialize our animation’s content. Once loaded, we can start the animation.

var spriteSheet = new createjs.SpriteSheet({

//image to use

images: [imgPegasus],

//width, height & registration point of each sprite

frames: { width: 60, height: 64, regX: 32, regY: 12 },
// To slow down the animation loop of the sprite, we set the frequency to 4 to slow down by a 4x factor
animations: {

walk: [0, 9, "walk", 4]

}

});

Note that we are creating a new sequence named “walk” which will be made of the imgPegasus image. This image will be split into 16 frames with a size of 60×64 pixels, which is the core object to load the sprites and create sequences.

Here comes the initialization of the Sprite object. This object helps in animating the sequence and positioning the sprites on the screen.

// create a Sprite instance to display and play back the sprite sheet:

animation = new createjs.Sprite(spriteSheet);

// start playing the sequence:

animation.gotoAndPlay("walk");

animation.name = "royalPegaGuard";

animation.direction = 90;

animation.skewX = 0.5;

animation.skewY = 0;

animation.x = 14;

animation.y = 32;

// have each pegasus start at a specific frame

animation.currentFrame = 10;

stage.addChild(animation);

Here, we are just passing the SpriteSheet object as a parameter in the Sprite constructor. We are then setting position and direction for our frames.

The last step is to update the position of the sprite for every X seconds. In order, to achieve this, we will make use of the Ticker object which provides a centralized heartbeat broadcast at a specific interval.

createjs.Ticker.addEventListener(window);

createjs.Ticker.framerate = 15;

// update the stage:

createjs.Ticker.on("tick", tick);

The following code will be called every 15 milliseconds to update the position of our Pegasus.

function tick(event) {

animation.x += animation.skewX;

animation.y += animation.skewY;

// update the stage:

stage.update(event);

}

The moving Pegasus can be found in this image GIF.

AnimatedSprite-easeljs

The complete source code can be found on the GitHub. There are other community tutorials available on the official site. Some of them are using BitMapAnimation instead of Sprite object, which is part of old EaselJS versions. The docs for old EaselJS versions can be found here. Thank you for taking the time to read this article.

One thought on “Introduction to CreateJS – Part II

Comments are closed.