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 for our sprite sequences.

Our pegasus in running mode:

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 several such 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 the 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.

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