enchant.js Developers Blog

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

Archive for January, 2012

Thanks to enchant.js, Ubiquitous Entertainment’s iOS shooting game “GRANDARIUS WING STRIKE” has been ported to HTML5 and JavaScript. The same title is sold at the AppStore; the HTML5 version allows the first level to be played for free.

TechWaveGIGAZINE and other media have kindly featured this new edition of “GRANDARIUS.”

To play: 9leap

For more technical details (Sorry, in Japanese only):
wise9 – HTML5/enchant.js版グランダリウスのソースは739行! HTML5/enchant.jsの生産性はObjective-Cの50倍はあるかも

  • Comments Off
  • Filed under: Announcement
  • 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(){
        x=1;
      }
      public  int method(){
        System.out.println(x);
      }
    }
    
    //When using class
    A a = new A();
    a.method();
    

    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(){
        this.x=1;
    };
    A.prototype.method = function(){
    	document.write(this.x);
    }
    
    //When using class
    var a = new A();
    a.method();
    

    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(){
        x=1;
      }
      public  int method(){
        System.out.println(x);
      }
    }
    
    class B extends A {
      int y;
      public B(){
        super(); //Calls up parent class constructor
        y=100;
      }
      public  int anotherMethod(){
        System.out.println(x*y);
      }
    }
    
    //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(){
        this.x=1;
    };
    A.prototype.method = function(){
    	document.write(this.x);
    }
    
    B = function(){
        A.call(this); //Calls up parent class constructor
        this.y=100;
    }
    B.prototype = new A(); //Inherited here
    B.prototype.anotherMethod = function(){
    	document.write("<BR>"+this.x*this.y);
    }
    
    var b = new B();
    b.method();
    b.anotherMethod();
    

    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){
     			this.splice(i,1);
    		}
    	}
    }
    
    var hoge = [1,2,3,4];
    
    hoge.remove(3);
    
    for(i=0;i<hoge.length;i++)
    	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
            this.x=1;
        },
        method:function(){
            document.write(this.x);
        }
    });
    
    //Used in the same context as typical JavaScript
    var a = new A();
    a.method();
    

    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.

    enchant();。
    
    A = Class.create({
        initialize:function(){
            this.x=1;
        },
        method:function(){
            document.write(this.x);
        }
    });
    
    B = Class.create(A,{   //Inherits A
        initialize:function(){
    	A.call(this);  // Calls up A constructor
            this.y=100;
        },
        anotherMethod:function(){
            document.write(this.x*this.y);
        }
    });
    
    var b = new B();
    b.method();
    b.anotherMethod();
    

    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.

    enchant();
    
    A = Class.create({
        initialize:function(){
            this.x=1;
        },
        method:function(){
            document.write(this.x);
        }
    });
    
    var m = [];
    for(i=0;i<10;i++){
        var obj = new A();
        m.push(obj);
        switch( i % 4 ){
            case 0:
    	    obj.method=function(){ //Rewrites method() with completely different contents
    	        document.write("<BR>");
    	    };
    	    break;
            case 1:
    	    obj.method=function(){ //Rewrites method() with completely different contents
    	        document.write("booe");
    	    };
            case 2:
    	    obj.x=2
    	    break;
        }
    }
    
    for(i=0;i<m.length;i++)
        m[i].method();
    

    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);
    bear.animation.addTween({
        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

    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);
    bear.animation.addTween({
        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);
    bear.animation.addTween({
        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
    bear.animation.fadeOut(30);
    
    // Fadein
    bear.animation.fadeIn(30);
    

    Control

    Can be used for various functions not limited to animation.

    // Disappears after 30 frames
    bear.animation.delay(30).then(function(){
        game.rootScene.removeChild(this);
    });
    // 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
    
    bear.animation.after(function(){...}).then(function(){...})
    // 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
    
    bear.animation.loop();
    // Loops animation cue
    // (When one action ends, the action will not be deleted but added to the end of the queue)
    
    bear.animation.pause();
    // Pauses animation queue execution
    
    bear.animation.start();
    // Restarts animation queue
    
    bear.animation.clear();
    // 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!

  • 8 Comments
  • Filed under: 未分類
  • 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

    Category

    facebook Like