enchant.js Developers Blog

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

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
           }else{
               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…

       Game.rootScene.tl.delay(30).then(function(){
           // 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.

    this.tl.cue({
      0:function(){this.frame++;},
      5:function(){this.frame++;},
     10:function(){this.frame++;},
     15:function(){this.frame++;},
     20:function(){game.rootScene.removeChild(this);}
    

    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.

    this.startScene.element.tl.rotateTo(45,1).scaleTo(5,1).scaleTo
    (1,30).and().rotateTo(0,30);
    

    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) {
                    this.removeChild(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.addChild(sprite);
                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: 未分類
  • Announcing enchant.js meetup Tokyo, vol.2!

    We’re pleased to announce that “enchant.js meetup Tokyo vol.2″ will be held on 4/21.

    See this link for details!

  • Comments Off
  • Filed under: Announcement
  • Greetings! enchant.js technical evangelist Eric here.

    The enchant.js team just returned to Japan after a rollicking overseas road trip that sent us to the opposite of the globe, and then criss-crossing the entire length of the United States. Words cannot describe the rolling waves of jet lag that ensued.

    First up was a stop in Boston to present as part of the MIT Cool Japan lecture series. Professor Ian Condry graciously invited us to share our work with his undergraduate students, who peppered us with shrewd and insightful questions. Here we are, delighted to have survived their penetrating minds:

    Then we hopped on a plane for the opposite side of the continent, trading snow for ocean foam in San Francisco. Our goals were twofold: to exhibit at the Game Developers Conference, and to host a memorable Silicon Valley tour for the three grand prize winners of the 9leap contest, pictured below:

    Of course these talented programmers enjoyed seeing Google, Apple, and other Silicon Valley staples, but of special note was a trip to the headquarters of Couchbase hosted by Chris Anderson. Chris candidly shared his experiences working to get a startup off the ground, and inspired us all with a real-time enchant.js hack.

    GDC proved no less thrilling. We vowed to create a booth experience that was just a little bit different…and with that goal in mind, we proudly presented a series of 9 minutes coding battles!

    3-5 times each day, we gathered attendees ’round to watch as our programmers…including the three 9leap winners…each attempted to create a complete game in just 9 minutes. Themes selected by the audience included “Bouncing Balls,” “Cheeseburger Boxing,” “Hell,” “Hot Date,” and “Four Legged Animals.”

    Most audience members were content just to watch, but a few brave souls like Bocoup‘s Boaz Sender jumped into the ring to try and create their own games in 9 minutes or less. Needless to say, many gasps and giggles were shared by all.

    But that wasn’t the end of our trip…the following Sunday we hopped on a plane and shot off to Austin, Texas where we exhibited at SXSW 2012. Jet lag had addled all of brains considerably by this point, but a generous dose of barbecue softened the blow.

    And that’s it…until the next trip! Stay tuned…

  • Comments Off
  • Filed under: Event
  • ASCII Media Works has just released a new book, “enchant.js for Beginners: The Official Guide.”

    UEI is giving aways free copies to schools and libraries. Please check out the wise9 page for more. Currently the book is only available in Japanese, but we hope to release an English edition soon…stay tuned!

  • Comments Off
  • Filed under: Announcement
  • “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).

    http://dotinstall.com/

    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: 未分類
  • 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: 未分類
  • 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 from Day 1 of DevCon5!

    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: 未分類
  • enchant.js meetup! held in Osaka

    We’re proud to announce that held the second enchant.js meetup a few weeks ago in Osaka’s TKP Business Center: enchant.js meetup: Osaka!

    The schedule was as follows:

    Time Presenter Title
    13:00 – 13:30 - Reception
    13:30 - Announcements
    13:40 – 14:00 sidetepism About enchant.js
    14:00 – 14:20 hidemy Making a Game with AtlasX ~Making a Friend Button~
    14:20 – 14:40 shi3z Ruby on enchant.js
    14:40 – 15:00 blankblank Coffee Scriptでenchant.js
    15:00 – - Snacks!
    sidestepism Minigame Programming Session
    16:00 – 17:30 - Hackathon Time
    17:30 – 17:45 - Final Presentation
    17:45 – 18:00 shi3z enchant.js + PRO Roadmap
    18:00 Wrapup

    This time we included hackathon time in which participants contributed games based on a packet we handed out. There was only one hour of programming time, but we were lucky enough to get 6 games out of it.

    Here are links to the presentations: (in Japanese)

    UEI CEO Ryo Shimizu “Hacks with enchant.js”



    Mr. Toya (@blankblank)”enchant.js and coffee script”



    UEI Planner Hidemi Tsuji “Programming for the first time with AtlasX”



    You can check out some of the finished games at 9leap:

    9leap : Sssnakey by usamyu_

    Here’s Weekly Ascii’s report on the event (in Japanese):

    6 Games in One Hour! Kansai’s Sterling Performance at “enchant.js meetup!”

  • Comments Off
  • Filed under: Event
  • A bug in socket.enchant.js (beta 2011/11/30)

    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.

    Greetings! shi3z here.

    This is my three-day cram course, so get ready for a flurry of postings.

    Did you give our last session’s final program a go? The spaceship should follow the movements of your mouse cursor.

    Of course, the secret to this movement lies in the program.

    ship.tick = function(){ // Spaceship will follow your cursor
    this.x += (mouseX-this.x)/10;
    this.y += (mouseY-this.y)/10;
    };

    Let’s explain these one at a time.

    (continued below)

    First of all, the symbol “+=” that follows “this.x” means that the level of the expression to the right will be added to “this.x.” If “this.x+=1,” then this is the same meaning as “this.x=this.x+1.” This notation appears extremely frequently in games, so make a mental note.

    Now then, what about this weird variable “mouseX?” As you may have guessed, this is a variable I made for this special game study system.

    With this variable, the mouse cursor’s X coordinates are already stored in the computer’s memory. Which means that, yes, “mouseY” indicates the mouse cursor’s Y coordinates.

    In this expression, a level of mouseX minus this.x is divided into 10 and into this.x itself.

    What on earth are we talking about?

    First of all, the program wants to move the spaceship near to the mouse cursor. There are several other methods for this that are easier to understand.

    For instance, a program like this:

    ship.tick = function(){ // Spaceship will follow your cursor
    if(this.x > mouseX) this.x-=10;
    if(this.x < mouseX) this.x +=10; if(this.y > mouseY) this.y-=10;
    if(this.y < mouseY) this.y +=10;
    };

    How did the movements change? In the previous code, the ship slipped straight after the cursor.

    In this code, after proceeding at a bit of angle, it should follow chase after the cursor horizontally or vertically.

    What gives rise to this change in movement? It’s all in the source code.

    This latter code, with lots of “if”s, should be easier to understand.

    If the spaceship’s position (this.x and this.y) differs from the position of the mouse, the command tells it to move 10 dots at a time.

    However, when for instance the cursor is at an angle other than 45 degrees, the amount of increase for x and y becomes 10 each, and the angle of movement eventually changes to 45 degrees.

    This movement is extremely awkward and strange.

    By comparison, the first example is simple and effective.

    What sort of movement does this formula create?

    When you subtract the spaceship’s current coordinates from those of the cursor, this becomes the hector stretching between the spaceship and the cursor.

    If we add this, the spaceship will suddenly warp to the position of the mouse cursor.

    You can try this out with a simpler program.

     ship.tick = function(){ // Spaceship will follow your cursor
    this.x += mouseX-this.x;
    this.y += mouseY-this.y;
    };

    Getting rid of the division by 10, the spaceship should suddenly move as though clinging to the cursor.

    By dividing by ten, the closer the spaceship drew to the cursor the more precise its movements became, creating that unique sliding effect.

    Why does this smooth movement agree with us?

    For one thing, it has an air of reality about it.

    It resembles the actual movement of real-life objects rather well.

    Cars physically cannot stop abruptly. They must first drop their speed bit by bit.

    If you run at full speed and then suddenly stop, you will stumble forward a few steps.

    This movement contains that same sort of sensation.

    Now then, it’s a bit dull with just a spaceship, isn’t it? Let’s try some other objects as well.

    A rock seems appropriate. A “for” loop should be easy to use here.

    function onLoad() { var ship= new Image('img/starship.png');
    ship.tick = function(){ // Spaceship will follow your cursor
    this.x += (mouseX-this.x)/10;
    this.y += (mouseY-this.y)/10;
    };

    for(i=0;i<10;i++){
    rock = new Image('img/rock.png');
    rock.x = Math.random()*320;
    rock.y = Math.random()*480;
    }
    gameStart();
    }

    When you execute, the results should be something like this:

    A rock is puttering around a white expanse of space. It’s an asteroid.

    However, nothing happens if this spaceship bumps into the asteroid. That’s rather boring, so let’s make it so that the game ends when the ship hits the asteroid.

    function onLoad() {

    function onLoad() {
    var ship= new Image('img/starship.png');
    ship.tick = function(){ // Spaceship will follow your cursor
    this.x += (mouseX-this.x)/10;
    this.y += (mouseY-this.y)/10;
    };

    ship.onHit = function(){ // Crashed!
    alert("CRASHED!");
    }

    for(i=0;i<10;i++){
    rock = new Image('img/rock.png');
    rock.x = Math.random()*320;
    rock.y = Math.random()*480;
    }
    gameStart();
    }

    However, this is a bit of a persistent program, and when you crash, the “CRASHED” warning will stay open.

    In order to stop it, you need to move the cursor to the correct position and reload.

    “alert” is one of the commands (functions) that JavaScript possesses, and has the function of displaying warning windows. The “ship.onHit” function is another special function called up by the system, summoned when the object hits another Image.

    Here, when the “ship” hits another object, the game opens the warning window.

    With this as your base, give the following problems a try. See you again soon!

    1)  Line up “rock” with a “for” loop without using random numbers, and create an electric pen of nervousness game!

    2) Define rock.tick and try moving the meteorites too.

    3) Try making both moving and non-moving meteorites.

  • Comments Off
  • Filed under: Tutorial
  • Greetings! enchant.js Technology Evangelist Eric here.

    The gears in my biological clock had barely greased themselves back into Japan time when another flight across the big blue yanked them out of whack once again. Fortunately, the hemming and hawing of a confused Circadian rhythm found solace in the unexpected warmth of a little city called Boston.

    Yes, we (the “we” being Akihabara Research Center director Ryo Shimizu, fellow enchant.js-er Hidemy, and me) were in Boston to take part in the monthly Boston HTML5 Game Development Meetup!

    By pure chance, our presentation marked the one year anniversary of the meetup, which is co-organized by Pascal Rettig and Darius Kazemi (who also organized this month’s New Game Conference).

    The event was hosted by the lovely folks at MocoSpace in their gloriously creaky 100-year old office. The event organizers were kind enough to grant us the first speaking slot of the evening. We started out with some live coding from Mr. Shimizu:

    After a discussion of enchant.js’ origins, development, and key features, I took the stage to present a more detailed look at what the engine has to offer.

    You may be looking at the photos and thinking, “this meetup looks awfully small.” If so, you’re correct: just over 20 people were in attendance. But conversely, this intimate setting proved a boon. Nearly everyone present asked at least one question, and the resulting discussion felt like just that: a conversation with real back and forth.

    Best of all, we got not one, not two, but three invitations for future speaking engagements. Boston, could you be any friendlier?

    After our talk we enjoyed a presentation from Microsoft’s Chris Bowen about IE9′s use of HTML5…as well as some tantalizing glimpses of still-secret Windows tech.

    And what would an event be without swag? We’re pleased to report that all but two of the enchant.js t-shirts we brought went home with attendees.

    I wish I could say that the evening ended with a bang. Unfortunately, it ended with some rather dubious crabcakes from a legal seafoodery.

    All the same, a pretty darn good evening.

    We’ll be on hand next month at DevCon5 in Santa Clara. Hope to see you there!

  • Comments Off
  • Filed under: Event
  • Greetings! shi3z here.

    The other day I had fun as both a guest and a participant at the Pacific Rim Mini Game Development Olympics, but I felt a bit bad about winning the Grand Prize. I’ve got lots of experience, and knew what to do, and next time I think it best that I not take part.

    But I had a lot of fun, both with the event and the mini games themselves.

    I hope to do it again.

    However, most of my programmers had reached the limits of their energy, and I was left with only two.

    In a fix, I decided to take it upon myself to teach Hidemy…who had zero experience in game programming…the basics in three days and send her to participate in the contest. Would this work?

    Continued below:

    In fact, the “Super Easy Programming” guides were originally put together so that Hidemy would be able to learn the basics.

    Truth be told, I wasn’t sure how quickly an English Literature major like her could pick it up.

    Last night, after we had all eaten, I said, “After you’ve read Alan’s guide, make a program of your own and send it in.”

    This was 8 o’clock.

    Then, to my amazement, at 12 o’clock…just 4 hours later…Hidemy sent the following in:

    //Flower
    function flower(){
    for(i=0;i<180;i++){
    if( i<10 ){
    move(2);
    turn(1);
    }if( i>170 ){
    move(2);
    turn(1);
    }else{
    move(1);
    turn(1);
    }
    }
    }

    function onLoad(){
    logo.init();
    penDown();
    for(j=0;j<9;j++){
    flower();
    turn(90);
    }
    penUp();
    }

    She sent in two others as well:

    I was stunned at the speed with which she absorbed this information.

    I thought to myself, “This just might work.”

    With that in mind, I decided to start the guide to game programming.

    Alan’s guide is easy to understand but takes a while to get through, so I’ve gather below a .zip file of everything you need to make a game.

    Please download the file below.

    Game Basics: (game.zip)

    It’s similar to the files that Alan came up with.

    The only real difference is the presence of a file called “game.js” and an “img” folder.

    First, open main.js in the text editor.

    For those of you who’d rather use a browser, here’s a link:

    http://junk.wise9.jp/game/

    Our first program is to display a game character.

    function onLoad() {
    banana = new Image('img/banana.png'); // The character appears here
    }

    The key point of this program is “new Image.”

    This command creates a new image and inserts the variable “banana.”

    This “Image” is a new program I defined specifically for the purpose of teaching game programming. In JavaScript, you can call up clusters of programs from within another.

    We call these clusters of programs “classes” or “libraries.” Actually, classes and libraries are in truth something slightly different, but for the moment we won’t worry about that. If you’re interesting you can look it up, or wait for Alan to discuss it in his series.

    Game development is filled with dull and troublesome tasks. With that in mind, I’ve put together this group of the minimum ingredients necessary to create a game. If this were food, it would be a shrink-wrapped instant meal. We can’t call it gourmet, but anyone can make it and be satisfied. Think of it that way.

    This sort of class contains all the experiences of the programmer who determined the classes. This Image class is one of those.

    Think of it as the secret sauce.

    Now then, see what happens when you execute this program!

    Take notice. Game programs are quite intense. That’s why once you hit “Execute Game,” if you want to stop it or rewrite the source code, you’ll have to reload once.

    Even if you reload, your code won’t disappear, so don’t get too anxious.

    Let’s take a look at those strange characters that come after “new Image.”

    new Image(‘img/banana.png’);

    This, as you may have guessed, is the “File name.” “img” points to the file name, and “banana.pg” becomes the file name. The folder and file name are connected by “/”. You’re probably pretty familiar with all this.

    In “banana.png” there’s a picture of a banana. It may not look like a banana, but just have faith in me here. In this zip file, I’ve prepared basic images necessary for creating a game.

    There’s a lot more besides bananas in there, so please take a peak inside. Next, let’s make our character move. A moving banana’s kind of creepy, so let’s change it to a spaceship. Give the following program a shot.

    function onLoad() {
    ship = new Image('img/starship.png'); //A
    ship.tick = function(){ //B
    this.x = this.x + 1;//C Here we define the movement of the spaceship
    };
    gameStart(); //D
    }

    A few new commands have shown up.

    If line A sets the “Image” as a ship, what does line B do?

    As it turns out, JavaScript variables are all object variables, and you can insert not just numbers but programs as well.

    This is the “tick” variable we’ve set inside the ship variable. This “tick” is a special variable called up at regular intervals.

    The contents of “tick” in line C are quite simple.

    this.x = this.x +1 ;

    A version of “this.x” plus 1 is substituted again for “this.x.” This “this” refers to the object defined by the variable, in this the “ship” itself. Just as there is a “this.x,” there is naturally a “this.y.” Why is it structured this way?

    This is a source of considerably frustration when studying math in school.

    You’d think, “This sort of this.x is impossible.”

    However, this is a substitution and not an equation. It’s not meant to solve anything.

    If you’re confused, consider the following image:

    this.x ← this.x +1 ;

    The “this.x” on the right is a past “this.x,” while the “this.x” on the left is a future “this.x.” Remember the direction of the arrow.

    For example, if “this.x” is 0 when this equation is executed, the end product of this.x will be 1.

    The first stumbling block in programming is mixing up substitutions and equations.

    It’s quite easy when you understand it, but if you don’t establish it first people will be get overwhelmed.

    If you give this a try, the spaceship should appear in the center of the screen and move slowly to the right.

    This is because as levels are added regularly to “this.x,” the coordinates of “this.x” change.

    We’re almost done with part one, so finally I’d like to try a program that let’s the character move where you want him to. I’ll explain in detail next time.

    Please give it a try!

    function onLoad() {
    ship = new Image('img/starship.png');
    ship.tick = function(){ // The spaceship will follow your cursor
    this.x += (mouseX-this.x)/10;
    this.y += (mouseY-this.y)/10;
    };
    gameStart();
    }
  • Comments Off
  • Filed under: Tutorial
  • I woke up this morning with a lot of energy, so I sat down and packaged the Group class!

    I’m now able to write a program like the one you see below.

    group = Group.new
    bear = Bear.new(32,32,"chara1.gif")
    label = Label.new("Hello enchant.js");
    button = Button.new(100,100,"Button");
    group.addEventListener('enterframe'){|e|
    self.y+=1
    }
    group.addChild(bear)
    group.addChild(label)
    group.addChild(button)
    Game.rootScene.addChild(group)

    Now, we can make the entire program we wrote previously move down!

    Let’s take a look at what we changed in the HotRuby.js source code. As usual, we’re expanding HotRuby.prototype.classes.

    Group is entity that makes another entity into a group, so it succeeds the Entity class.

    "Group" : {
    "initialize" : function(recver, args) {
    recver.__instanceVars.entity = new Group();
    HotRuby.prototype.classes.extendRubyClass("Group","Entity");
    },
    "addChild" : function(recver, args) {
    recver.__instanceVars.entity.addChild(args[0].__instanceVars.entity);
    },
    "removeChild" : function(recver, args) {
    recver.__instanceVars.entity.removeChild(args[0].__instanceVars.entity);
    }
    },

    By gaining Group, we’ve acquired a simple but powerful ally.

    In enchant.js techniques to make scrolling backgrounds into groups and control the priority of entities displayed on the screen are often used.

    With what we’ve learned so far, I’ve been able to transport the majority of the games I’ve made with enchant.js.

    We also use Scene’s push and pop quite frequently. enchant.js scenes are organized in stacks, with scenes on top of one another. When on an upper scene, events in the scenes below will be suppressed.

    For instance, the processing that brings up “START” and stops the screen is performed using scene stacks.

    In order to bring this to life, we’ll need to tweak the Game class.

    "Game" : {
    "assets" : function(recver, args) {
    return args[0];
    },
    "rootScene" : function(recver, args) {
    return HotRuby.prototype.classes.
    newRubyObject("Scene",{scene:game.rootScene});
    },
    "pushScene" : function(recver, args) {
    game.pushScene(args[0].__instanceVars.scene);
    },
    "popScene" : function(recver, args) {
    game.popScene();
    }
    },

    This time it’s super easy. The Scene class is already defined as the HotRuby class, all you need to do is deliver __instanceVars.scene as it is from “args” to Game.pushScene.

    This will allow you to create a program like the one below.

    testScene = Scene.new
    startButton = Label.new("Tap to start!");
    startButton.addEventListener('touchend'){|e| //Pop scene when label is clicked
    Game.popScene()
    }
    startButton.x = 30
    startButton.y = 140
    testScene.addChild(startButton)
    Game.rootScene.addChild(group)
    Game.pushScene(testScene)

    Here, testScene has been added above the previous scene. When you click “Tap to start!,” testScene is popped, and group moves.

    We’ve now completed most of the preparations necessary to make a game. We’re still missing the Map class wrap, but as this is pretty advanced we’ll leave it for later.

    We haven’t covered everything, but this should let us make a game. Next time, we’ll try making a simple game with HotRuby!

  • Comments Off
  • Filed under: Report
  • 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