enchant.js Developers Blog

The Latest News on the HTML5 + JavaScript Game Engine enchant.js

Archive for the ‘未分類’ Category

The enchant.js Developers Blog has moved!

The enchant.js Developers Blog has been moved to a new domain. From now on, new information regarding the engine will be posted to the new site (link below). This site will no longer be updated.

Thank you everyone for your support, and we’ll see you on the new site!

New enchant.js Official Site & Blog: http://enchantjs.com

  • Comments Off
  • Filed under: 未分類
  • enchant.js has just hit version 0.4.4. Despite its trademark ease of use and versatility, there’s this mysterious tl.enchant.js thing to figure out. We now introduce you to an ambitious young man struggling with how to use it…

    Newbie: Frack!

    Old-Timer: What’s the problem?

    Newbie: Oh, forget it. Just writing a shooting game. You know, I sure wish I could do more with the way the bad guys move…

       enenmy.addEventListener("enterframe", function(){
           this.y ++;

    Old-Timer: Ah-ha. You have them dropping from the sky, but you want to them to zig-zag around and rotate. Right?

    Newbie: A shooting game is a lot more exciting if you have to keep changing your aim, don’t you think?

    Old-Timer: Yeah. Well, I tried writing it so it would zig-zag, but this makes it a bit tricky to change the movement partway through.

       enenmy.addEventListener("enterframe", function(){
           if(Math.floor(enemy.age / 30) % 2 == 0){
               this.x += 0.5;
               this.y += 0.2
               this.x -= 0.5;
               this.y += 0.2

    Newbie: Wait, can’t you do that in tl.enchant.js?

    Old-Timer: What’s that? You mean you aren’t using WebGL?

    Newbie: Not GL, TL. It’s a plugin that lets you to control movement along with time.

    Old-Timer: Never heard of it.

    Newbie: It used to be called animation.enchant.js. Anyway, tl.enchant.js makes it ridiculously easy to control sprite movement. Check it out:

       enemy.tl.moveBy(30, 10, 30).moveBy(-30, 10, 30).loop();

    Old-Timer: Wait, what does this do?

    Newbie: First, you move to 30,10 over 30 frames. Then, you move to -30,10 over 30 frames. You then repeat. That’s all you need to create a zig-zag movement.

    Old-Timer: That’s how you write it, huh? Dang, that’s easy. Kinda like Flash’s Tweener. How many methods can you connect?

    Newbie: Pretty much as many as you want.

    Old-Timer: So if you write like this…

       enemy.tl.moveBy(30, 10, 30).moveBy(-30, 10, 30).moveBy
    (30, 10, 30).moveBy(-15, 10, 30).moveBy(0, 100, 180);

    Newbie: It should zig-zag, and then move straight forward.

    Old-Timer: Okay, what if I want it delete it from onscreen after making it move forward?

    Newbie: For that you’d use a function from removeFromScene();.

    enemy.tl.moveBy(30, 10, 30).moveBy(-30, 10, 30).moveBy(30, 10, 30).moveBy(-15, 10, 30).moveBy(0, 100, 180).removeFromScene();

    Old-Timer: Just how easy can this get?! Okay, but what about deleting “enemy” from the screen after an attack?

    Newbie: All motions added to the timeline are added via enterframe EventListener, so it won’t be executed after being deleted from the screen.

    Old-Timer: Uh, where is that written?

    Newbie: You can check an explanation in these slides from the enchant.js meetup. [in Japanese]

    Old-Timer: Awesome. Wait, you can use easing too?

    Newbie: That’s right. You can use easing just like in Tweener.

    Old-Timer: No kidding. Alright, let’s try this on your shooting game. It’s already starting to feel more authentic. Okay, but what if I want to make it move while rotating it?

    Newbie: Just use and() to process it simultaneously!

       enemy.tl.moveBy(30, 10, 30).and().rotateBy(360, 30);

    Old-Timer: But wouldn’t it get a little long if you wanted to connect more than three?

    Newbie: Ah, here’s how to solve that!

       enemy.tl.tween({ x: 30, y: 30, rotation: 360, time:30 });

    Old-Timer: Ah, so this object creates twins. If you move this object somewhere, you can create the same movement.

    Newbie: Even if you just “delay” and “then,” you can create a pretty good timer. enchant.js is pretty slick at stuff like telling things to happen after one second…

           // Processing after one second

    Old-Timer: I see, so “then” executes the function. It applies to rootScene, but perhaps you can use it for something besides Sprite?

    Newbie: Yep, you can use it for anything that succeeds Node.

    Old-Timer: I see. Okay, so what if you want to animate an explosion and then delete it at the end?

    Newbie: If you use “cue,” you can apply whatever processing you want after a set period of time.


    Old-Timer: No kidding? That’s awesome. So you can change the START text on the title screen and stuff?

    Newbie: You’d have to rewrite nineleap.enchant.js. Kinda like this.


    Old-Timer: Sweet! How’d you do that?

    Newbie: Just add the line we just talked about to line 17 of nineleap.enchant.js, and rewrite the enchant.nineleap.SplashScene class to what you see below.

    enchant.nineleap.SplashScene = enchant.Class.create
    (enchant.Scene, {
        image: {
            get: function() {
                return this._image;
            set: function(image) {
                this._image = image;
                while (this.firstChild) {
                var sprite = new Sprite(image.width, image.height);
                sprite.image = image;
                sprite.x = (this.width - image.width) / 2;
                sprite.y = (this.height - image.height) / 2;
                this.element = sprite; // Add this line

    Old-Timer: Wow. So, to edit an image directly, you substitute sprite for element!

    Newbie: There’s a lot more you can use it for, but why don’t we let you digest this first?

    Old-Timer: Thanks! This is awesome. I’m gonna have to use this more.

  • Comments Off
  • Filed under: 未分類
  • When is Google ever going to get around to releasing its AR glasses, anyway?

    All this talk about development, with nothing that we’ve actually seen…kinda suspicious, huh?

    In the meantime, at least we can enjoy this dual-screen, see-through crystal touch screen phone from Docomo:

    Pretty kickass, huh? Yeah, that’s what you’d think until finding out that crystal displays are already see-through. In fact, that’s why we light them up from behind; if we don’t, they’re dark and hard to use.

    Wait a minute. So if we were to deconstruct a tablet PC, we could make our own AR glasses?

    Here at ARC we took apart an old Android tablet to see what would happen.

    And…voila! We present the AR Box!

    Erm. Yes, that’s right: a cardboard box turned into a computer. If you look at it from behind you see…

    It’s see through…sort of. Sadly, it’s pretty foggy and lacks that AR feel.

    Incidentally, there’s a certain art to using it…

    What do you know? A peep show for the digital age!

    Dr. J., the mysterious inventor (?) of the AR Box, informs us that an IPS crystal screen might have more of the desired effect. Guess what we’ll be trying next…

  • Comments Off
  • Filed under: 未分類
  • “leapfest 2012″ Invades Akihabara!

    On February 18, UEI was proud to sponsor the event “leapfest 2012″ in Akihabara, Tokyo!

    The event included presentation of prizes for the 9leap contest, speeches, lightning talks, and a “9 Minutes Coding Battle”  to make a game in 540 seconds or less using enchant.js.

    And what would an event be without swag? In the middle is a t-shirt featuring the enchant.js source code.

    We’re planning on selling these at many more events in the future, so be sure to get one for yourself!

    Check out the wise9 report (in Japanese) for more!

  • Comments Off
  • Filed under: 未分類
  • enchant.js seminars have been added to the video-based programming study site dotinstall. You can enjoy lessons in enchant.js free of charge (lessons are in Japanese).


    In its early days the site was invitation-only, but now it is open to the general public. You can log in via Twitter, Facebook, and other accounts.

    Lessons (17 Total)

    #01 What is enchant.js?
    #02 About the Official Site
    #03 Essential Files
    #04 Making a game.js Model
    #05 Displaying a Bear Image
    #06 Explanation for Code to Display Image
    #07 About Sprite Object Frames
    #08 Image Rotation, Enlargement
    #09 Object Succession
    #10 Displaying a Label
    #11 Add Event Listener
    #12 Operating game Frames
    #13 Receiving Input from Users
    #14 About this
    #15 Collision Detection (1)
    #16 Collision Detection (2)
    #17 Creating Game Over Processing

    These seminars start from the very basics. If you’re interested in JavaScript or enchant.js, please check them out!

  • Comments Off
  • Filed under: 未分類
  • We’re about to release a WebGL-compatible version of enchant.js. Hope everyone gives it a try. With this in mind, I’d like to share something I noticed on Twitter the other day.

    The Tweep was hitting a wall with enchant.js classes. Let’s see if we can’t sort out the confusion.

    First of all, JavaScript class inheritance is called prototype base succession and is somewhat unique. For more on JavaScript class inheritance, check out this @IT article (in Japanese).

    However, this type of prototype base inheritance may be a bit difficult to follow for people used to C++, Ruby, Java and other class base inheritance languages.

    Reduced to the bare basics, prototype base refers to a method of constantly copying elements designated as .prototype.

    To explain this, let’s review Java (class base) class definitions. You should get something like this:

    //for Java
    class A {
      int x;
      public A(){
      public  int method(){
    //When using class
    A a = new A();

    The name “JavaScript” may suggest a relationship to “Java,” but its prototype base approach to classes is completely different.

    If you write a class with the same function in JavaScript, it should look something like this:

    //for JavaScript
    A = function(){
    A.prototype.method = function(){
    //When using class
    var a = new A();

    This all may seem a bit baffling when compared to Java. The names are similar, but the contents are completely different.

    But inheritance is even worse. Here’s what you get for inheritance in Java:

    //for Java
    class A {
      int x;
      public A(){
      public  int method(){
    class B extends A {
      int y;
      public B(){
        super(); //Calls up parent class constructor
      public  int anotherMethod(){
    //When using inherited class
    B b = new B();
    b.method(); //Calls up parent class
    b.anotherMethod(); //Calls up inherited class method

    The inheritance class is defined by the keyword “extends.” The A and B class definitions are clearly delineated, making them easy to understand upon a brief glance.

    If you’re used to this, JavaScript inheritance may seem rather unusual.

    A = function(){
    A.prototype.method = function(){
    B = function(){
        A.call(this); //Calls up parent class constructor
    B.prototype = new A(); //Inherited here
    B.prototype.anotherMethod = function(){
    var b = new B();

    The inherited area actually inserts the newly created A (class to be inherited from) object into B.prototype.

    In the case of JavaScript, the fact that an interpreter language, not a compiler language, is at work is key in this inheritance model.

    In JavaScript, the member designated in the prototype properties are automatically copied when creating a new instance by a new operator.

    In inheritance, the parent class information is copied wholesale by the child class (not “copied” in the strictest sense, but implicitly based upon. Please see the @IT article for more information). This is JavaScript’s basic method for inheritance.

    From the perspective of processing (JavaScript) implementation, this allows extremely easy class inheritance. No matter what, all you need to do is copy.

    There’s also no need of a special syntax to define classes or inheritance.

    On the other hand, we can cite the lack of a suppressor tool held by object orientation (all members are public) as a defect.

    This is a significant obstacle in trying to write large programs. Anyone can rewrite the basic programming language at any time to suit their wishes.

    For instance, there are built-in arrays in JavaScript, but one can add or alter array functions themselves whenever they like.

    Array.prototype.remove=function(obj){ //Adds "remove" method to delete arbitrary elements of an array
    	for(i = 0; i < this.length; i++){
     		if(this[i] === obj){
    var hoge = [1,2,3,4];
    	document.write(hoge[i]+','); //Displays contents of array

    In the above code we added added an example method, “remove,” to a preexisting class where it will arbitrarily delete elements of an array.

    So why does JavaScript use this peculiar prototype inheritance system?

    We can propose various reasons for this, but the bottom line is that prototype inheritance is extremely useful for writing compact, quick and dirty programs.

    It’s easy to freely add or alter object members to suit one’s timing and needs.

    We should note the difference here. Whereas in Java and other general class base languages the first-layer functions (treating functions on equal terms with variables) are not supported, in JavaScript they are supported.

    Of course, if you have a good grasp of this and write a program with it, it’s fairly easy for the code to get very confusing very quickly. But if you get used to it you can achieve your programming goals with great ease and speed.

    With that in mind, one must exercise caution when writing a JavaScript program with multiple programmers. You run the risk of intruding on similar code, or unintentionally brushing up against unrelated properties.

    However, in the case of game programming, class base inheritance is in fact quite suitable. With that in mind, in enchant.js Class.create is included as a pseudo-support utility function for class base inheritance.

    The usage of Class.create is extremely simple.

    enchant(); //The enchant.js good luck charm
    A = Class.create({       // Declares Class.create class
        initialize:function(){  //Constructor
    //Used in the same context as typical JavaScript
    var a = new A();

    This jumble is where the literal expression of an object is delivered in Class.create.

    In this way, at one glance, class definition along the lines of Java class declarations can be expressed. In the case of inheritance, you end up with something like what you see below.

    A = Class.create({
    B = Class.create(A,{   //Inherits A
    	A.call(this);  // Calls up A constructor
    var b = new B();

    In this manner, you get a cleaner expression than by using prototype for inheritance. Even for programmers used to class base inheritance, this is a much easer-to-read code than using JavaScript prototype inheritance as is.

    Moreover, because prototype base functions can also be used, you can write exciting code that could be tiresome to construct and full of unexpected difficulties in JavaScript.

    For instance, each instance you can add methods with the same name that perform radically different functions.

    A = Class.create({
    var m = [];
        var obj = new A();
        switch( i % 4 ){
            case 0:
    	    obj.method=function(){ //Rewrites method() with completely different contents
            case 1:
    	    obj.method=function(){ //Rewrites method() with completely different contents
            case 2:

    Neat, huh?

    If we put this to practical use in game programming, we can define the basic enemy character class in Class.create, and just the precise movements of small fry characters with different contents under the same method name.

    When calling up all you need to do is summon a single method name, so programming becomes vastly simpler.

    Of course, even in class base languages, you can achieve this if you define a separate class corresponding to all the enemy character patterns, but there’s not a huge difference between the movements of small fry characters. So if you really need to *only* define the parts that are different, it’s smartest to use the platform base method.

    In this way, if method and property names are the same, we refer to programming methods that *should* produce the same results as “duck typing.”

    If you’re able to use this “duck typing” freely, you’ll be able to write code much more effectively than in programming languages where it is not possible.

    This post may have been a bit tricky. What do you think? Did you follow us?

  • 1 Comment
  • Filed under: 未分類
  • animation.enchant.js v0.1 Released!

    We’re proud to announce the release of the official animation.enchant.js plugin (beta) today. We’re planning on integrating it fully into enchant.js in the future.

    Please download from github!

    animation.enchant.js adds animation queue tools to enchant.js. Our v0.1 features usage by calling up Sprite class: AnimationSprite class.

    It can be used as a simple twin plugin, for instance to move a Sprite to a specific spot, to fade out or in, for visualization of smooth movement and magnification, and more. It can be also be used to delay certain processing, or activate functions before or after certain processing.

    Here’s a sample. If you click the red sprite, you’ll see variation animations in action.

    animation.enchant.js Sample – jsdo.it – share JavaScript, HTML5 and CSS

    Adding Twin

    bear = new AnimationSprite(32, 32);
        rotation: 360,
        scaleX: 2,
        scaleY: 2,
        time: 30

    Expands while rotating.
    (bear.rotation is rotation angle of the bear object, and bear.scaleX, scaleY displasy the scaling. With the addTween method executing the code above, you add an action changing bear queue with 30 frame rotation, scaleX, scaleY.)

    Twin is not merely properties like x, y, scaleX, scaleY, opacity, and rotation, but can be used freely for changes in any property.

    However, for time, onload, callback, and others, there are properties that can be expanded by setting.

    • time: number of frames until twin is completed (required)
    • onload: function executed when twin begins
    • callback: function executed when twin ends

    Will not be executed when onload and callback are not set.


    Easing refers not merely to directly adjusting the levels of a property, but also adding various effects in response to a numerical formula. This may include effects to accelerate a change, and effects to add bounds to an edge.

    Several default easing functions are registered as properties of enchant.Easing. It uses the work of Robert Penner (BSD license).

    bear = new AnimationSprite(32, 32);
        x: 320,
        y: 320,
        easing: enchant.Easing.BACK_EASEOUT,
        time: 30
    // Moves to (320, 320). Includes visualization effects to return when the tip is passed.
    bear = new AnimationSprite(32, 32);
        scaleX: 2,
        scaleY: 2,
        easing: enchant.Easing.BOUNCE_EASEOUT
        time: 30
    // Expands sprite. Includes visual effect for bounds at tip.

    All formulas preset in the ActionScript twin library “Tweener” can be used. A graph about easing formulas can be found in the Tweener document. Please see Aquioux’s blog to confirm actual movement.

    Simple Notation

    There is a simple method for describing twins.

    bear = new AnimationSprite(32, 32);
    // Moves 30 frames to (320, 320). (moveTo: absolute coordinates)
    bear.animation.moveTo(320, 320, 30);
    // Moves 30 frames to (320, 320). (moveBy: relative coordinates)
    bear.animation.moveTo(-320, -320, 30);
    // Fadeout
    // Fadein


    Can be used for various functions not limited to animation.

    // Disappears after 30 frames
    // delay(30) adds an action to do nothing until 30 frames have been exceeded.
    // then(...) adds an action to execute the function delivered in the argument
    // Actions are executed in the order they were added, so the designated functions will be executed when 30 frames have been exceeded
    bear.animation.repeat(function(){...}, 60, 3);
    // Executes designated functions at intervals of every 3 frames for a 60-frame section
    // Executes second function after waiting for the first function to return "true"
    // after(..) executes each function delivered per frame, and if "true" is returned proceeds to the next action
    // Loops animation cue
    // (When one action ends, the action will not be deleted but added to the end of the queue)
    // Pauses animation queue execution
    // Restarts animation queue
    // Empties animation queue

    animation.enchant.js’s new features are perfect for controlling complex animation. We can’t wait to see what you come up with!

  • Filed under: 未分類
  • DevCon5, Take Two

    Greetings! Eric here again.

    The dust now settles on day two of DevCon5, a rush of spreading the enchant.js gospel in Santa Clara.

    David Kaneda, Creative Web Technologist at Sencha, delivered the first keynote of the day.

    David eschewed the format of most of the other presentations, electing to discuss not framework or devices, but rather people and the final user experience. Unlike developers or business guys, end users typically do not care about the web vs. native debate. Despite talks of change, David said, app stores are doing extremely well. With all this in mind, David gave three proposals for developers: 1) stop saying “One Web,” 2) Consider the web for what it is, and 3) Innovate! He stressed the importance of thinking outside the box, and how many of the best innovations come from simple design ideas. Embracing HTML5 will only help this process.

    Next, Jonathan Stark, VP of Application Architecture at Mobiquity, regaled us with “Three Things First: Content and Experience in the Age of Ubiquitous Computing.”

    Jonathan began by stressing a point: mobile is huge, and slated to increase tenfold over the next 5 years. In fact, there are slated to be some 5 billion mobile broadband subscribers by 2016. The phone is becoming more than just a phone: devices like Square demonstrate how it is turning into a hub for human lifestyle. We are entering an age when people will want to access their data anytime from anywhere, on any device. Further, innovations like Siri show that the line between human and machine is blurring. As a result, it behooves developers to focus on mobile, and to not get too hung up on platform but instead focus on ideal output. He reminded us that we have no idea where our content will end up, and as such we should focus on the content itself.

    And a few hours later, lo and behold, it was us!

    Shimizu-san and I took the stage to share the enchant.js and 9leap story with a crowd pleasantly chewing away on midday munchies. We dabbled in game demos, live coding, live shout-outs to the audience, and other merriment.

    A special hats off to Shimizu-san, who delivered the keynote hot off a trans-Pacific flight. Fearless devotion!

    We’ll be on hand for a variety of events in the coming months. Stay tuned, and for DevCon5 attendees reading this, hope to see you again soon!

  • Comments Off
  • Filed under: 未分類
  • Greetings! enchant.js Technical Evangelist Eric here.

    I’m currently lurking in Santa Clara, California, spreading the enchant.js gospel at DevCon5 with my friend Hidemy. Our morning began bright-eyed and bushy-tailed at 7:30 a.m. with setup of our booth at the Network Meeting Center.

    Our booth features the usual assortment of videos, swag, and other welcoming goodness.

    Not to mention our shout-out in the official pamphlet:

    Lo and behold, we found ourselves prominently advertised up on the main event screen. We have the last keynote of the event. No pressure, right?

    The bleary-eyed developers began to pour in, and were quick to find salvation in coffee, donuts, and fruit.

    Please insert your preferred metaphor about demolishing food.

    Today we enjoyed three keynotes. The first was “LinkedIn Mobile: HTML5 and Node.JS” from LinkedIn Directing of Mobile Engineering Kiran Prasad.

    Kiran took us through the process by which the popular networking service has been built for various mobile platforms. His team of eight worked over four months to develop versions of LinkedIn for iOS, Android, and Mobile Web. The usage of HTML5 varies widely…as much as 70% for iOS, as little as 20% for Android, and of course 100% for Mobile Web. Kiran predicted that 3 years from now, 90% of this will be HTML5. He then shared some of the details of LinkedIn’s approach using Node.js. A key difference in HTML5 is all the work that takes place on the client side; Node.js aggregates this information into a single stream. The specifics vary from platform to platform, but the general trend is clearly towards HTML5 adoption.

    Next came courtesy of Khronos Group president Neil Trevett, who spoke on “WebGL and the Visual Web Ecosystem.”

    Neil began by talking about the explosive growth of mobile devices, which are shipping at a rate exponentially higher than traditional computers. As a result the potential clearly exists for HTML5 to become a cross-platform application programming environment, but to do so it must be more than just “more HTML.” The good news is that silicon community is moving to make this new software standardized and as efficient as possible. Neil then cited 3D as an example, with WebGL as a case study. WebGL represents an historic opportunity: 3D on the web, not constrained to rectangular windows, with no plug-in. Neil described how his Khronos Group is working hard to synergize web and native APIs. Industry cooperation is essential for making HTML5 live up to its potential, he said, making it both a stressful and exciting time to develop.

    Finally, we enjoyed “HTML5 and Blackberry” by Ken Wallis, Manager at BlackBerry WebWorks Research in Motion (RIM).

    Ken shared the merits of BlackBerry’s WebWorks, a system whose merits have not been fully recognized. He began by discussing a phenomenon called NIBS: Native Is Better Syndrome. Developers should not fear developing for the web, Ken said, nor view their choice as a competition between native and web. He discussed the unique experience of mobile web developers, who must test on a desktop, a simulator, and finally an actual device. BlackBerry’s Ripple combines the first two steps, speeding up the process. Moreover, BlackBerry and WebWorks are fully committed to open-source. All WebWorks development occurs out in the open on GitHub, and BlackBerry is making an active effort to sponsor JS meetups. WebWorks is proud to note that 13% of its vendors make $100,000 or greater (more than Apple and Android), and Ken stressed that apps created on WebWorks will work on any and all future BlackBerry devices.

    Through it all Hidemy and I fielded a steady stream of inquisitive developers at our booth. We may be sandwiched in a corner behind a pillar, but the crowds just keep coming!

    We ended the day with a networking session hosted in the event center lobby. Pity that the munchies disappeared so quickly…

    Stay tuned for a report from tomorrow, including our DevCon5 keynote!

  • Comments Off
  • Filed under: 未分類
  • We regret to report a bug in the enchant.js online battle plugin socket.enchant.js released on November 30. It’s been fixed an re-released to github as of 12/01/2011. Our apologies to anyone who downloaded the plugin beforehand. We strongly recommend an update to the latest version.
    • Game ID cannot be acquired
    • Loggy login not available

    Please see github for the download. Please see the wise9 article (in Japanese) for information about the bug and corrections.

  • Comments Off
  • Filed under: 未分類
  • Thanks for your patience…we’re proud to announce that the AR programming environment enchant PRO is at last available for iPhone!

    The source code shares much in common with the original Android version, meaning that developers can create AR games for both platforms all at once!

    Of course there’s more to it than just AR recognition…it also features polygon drawing using native OpenGL ES.

    Here’s a look at it in action on an iPhone4S:

    We’ve also updated our Android version,  sychronizing camera photos before and after AR recognition.

    The latest version of the 9leap app, containing all the enchant PRO updates, is now available for download from the Android Market.

    about “enchant.js”

    enchant.js is an HTML5 + JavaScript based game engine. It is a standalone library that enables cross-platform application development for PC, Mac, iPhone, iPad, and Android from just 30 KB of source code.

    enchant.js was developed at Ubiquitous Entertainment Inc.'s Akihabara Research Center, and released April of 2011. Nearly 200 games have been created in its first two months of release, making it the world's most-used HTML5 game engine.

    enchant.js Official Website


    facebook Like