Master CreateJS: Preload, EaselJS, TweenJS, and Advanced Canvas Techniques

Overview of CreateJS

CreateJS is a suite of four JavaScript libraries for HTML5 canvas games: EaselJS for drawing sprites, vectors and bitmaps; TweenJS for animation effects; SoundJS for audio playback; and PreloadJS for resource preloading. Each module can be used independently.

PreloadJS

PreloadJS loads static assets via a manifest array. After loading, resources are retrieved with queue.getResult. Cross‑origin images can pollute the canvas; to avoid this either configure the server with Access-Control-Allow-Origin: * or enable anonymous CORS loading by passing "Anonymous" as the third argument to LoadQueue.

// Asset manifest
var manifest = [
    {src: './images/[email protected]', id: 'tyre'}
];
var queue = new createjs.LoadQueue();
queue.on('complete', handleComplete, this);
queue.loadManifest(manifest);
function handleComplete() {
    var tyre = queue.getResult('tyre'); // use the loaded image
}

// Enable anonymous CORS loading
var queue = new createjs.LoadQueue(false, '', 'Anonymous');

EaselJS Core API

Bitmap – draw images.

Shape – draw vectors such as rectangles and circles, with styling (shadow, alpha, scaling).

Text – render text.

Container – group multiple display objects.

Typical Drawing Workflow

Create a stage, create a display object, set its properties, add it to the stage, and call stage.update().

var canvas = document.querySelector('#canvas');
var stage = new createjs.Stage(canvas);
var rect = new createjs.Shape();
rect.graphics.beginFill("#f00").drawRect(0, 0, 100, 100);
stage.addChild(rect);
stage.update();

Tick Event and Frame Rate

Use createjs.Ticker to execute code on every frame. The ticker can be paused, resumed, or removed. Set the desired FPS (commonly 60) and choose the timing mode. The default uses setTimeout at 20 FPS; switching to RAF (requestAnimationFrame) yields smoother animation.

// Register tick handler
createjs.Ticker.addEventListener("tick", tick);
function tick(e) {
    if (!e.paused) {
        stage.update();
    }
}
// Pause / resume
createjs.Ticker.paused = true;  // pause
createjs.Ticker.paused = false; // resume
// Remove handler
createjs.Ticker.removeEventListener("tick", tick);

// Set FPS and timing mode
createjs.Ticker.setFPS(60);
createjs.Ticker.timingMode = createjs.Ticker.RAF;

Touch Support

Enable touch interaction on the stage.

createjs.Touch.enable(stage);

Managing Display Objects

Containers group objects and manage layering via the children array. Use setChildIndex to reorder objects and getChildByName for quick lookup.

var container = new createjs.Container();
container.addChild(bgImg);
container.addChild(bitmap);
stage.addChild(container);
bitmap.name = 'quick';
var quick = stage.getChildByName('quick');
quick.visible = true;

Image Manipulation

Bitmap

var bg = new createjs.Bitmap("./background.png");
stage.addChild(bg);
stage.update();

Masking

var stage = new createjs.Stage("gameView");
var bg = new createjs.Bitmap("./img/[email protected]");
var shape = new createjs.Shape();
shape.graphics.beginFill("#000").drawCircle(0, 0, 100);
bg.mask = shape;
stage.addChild(shape);
stage.addChild(bg);
stage.update();

Blur filter

var blur = new createjs.BlurFilter(5, 5, 1);
bg.filters = [blur];
bg.cache(0, 0, bg.image.width, bg.image.height); // keep filter across frames

Cropping with Rectangle

var stage = new createjs.Stage("gameView");
var bg = new createjs.Bitmap("./img/[email protected]");
var rect = new createjs.Rectangle(0, 0, 121, 171);
bg.sourceRect = rect;
stage.addChild(bg);
stage.update();

Seamless Scrolling Background Demo

The following code creates two background bitmaps and moves them with the ticker to achieve an endless scrolling effect, simulating a car accelerating.

this.backdrop = new createjs.Bitmap(bg);
this.backdrop.x = 0;
this.backdrop.y = 0;
this.stage.addChild(this.backdrop);
this.w = bg.width;
this.h = bg.height;

var copyy = -bg.height;
this.copy = new createjs.Bitmap(bg);
this.copy.x = 0;
this.copy.y = copyy;

createjs.Ticker.addEventListener("tick", tick);
function tick(e) {
    if (!e.paused) {
        that.backdrop.y += that.speed;
        that.copy.y += that.speed;
        if (that.copy.y > -40) {
            that.backdrop.y = that.copy.y + copyy;
        }
        if (that.copy.y > -copyy - 100) {
            that.copy.y = copyy + that.backdrop.y;
        }
    }
    that.stage.update(e);
}

Demo URL: http://jdc.jd.com/fd/h5/peidan/demo/car.html

References

https://github.com/pfan123/code-snippet/issues/10

How to use CreateJS to write HTML5 games – Part 1: EaselJS introduction

How to use CreateJS to write HTML5 games – Part 2: Image handling with EaselJS

How to use CreateJS to write HTML5 games – Part 3: Sprite creation

How to use CreateJS to write HTML5 games – Part 4: TweenJS and Tick animation

How to use CreateJS to write HTML5 games – Part 5: PreloadJS and SoundJS

How to use CreateJS to write HTML5 games – Part 6: Simple shoot‑'em‑up (part 1)

How to use CreateJS to write HTML5 games – Part 7: Simple shoot‑'em‑up (part 2)