DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Introduction to CreateJS – Part II

In this second and final part of our short series, we use EaselJS, a component library of CreateJS, to create a short animation.

Swathi Prasad user avatar by
Swathi Prasad
·
May. 03, 17 · Tutorial
Like (2)
Save
Tweet
Share
7.14K Views

Join the DZone community and get the full member experience.

Join For Free

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:

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 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.

AnimatedSprite-easeljs

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.

Sprite (computer graphics)

Published at DZone with permission of Swathi Prasad, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Implementing Infinite Scroll in jOOQ
  • Memory Debugging: A Deep Level of Insight
  • Beginners’ Guide to Run a Linux Server Securely
  • Handling Virtual Threads

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: