EaselJS: custom Display Objects in ES2015

I love HTML5 Canvas, because I’m free to draw anything I have in my mind without the limit of the DOM, and EaselJS is a great library that simplify the traditional Javascript canvas syntax.
EaselJS is based on the concept of the display list ( very similar to ActionScript ) and if you have used it for a while you probably created a custom Display Object by using the official inheritance technique.

Since ES2015 (aka ES6) is still not officially supported by the library (currently 8.x), in this post I’m basically sharing my way to create custom display objects in ES6.

Suggestions are welcome.

SOURCE CODE

index.html

The main HTML file includes the CreateJS library and a < canvas > element.


..
<script src="https://code.createjs.com/createjs-2015.11.26.combined.js"></script>
<canvas id="demo" width="400" height="360"></canvas>
..

App.js

This simple ES6 module creates two instances of our custom component.
The second instance also listens for the custom event animationEnd, dispatched when the fadeIn animations has been completed.


import CircleButton from './CircleButton';

// Init stage
const stage = new createjs.Stage("demo");

// Create the first button
const btn = new CircleButton('Hi');
btn.x = 50; btn.y = 50;

// Create the second button
const btn2 = new CircleButton('hello', 'purple', 50);
btn2.addEventListener('animationEnd', function() {
  console.log ('fadeIn animation completed')
})

// Add both to Stage
stage.addChild(btn1, btn2);

// Ticker
createjs.Ticker.addEventListener("tick", stage);

CircleButton.js

CircleButton extends createjs.Container in order to be used as display object:

// CircleButton.js
class CircleButton extends createjs.Container {

  constructor(text = '', color = '#222', radius = 40) {
    // invoke Container constructor
    super();

    // set props
    this.text = text;
    this.radius = radius;
    this.color = color;

    // Init component
    this.setup();
  }

  setup() {
    // Create a circle shape
    const circle = new createjs.Shape();
    circle.graphics.beginFill(this.color).drawCircle(0, 0, this.radius);
    this.addChild(circle, txt);

    // Create a Text
    const txt = new createjs.Text(this.text, "20px Arial", 'white');
    this.addChild(txt);

    // Center text inside circle
    txt.x = txt.getMeasuredWidth()/2 * -1;
    txt.y = txt.getMeasuredHeight()/2 * -1;

    // FadeIn all
    this.alpha = 0;
    createjs.Tween.get(this).to({ alpha: 0.9 }, 1000).call(this.handleComplete);
  }
  
  // Dispatch an event at the end of animation
  handleComplete() {
    this.dispatchEvent('animationEnd');
  }
}

export default createjs.promote(CircleButton, "Container")

Key Points

  • The custom display object is an ES6 class
  • This class extends the EaselJS Container class and inherits all its behaviors
  • The constructors accepts parameters, sets defaults and calls the super class constructor
  • The component is initialized and contains other display objects
  • The component can dispatch custom events (by using the dispatchEvent method)
  • As the official documentation says the component is promoted to "Container"
  • You can now create instances of the component: const btn = new CircleButton(...)

Also available as a Gist

RESULT

Check out this Pen!

EASELJS DEMO

EaselJS is mainly used to create 2D games and advertising stuff but it represents an amazing tool to create infographics, awesome effects and any interactive user experience. The following video is a short showreel (2 mins) of our first EaselJS components and you can get more links from CreateJS website.

Leave a Reply

Your email address will not be published. Required fields are marked *

Published on: 27 March 2016
Posted by:
Discussion: Leave a comment