Posted by & filed under Release Notes.

Hey everyone! This is Ryohei from the enchant.js dev team.

We’ve been saying we’ll release v0.6.0 for a while, and it’s finally here! Download the latest version from github.

Major updates for this version are as follows:

Canvas based

Yes, it’s finally here. Up to v0.5, every sprite was rendered in a separate div. Starting with v0.5.2, Canvas-based drawing was supported through the CanvasGroup class. Going forward with v0.6, Canvas-based drawing has become standardized. However, operations written in previous versions which require DOM-based drawing can still carry this out. (The CanvasGroup class is now obsolete.)

Specifically, we’ve added two classes which support drawing, CanvasLayer and DOMLayer, and Scenes can now have multiple Layers. Entities added to the display tree of a Scene with addChild() are partitioned into the appropriate layer (if DOM is in the _element property, it goes in the DOMLayer, and if not, it goes into the CanvasLayer), and then drawn.

By default, within the same scene, objects drawn via DOM are displayed on top of objects drawn via Canvas. (Within the same Scene, CanvasLayer is displayed beneath the DOMLayer.)

The API up till now is not being destructively changed. Regardless of this update, Entities, Sprites, and Scenes can all still be used as they were. However, since the Sprite private properties ._element and ._style are now obsolete, the possibility exists that previous code which uses these properties may encounter issues when running.

If you want something to be displayed in the DOM, just create a class with DOM in the ._element property.

Specifically, we’ve improved the performance of drawing in games running in PC browsers, and those which run many sprites simultaneously. Benchmark results for rotation and movement of 1,200 Sprites in Google Chrome has increased from 8-9 fps (v0.5.2) to 20-28 fps (v0.6.0).

There are some changes regarding pixel-based drawing, so if actual screen resolution and set resolution differ, the program will respond differently from before. If you upgrade versions of enchant.js for an existing game, please double-check it to make sure it still behaves the same.

NOTE: At the time of this writing (11/26/2012), due to a bug inherent in the standard browser in Android 4.1, we have been informed of several issues. (e.g. game movement becomes very slow in specific conditions, changing text is impossible, etc.) To support version Android 4.1, please use enchant.js v0.5.2 or earlier.


enchant.js now by default supports the playback of sound via the WebAudioAPI Sound class. Usage of the API can be controlled with the enchant.ENV.USE_WEBAUDIO flag.

The WebAudioAPI is packaged with PC-based Webkit browsers and iOS6.

In iOS, the restriction on audio element usage has been loosened a bit, and elements can now be played back freely at any point starting from the first touch event.

Object Collection

Object collection is now supported. This basically means an operation can now be carried out on all instances of a given class if desired.

For instance, up till now, if you wanted to erase all characters currently displayed on the screen (of the Chara class – shown below), you would have needed to do the following:
// prepare an array of the characters beforehand
var characters = [];
characters.push(chara3);// and now to erase all of them
for(var i = 0; i < 3; i++){

In v0.6, since Classes themselves now have a “collection” property, all instances which have been added to any specific scene can now be acquired in array form.

Also, in future releases, we plan on including a class method which allows an instance method to run for all instances of that class. v0.6 already includes an example of this type of processing with the intersect() method.

For instance, if collision detection needs to take place between a spacecraft (instance of player) and all bullets from all enemies (a collection of all instances from the EnemyShot class), the following can be written:
var shots = player.instersect(EnemyShot);
// An array of all instances of EnemyShot currently intersecting the player is returned
[enemyshot, enemyshot, ..]shots.forEach(function(shot){
// code run for each enemyshot colliding with the player
})if (shots.length >= 0) {
// code run even if there is only one bullet which hits the player

To run collision detection on all enemies (a collection of Enemy class instances) with shots from the player (a collection of Shot class instances), the following can be written:
var pairs = Enemy.intersect(Shot);
// A two-dimensional array is returned containing enemies and their respective shots, if collision is taking places
// [[enemy, shot], [enemy, shot], ..]

For now, collections are simply arrays, but we are strongly considering implementing an interface with features similar to selectors/attribute selectors in jQuery and Ruby’s Enumerable module.

Game -> Core (renamed)

With the implementation of widget.enchant.js, we have seen enchant.js being used for the development of applications in addition to games. For this reason, starting in v0.6, we are changing the name of what has previously been known as the Game class to the Core class. For all intensive purposes, the Game class is now the Core class, and still has the same features, etc.
// dev/src/Core.js
enchant.Core = enchant.Class.create( ... );// dev/src/Game.js
enchant.Game = enchant.Core;

The Game class can still be used in the same manner as before this release, but we cannot recommend this from a compatibility standpoint. Plugins which extend the Game class will still function correctly, but going forward, when updating or creating plugins which extend the Game class, we highly recommend changing them to extend the Core class instead.

Animation Engine (previously called tl.enchant.js)

An animation engine has been added. All functionality previously provided by the plugin known as tl.enchant.js has been fully integrated into the main library.

For instance, if a main character (instance of the Sprite class known as player) should move to position (160,160) over a period of 30 frames:, 160, 30);
// move to (160, 160) over 30 frames

Or if the “Game Over” alert should be displayed after 300 frames:{
alert(“Game Over”);
Furthermore, time-based animation commands (as opposed to frame-based animation commands) can now be issued. Regardless of screen drawing lag, objects will still be moved in accordance with the specified time.;, 160, 1000);
// move to (160,160) over 1000ms

For more info on the animation engine, please consult the following link:

util.enchant.js -> ui.enchant.js

Util.enchant.js (which was released experimentally) has been merged into ui.enchant.js. We plan on refactoring ui.enchant.js in the future.

Improved English Documentation, Addition of German Documentation

Due to the hard work of an intern from Germany, the quality of translation for the English comments and documentation has been improved, and a German version of the documentation has been added.

Deletion from the Documentation Repository

We’re managing our documentation with jsdoc, and a number of discrepancies have popped up between the github repository and the documentation, so we’ve deleted the repository version. Documentation can still be accessed at the following links, or downloaded from the gh-pages branch.

That’s it! The upgrade from v0.5 to v0.6 is the biggest enchant.js has seen since its release. As always, if you come across bugs or the like, please contact us via the github issues page or post a pull request.


This post is also available in: Japanese

Comments are closed.