EaselJS

Easier 2D graphics in canvas

Bitmap, Shapes, Sprite Sheet

Animation

Text

Mouse & Touch enabled

EaselJS in action

Draw a circle

  var canvas = document.getElementById('main-canvas');
  var stage = new createjs.Stage(canvas);

  var circle = new createjs.Shape();
  circle.graphics.beginFill('#ff8080').drawCircle(0, 0, 40);
  circle.x = 50;
  circle.y = 150;

  stage.addChild(circle);

  // Update stage and render to the screen
  stage.update();
          

EaselJS in action

or load a bitmap

  var circle2 = new createjs.Bitmap('../assets/sphere.png');
  circle2.x = 250;
  circle2.y = 150;

  stage.addChild(circle2);

  stage.update();
          

EaselJS in action

Animation

  createjs.Ticker.addEventListener('tick', onTick);

  function onTick(event) {
    if (!event.paused) {
      var timeSinceLastTick = event.delta * 0.001;  // in seconds

      // circle moves 10 pixel per second
      circle2.x += 10 * timeSinceLastTick;
    }

    // re-draw after all updates
    stage.update();
  }
          

EaselJS in action

Sprite Sheet

  var spriteSheet = new createjs.SpriteSheet({
    images: [ 'assets/monster.png' ],
    frames: { width: 64, height:64, regX: 32, regY: 32 },
    animations: {
      walk: [0, 9, true, 4],
      idle: [10, 20, true, 4]
    }
  };

  var monster = new createjs.BitmapAnimation(spriteSheet);
  monster.gotoAndPlay('walk');
          

SoundJS

Sound FX or background music

Automatic Sound File loading

Detect Supported Formats

Loading sound

createjs.Sound.addEventListener('fileload', createjs.proxy(this.onFileLoaded, this));
createjs.Sound.registerSound('assets/mySound.mp3|onFileLoaded/mySound.ogg', 'Badoom');

function onFileLoaded(event) {
  var instance = createjs.Sound.play('Badoom');
  instance.setVolume(0.5);
}
          

PreloadJS

Load images, sounds, JavaScript files

Use XHR2 with fallback!

Loading Queues with Pause and Resume

PreloadJS

First, load all assets ...

var preloader = new createjs.LoadQueue();
preloader.installPlugin(createjs.Sound);
preloader.addEventListener('complete', onAssetsLoaded);

preloader.loadManifest([
  { id: 'bgm-intro', src: 'assets/bgm01.mp3|assets/bgm01.ogg' },
  { id: 'ball', src: 'assets/ball.jpg' },
  { id: 'sprite-walk', src: 'assets/monster.png' }
]);
          

PreloadJS

... then use them!

  function onAssetsLoaded() {
    createjs.Sound.play('bgm-intro');

    var circle2 = new createjs.Bitmap(preloader.getResult('ball'));

    var spriteSheet = new createjs.SpriteSheet({
      images: [ preloader.getResult('sprite-walk') ],
      frames: { width: 64, height:64, regX: 32, regY: 32 },
      animations: {
        walk: [0, 9, true, 4],
        idle: [10, 20, true, 4]
      }
    };
    var monster = new createjs.BitmapAnimation(spriteSheet);
    monster.gotoAndPlay('walk');
  }