Master CreateJS: PreloadJS, SoundJS, TweenJS & EaselJS Quick Guide

Introduction

This article provides a concise, example‑driven introduction to the major CreateJS libraries used for HTML5 game development: PreloadJS, SoundJS, TweenJS, and EaselJS. It shows how to load assets, manage audio, create tweens, and render graphics on a canvas.

PreloadJS

PreloadJS is a resource‑loading manager that coordinates the loading of files before the game starts.

LoadQueue class

The LoadQueue object can load a single file or a queue of files and emits several events:

complete – triggered when the entire queue finishes loading

error – triggered on load errors

progress – overall loading progress

fileload – fired when an individual file finishes loading

fileprogress – progress of a single file (only for XHR‑loaded files)

Supported file types include BINARY, CSS, IMAGE, JAVASCRIPT, JSON, JSONP, MANIFEST, SOUND, SVG, TEXT, and XML.

manifest = [
    {src: "art/sky.png", id: "sky"},
    {src: "art/ground.png", id: "ground"},
    {src: "art/hill2.png", id: "hill2"},
    {src: "art/hill1.png", id: "hill"},
    {src: "static/grant.json", id: "grant", type: "spritesheet"}
];

var loader = new createjs.LoadQueue(true, "../_assets/");
loader.on("fileload", handleFileLoad);
loader.on("complete", handleComplete);
loader.loadManifest(manifest);

To preload audio files, install the SoundJS plugin and set the base path:

preload.installPlugin(createjs.Sound);
preload = new createjs.LoadQueue(true, "../_assets/art/");

Retrieve a loaded asset with:

preload.getResult('id');

Progress bars can be built using the fileload and complete events.

SoundJS

SoundJS is an audio playback engine that selects the optimal playback method based on browser capabilities. Audio files are treated as modules that can be loaded and unloaded at runtime.

Single‑sound usage

var assetsPath = "../_assets/audio/";
var src = assetsPath + "M-GameBG.ogg";

createjs.Sound.alternateExtensions = ["mp3"]; // fallback for unsupported formats
createjs.Sound.addEventListener("fileload", playSound);
createjs.Sound.registerSound(src);

function playSound(event) {
    var soundInstance = createjs.Sound.play(event.src);
}

Multiple‑sound usage

var assetsPath = "../_assets/audio/";
var sounds = [
    {src: "Game-Break.ogg", id: 1},
    {src: "Game-Spawn.ogg", id: 2},
    {src: "Game-Shot.ogg", id: 3},
    {src: "Game-Death.ogg", id: 11},
    {src: "Game-Break.ogg", id: 12}
];

createjs.Sound.alternateExtensions = ["mp3"];
createjs.Sound.addEventListener("fileload", createjs.proxy(soundLoaded, this));
createjs.Sound.registerSounds(sounds, assetsPath);

AudioSprite (sound synthesis)

createjs.Sound.initializeDefaultPlugins();
var assetsPath = "./assets/";
var sounds = [{
    src: "MyAudioSprite.ogg",
    data: {
        audioSprite: [
            {id: "sound1", startTime: 0, duration: 500},
            {id: "sound2", startTime: 1000, duration: 400},
            {id: "sound3", startTime: 1700, duration: 1000}
        ]
    }
}];
createjs.Sound.alternateExtensions = ["mp3"];
createjs.Sound.on("fileload", loadSound);
createjs.Sound.registerSounds(sounds, assetsPath);
// after load is complete
createjs.Sound.play("sound2");

Install the audiosprite tool globally:

npm install -g audiosprite

On macOS, install FFmpeg with the required codecs via Homebrew:

brew install ffmpeg --with-theora --with-libogg --with-libvorbis

Generate an audio sprite JSON file (example command):

audiosprite --autoplay bg_loop --output mygameaudio bg_loop.wav *.mp3

TweenJS

TweenJS provides a simple yet powerful tweening interface for animating numeric object properties and CSS styles.

Basic example

createjs.Tween.get(target)
    .to({x:300}, 400, createjs.Ease.bounceInOut)
    .set({label:"hello!"})
    .wait(500)
    .to({alpha:0, visible:false}, 1000)
    .call(onComplete);

get

– obtain a tween for a target object to – animate properties set – set properties instantly wait – pause the tween call – invoke a callback createjs.Ease.bounceInOut – easing function

Guide path animation

createjs.MotionGuidePlugin.install(createjs.Tween);
createjs.Tween.get(target).to({guide:{path:[0,0,0,200,200,200,200,0,0,0]}}, 7000);

EaselJS

EaselJS simplifies working with the HTML5 canvas by providing a display list, interaction model, and helper classes.

Asset preparation

Sprites are created from a JSON file generated with Flash and Zoe tools. The JSON defines frames and animations.

Development steps

Create the canvas element and stage:

<canvas id="testCanvas" width="960" height="400"></canvas>
var stage = new createjs.Stage("testCanvas");

Add background elements (sky, ground, hills) using Shape and Bitmap objects.

sky = new createjs.Shape();
sky.graphics.beginBitmapFill(loader.getResult("sky")).drawRect(0,0,w,h);

var groundImg = loader.getResult("ground");
ground = new createjs.Shape();
ground.graphics.beginBitmapFill(groundImg).drawRect(0,0,w+groundImg.width,groundImg.height);
ground.y = h - groundImg.height;

hill = new createjs.Bitmap(loader.getResult("hill"));
hill.setTransform(Math.random()*w, h - hill.image.height*4 - groundImg.height, 4, 4);
hill.alpha = 0.5;

Create the character sprite sheet and sprite:

var spriteSheet = new createjs.SpriteSheet({
    framerate:30,
    images:[loader.getResult("grant")],
    frames:{regX:82, height:292, count:64, regY:0, width:165},
    animations:{
        run:[0,25,"run",1.5],
        jump:[26,63,"run"]
    }
});
var grant = new createjs.Sprite(spriteSheet, "run");

Add all objects to the stage:

stage.addChild(sky, hill, ground, grant);

Start the ticker and update the stage each tick:

createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", function(){ stage.update(); });

Knowledge Points

Enable mouse over

stage.enableMouseOver(20);

Enable touch

createjs.Touch.enable(this.stage);

Request Animation Frame

createjs.Ticker.timingMode = createjs.Ticker.RAF;

Cache

shape.cache(x, y, width, height);

Mask

bmp.mask = star;

Collision detection

myShape.hitTest(x, y);

References

http://createjs.com/

https://github.com/CreateJS

https://github.com/tonistiigi/audiosprite