soundjs

This week we finally had the new release of CreateJS, with a lot of changes, starting with the new site and new visual identity! All libraries (EaselJS, PreloadJS, TweenJS and SoundJS) have major updates that improve performance and the architecture.

Some important updates:

New class model with performance improvements:

In the old CreateJS, attributes were defined in the classes prototypes. By moving the definition from prototype to instance, EaselJS could decreases the canvas update time (by stage.update) in more than 2 times (a 100%-150% improvement).

The tick propagation was also improved with a small change: the tick event is reused for all display objects through the propagation of the tick, i.e., the tick event is instantiated only a single time. By avoiding redundant instantiation, the tick propagation has also an improvement of ~100%.

See:

New inheritance model

The inheritance model were updated following the modification of the class model. Now, if you want to inherit some class in CreateJS, you need to use createjs.extend and createjs.promote.

The createjs.extend function set up the prototype and constructor of a new class. The code is pretty simple:

createjs.extend = function(subclass, superclass) {
    function o() { this.constructor = subclass; }
    o.prototype = superclass.prototype;
    return (subclass.prototype = new o());
}

 and this function must be called right after the creation of the new class constructor.

The createjs.promote back up the superclass methods that were overridden. For example, if you create a FlexibleBitmap inheriting from Bitmap and override the method draw, createjs.promote back up the method bitmap draw by creating an alias Bitmap_draw inside the new FlexibleBitmap.

See:

All classes now implement properties for getters and setters

Some changes are pretty straightforward, e.g., Container.getNumChildren() is now replaced by Container.numChildren; but some names have been updated too, e.g., Ticker.getFPS() is now Ticker.framerate. Using properties instead of getters and setters is a good practice, nice to see that on CreateJS.

See:

Other updates

See https://github.com/CreateJS/EaselJS/blob/master/VERSIONS.txt for a full list of changes.

Read more

CreateJS Logo

CreateJS is a great suite of modular libraries and tools to make HTML5 games and other interactive applications. In the core of CreateJS, there is 4 libraries: EaselJS, SoundJS, PreloadJS, and TweenJS. These libraries are completely independent, i.e., they can be used isolated or even with other game libraries.

EaselJS is the main component of CreateJS. EaselJS controls the game loop, the event manager, the hierarchical organization of objects and the rendering system. It works above the canvas element, thus, providing an easy interface to draw shapes and bitmaps.

SoundJS provides a consistent API to use audio in different browsers. It works via plugins which abstract the actual audio implementation, so playback is possible on any platform without specific knowledge of what mechanisms are necessary to play sounds.

PreloadJS is used to preload all assets to your game, such as images, sounds, data, etc. It provides a complete API with an event system so you can track the loading progress and the connection fails.

TweenJS provides tween function for animations. It can be used independently and provide a simple but complete API to track tweening of object properties and chained commands.

Together with these four libraries, the CreateJS suite also comprises a set of tools to aid the game development process, from applications for exporting SWF animations to EaselJS spritesheets to code completion for editors.

Checkout the video below by the creator of CreateJS to have a better overview of what CreateJS is capable of.

Read more