Attached to enchant.js are several modules (plugins) which add additional functionality to the main library.

How to use them

<script src="js/enchant.js" />
<script src="js/nineleap.enchant.js" />
<script src="js/twitter.enchant.js" /> 

All of the plugins are required to be loaded after the main library, enchant.js, is loaded. All libraries with dependancies must be loaded after the library they depend on is loaded. Be especially careful of the order in which you load plugins when using gl.enchant.js or plugins which interact with 9leap.

If a plugin fails to load the following error will be displayed (v0.6.0):
superclass is not defined.


Comprehensive class documentation for all plugins can be found at the following URLs:

Plugin Namespaces

Namespaces for plugins are contained within the enchant object. For example, all classes included in gl.enchant.js are defined within locations such as: 

In the plugin namespace, for items containing the assets property, those assets are preloaded. For instance, in the following code taken from nineleap.enchant.js, the assets start.png and end.png get preloaded. Be careful. In the current version (v0.6.0), if these assets are not already preloaded by the time the game tries to run, an error will be thrown, and loading will stop.

enchant.nineleap = { assets: ['start.png', 'end.png'] }; 

In the code of a game, the first function that runs is enchant();. Here, all of the classes defined by the namespace are exported globally. Specifically, the following happens:

var Core = enchant.Core;
var Sprite = enchant.Sprite;
var Entity = enchant.Entity;
... (and so on)

var Core =; // Overwrites the Core class with a new definition
var Shader =;
var Sprite3D =;
... (and so on - this is where plugins get exported) 

By being defined in the global namespace, plugin classes become usable. (ex. var game = new Core(320, 320);)
Plugins are newly created and updated often, so please check the documentation for the most up-to-date information on their implementation.

Plugin List

The current wise9/enchant.js repository contains the following plugins. This list is structured reflective of the hierarchy of the plugins.

  • avatar
  • nineleap
    • twitter
    • memory
    • socket
  • ui
  • widget
  • box2d
  • gl
  • extendMap

The official plugin posting repository is located at wise9/enchant.js-contrib. Plugins coded by the community are posted here.

The next section gives a summary about the various official plugins. Detailed explanations and sample code can both be found in the official documentation and the source code of the corresponding plugins.


This is a library of character animations created from a library of image elements made by UEI.
Below are classes prepared by this plugin:

  • Character image class
  • Enemy Character image class
  • Scenery image class

Use of the avatar.enchant.js image elements is restricted to free games created with enchant.js (for-profit games cannot use this library), but may be used without obtaining permission from UEI or displaying anything special on the screen. Please be aware that this plugin is supported by a silent server API.


This plugin manages communication to the public game dev and sharing site 9leap if the game is uploaded to the site. This plugin has plugins which depend on it (twitter, memory), and supports the following functions:

  • Communication with the 9leap Score Ranking API
  • Display of the Game Start and Game Over splash screens

The start.png and end.png images must be saved in the same directory hierarchy as the html file which calls the game. Feel free to use the sample images included in the images/ directory.


Dependent plugin: nineleap.enchant.js
If a user logs in to 9leap with their Twitter account information, this plugin obtains the relevant account info from Twitter.
The following information can be acquired (for users who are logged in):

  • User information
  • Recent tweets
  • Info on users the user is following

For instance, this could be used to create a game where your followers on twitter appear as chracters in an RPG.


Dependent plugin: nineleap.enchant.js

9leap supports the saving of specific data for users who login with a Twitter account.
The following information can be obtained with this plugin:

  • Individual user data
  • Data shared by all users

Data saving functionality can be carried out with cookies or localStorage, but methods such as linking to a Twitter account, saving to the repository of an individual game, and referencing the common repository of shared user data can also be used.


This library contains definitions for User Interface element classes that can be used in games. The following classes are included:

  • D-pad (Pad)
  • Analog Keypad (APad)
  • Button (Button)
  • Font image [like spritesheets for text] (MutableText)
  • Score label (ScoreLabel)
  • Time label (TimeLabel)
  • Life label (LifeLabel)
  • Bar (Bar)

The main image elements for this library (pad.pngapad.pngicon0.pngfont0.png) must be located in the same directory structure as the html file which calls the game. Feel free to use the sample image files located in the images/ folder.


This plugin adds support for drawing using WebGL. Shaders, quaternions, light sources, cameras, and so on are included, and an intuitive API is supported. Other libraries with similar functionality, such as three.js also exist. The following example classes are supported:

  • Sprite3D (corresponds to the Sprite class)
  • Scene3D (Corresponds to the Scene class)
  • Camera3D (Camera class)
  • Light3D (Lighting class)

Although several submodules exist to provide additional functionality, the core gl.enchant.js library can be used by itself for many different things.

This plugin defines classes supporting skinning animation.

This plugin is for loading in 3D model data via the collada file format.

This plugin allows the reading of animation data via pmd and vmd file formats for the MMD (Miku Miku Dance) animation tool, developed in Japan.


Plugin supporting the use of various User Interface elements.


tl.enchant.js functionality has been merged with enchant.js.
Below are the included classes:

  • Timeline class
  • Action class
  • Easing class

For instance to make the main character (an instance of the player or Sprite class) move to (160,160) over 30 frames:, 160, 30); // Move to (160,160) over 30 frames 

To display the “Game Over” alert after 300 frames:{ alert("Game Over"); }); 

It is also possible to specify time-based animation instead of frame-based animation. Even if screen drawing lags, the item in question will end up where it is supposed to in the amount of time specified.;, 160, 1000); // -> Move to (160x160) over 1000ms 

For an explanation of the animation engine, please refer to the following:

This post is also available in: Japanese