enchant.js Developers Blog

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

enchant.js Developers Blog はドメインを移転しました。今後の更新情報などは、下記のサイトでお伝えします。このブログは今後更新されることはありません。今後とも、enchant.js プロジェクトをよろしくお願いいたします。

http://enchantjs.com

  • 0 Comments
  • Filed under: 未分類
  • 日本語版はwise9ブログをご覧下さい:http://wise9.jp/archives/7418

  • 0 Comments
  • Filed under: 未分類
  • 日本語版はwise9ブログをご覧下さい:http://wise9.jp/archives/7367

  • 0 Comments
  • Filed under: 未分類
  • 4月21日(土)に enchant.js meetup! 東京 vol.2 を開催します。

    チュートリアル・セッション・ハッカソンの3パートに分かれており、知識や経験に応じてお好きなパートにご参加いただけます。

    詳しくはこちらをご覧下さい。

    http://atnd.org/events/26921

  • 0 Comments
  • Filed under: お知らせ
  • 日本語版はwise9ブログをご覧下さい!

    http://wise9.jp/archives/6944

  • 0 Comments
  • Filed under: イベント
  • アスキー・メディアワークスより「ゼロからはじめるenchant.js入門」が刊行されました。

    UEIでは、学校・図書館関係者向けにこの書籍を無償で提供いたします。詳しくは下記のページをご覧下さい。

    wise9 › 完売御礼! enchant.js公式ガイド は学校・教育関係者に無償提供します(部数限定)

  • 0 Comments
  • Filed under: お知らせ
  • 「leapfest2012」が開催されました

    2月18日、東京・秋葉原にてUEI主催のイベント「leapfest2012」が開催されました。

    姉妹プロジェクトである 9leap の表彰式と、講演やLTなどのセッションを主とするイベントで、13時ごろからは enchant.js を使って 9分間(540秒)でゲームを開発する「9Minutes Coding Battle」も開催されました。

    当日は物販も! 真ん中にあるのはenchant.jsソースコードが乗ったTシャツです。

    今後様々なイベントで販売する予定ですので、ぜひ手にとってご覧下さい。

    詳しくは wise9 のレポートをご覧下さい

  • 0 Comments
  • Filed under: 未分類
  • 動画プログラミング学習サイト「ドットインストール」に、enchant.js に関する講座が追加されました。enchant.jsのレッスンを無料で受講することができます。

    http://dotinstall.com/

    サービスを開始してしばらくは招待制による運営が行われていましたが、現在では誰でも登録することができます。twitter, facebook などのアカウントでログインすることもできます。

    レッスン一覧 (全17回)

    #01 enchant.jsとは何か?
    #02 公式サイトについて
    #03 必要なファイルを揃える
    #04 game.jsのひな形を作る
    #05 クマの画像を表示させる
    #06 画像を表示するコードの説明
    #07 Spriteオブジェクトのframeにつ…
    #08 画像の回転、拡大
    #09 オブジェクトの継承
    #10 ラベルを表示する
    #11 イベントリスナーを追加する
    #12 gameのフレームを操作する
    #13 ユーザーからの入力を受け付ける
    #14 thisについて
    #15 当たり判定について (1)
    #16 当たり判定について (2)
    #17 ゲームオーバー処理を作る

    初歩の初歩から説明しています。これからJavaScript/enchant.js を始めてみたい人はぜひチェックしてみてください。

  • 0 Comments
  • Filed under: 未分類
  • ユビキタスエンターテインメントのiOS向けシューティングゲーム「GRANDARIUS WING STRIKE」が、enchant.js を使ってHTML5+JavaScriptに移植されました。同タイトルは AppStoreで有償で配布しているもので、HTML5版ではそのステージ1を遊ぶことができます。

    TechWaveGIGAZINEをはじめいくつかのメディアに取り上げていただきました。

    プレイはこちらから。

    技術的な詳細は以下のブログ記事を参照してください。

    wise9 – HTML5/enchant.js版グランダリウスのソースは739行! HTML5/enchant.jsの生産性はObjective-Cの50倍はあるかも

  • 0 Comments
  • Filed under: お知らせ
  • そろそろWebGLにも対応したバージョンがリリースされそうなenchant.js。みんなやってるかな?
    ところでTwitterで気になる発言を目にしました。

    enchant.jsのクラス継承のところでつまづいている、ということだったので、今日はこの微妙にややこしい問題を扱ってみようと思います。

    まず、JavaScriptのクラス継承は、プロトタイプベース継承と言って、ちょっと特殊です。
    JavaScriptのクラス継承については@ITのこの記事が非常に解り易くまとまっています。


    しかしこのプロトタイプベース継承という考え方が、そもそもC++やRuby、Javaなど、他のクラスベース継承を採用した言語から入門した人にはちょっとわかりにくいのです。

    すごく大雑把に説明すると、プロトタイプベースというのは、.prototypeに指定された要素が常にコピーされるというやり方。

    これを説明するために、まずはJava(クラスベース)のクラス定義をおさらいしましょう。

    //Javaの場合
    class A {
      int x;
      public A(){
        x=1;
      }
      public  int method(){
        System.out.println(x);
      }
    }
    
    //クラスを使うとき
    A a = new A();
    a.method();
    

    みたいな感じになります。

    JavaScriptは、Javaと名前は似てますが、クラスの考え方がプロトタイプベースと、全く異なる考え方になっています。

    同じことをするクラスをJavaScript(プロトタイプベース)で書くと以下のようになります。

    //JavaScriptの場合
    A = function(){
        this.x=1;
    };
    A.prototype.method = function(){
    	document.write(this.x);
    }
    
    //クラスを使うとき
    var a = new A();
    a.method();
    

    Javaと比較するとなんじゃこりゃ、という感じです。
    名前は似てるのに違い過ぎて衝撃を受けます。

    しかしもっとひどいのは、継承をした場合。
    Javaで継承をすると以下のようなコードになります。

    //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(); //親クラスのコンストラクタを呼ぶ
        y=100;
      }
      public  int anotherMethod(){
        System.out.println(x*y);
      }
    }
    
    //継承したクラスを使うとき
    B b = new B();
    b.method(); //親クラスのメソッド呼び出し
    b.anotherMethod(); //継承したクラスのメソッド呼び出し
    

    extendsというキーワードで継承するクラスを指定するわけです。
    AとBのクラス定義がハッキリ別れているので、パッと見た感じ解り易いです。

    ところがJavaScriptの継承はこれに慣れているとかなり不思議なやりかたになっています。

    A = function(){
        this.x=1;
    };
    A.prototype.method = function(){
    	document.write(this.x);
    }
    
    B = function(){
        A.call(this); //親クラスのコンストラクタを呼ぶ
        this.y=100;
    }
    B.prototype = new A(); //ここで継承している
    B.prototype.anotherMethod = function(){
    	document.write("<BR>"+this.x*this.y);
    }
    
    var b = new B();
    b.method();
    b.anotherMethod();
    

    継承をしている部分は、B.prototypeになんと生成したA(継承元クラス)のオブジェクトを突っ込んでいます。

    というのは、JavaScriptの場合、コンパイル言語ではなくインタプリタ言語である、という特性が大きく活かされた継承モデルになっているのです。

    JavaScriptでは、prototypeプロパティに指定されたメンバーは、new演算子で新しくインスタンス生成する際に自動的にコピーされます。

    そして継承とは、親クラスの内容をまるごと子クラスがコピーする(厳密にはコピーされるのではなく、暗黙的に参照される。詳しくは@ITの記事参照)、というのがJavaScriptの基本的なやり方なのです。

    これは処理系(JavaScriptの)を実装する側からすると、非常に簡単にクラス継承を実現できることになります。なにしろ単にコピーするだけでいいんですから。

    クラスを定義したり継承したりするための特殊な構文も必要ありません。

    その代わり、デメリットとして、そもそもオブジェクト指向が持っている重要な機能としての隠蔽化の機能が全く実現できない(全てのメンバーがpublicであること)ということが挙げられます。

    これは巨大で堅牢なプログラムを書くには大きな障害になります。
    誰でもいつでも好きなように言語全体の構造を変更できてしまうのです。

    たとえば、JavaScriptでは組み込みクラスの配列がありますが、好きなタイミングで配列の機能そのものを追加したり変更したりすることができます。

    Array.prototype.remove=function(obj){ //配列の任意の要素を削除するメソッドremoveを追加
    	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]+','); //配列の中身を表示
    

    上記は配列の任意の要素を削除するメソッドremoveを組み込みクラスに追加した例です。

    しかし、JavaScriptはいったいなぜ、プロトタイプ継承なんていう特殊なやりかたを採用したのでしょうか。

    それにはいろいろな理由が考えられます。
    が、ひとつ言えることは、コンパクトなプログラムを手早く書くには、プロトタイプ継承は慣れれば便利だということです。

    好きなタイミングで好きなメンバーを追加したり、オブジェクトごとにメンバーの内容を変更したりといったことが容易です。

    これは、Javaなどの一般的なクラスベース言語では第一級関数(関数を変数と同格に扱うこと)がサポートされていないのに対し、JavaScriptでは第一級関数をサポートしているということが大きいと思います。

    そのぶん、これを駆使してプログラムを書くと、コードはかなり混乱しやすくなります。
    そのかわり、慣れると非常に素早く目的とするプログラムを書くことが出来るようになります。

    だから複数人でJavaScriptのプログラム開発をやるときは注意が必要です。
    名前空間がバッティングしたり、触って欲しくないプロパティを触られてしまうリスクも発生します。

    ただ、ゲームプログラミングにおいては、実はクラスベース継承の方が基本的に向いています。
    そこでenchant.jsでは、クラスベース継承を擬似的にサポートするためのユーティリティ関数として、Class.createが用意されています。

    Class.createの使い方は簡単です。

    enchant(); //enchant.jsを使うおまじない
    
    A = Class.create({       // Class.createでのクラス宣言
        initialize:function(){  //コンストラクタ
            this.x=1;
        },
        method:function(){
            document.write(this.x);
        }
    });
    
    //使う場合は通常のJavaScriptと同じ
    var a = new A();
    a.method();
    

    ミソは、Class.createにリテラル表現のオブジェクトを渡しているところです。

    こうすると、一見、Javaのクラス宣言のようなクラス定義を表現できます。
    継承する場合のコードは以下のような感じに成ります

    enchant();。
    
    A = Class.create({
        initialize:function(){
            this.x=1;
        },
        method:function(){
            document.write(this.x);
        }
    });
    
    B = Class.create(A,{   //Aを継承
        initialize:function(){
    	A.call(this);  // Aのコンストラクタを呼び出し
            this.y=100;
        },
        anotherMethod:function(){
            document.write(this.x*this.y);
        }
    });
    
    var b = new B();
    b.method();
    b.anotherMethod();
    

    こうすると、prototypeを使って継承するよりは見た目がスッキリします。
    クラスベースの継承に慣れたプログラマにとっても、JavaScriptのプロトタイプ継承をそのまま使うよりは読み易いコードになります。

    そのうえ、プロトタイプベースの機能も使えるので、工夫次第でJavaでは表現するのに手間取るような過激なコードを書くこともできます。

    例えばインスタンスごとに同じ名前で全く違う動作をするメソッドを追加したりするなどです。

    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(){ //method()を全く違う内容に書き換えている
    	        document.write("<BR>");
    	    };
    	    break;
            case 1:
    	    obj.method=function(){ //method()を全く違う内容に書き換えている
    	        document.write("booe");
    	    };
            case 2:
    	    obj.x=2
    	    break;
        }
    }
    
    for(i=0;i<m.length;i++)
        m[i].method();
    

    こんなことができます。
    これをゲームプログラミングに応用すると、敵キャラの基本的なクラスをClass.createで定義しておき、雑魚キャラの細かい動きのところだけ同じメソッド名で違う内容にする、といったことが可能です。

    呼び出す時は配列に対して一括で同じメソッド名を呼ぶだけなので、プログラミングがし易くなります。

    もちろん、クラスベースの言語でも、全ての敵キャラのパターンにあわせて別のクラスを定義したりすれば実現できますが、ゲームで使う雑魚キャラの動きなどはそれほど大きく違うこともないので、本当に違う部分「だけ」を定義するならプロトタイプベースのメリットを活かした方が得です。

    こんなふうに、メソッドやプロパティの名前が同じなら、同じ動作をする「はずだ」というプログラミング手法を「ダックタイピング」と呼んだりします。

    この「ダックタイピング」が自由に使えるようになると、それができない言語に比べて何倍も効率的なコードを書くことが出来るのです。

    今回はちょっと難しい話をしてしまったかもしれません。
    どうですか?解っていただけたでしょうか。

  • 1 Comment
  • Filed under: 未分類
  • animation.enchant.js v0.1 公開

    本日、公式プラグイン animation.enchant.js のベータ版をリリースしました。このプラグインの機能は将来的に enchant.js 本体に組み込まれる予定です。

    ダウンロードは github からどうぞ。

    animation.enchant.js はアニメーションキューの機能を追加します。v0.1では、アニメーションキューを組み込んだSpriteクラス:AnimationSprite クラスを呼び出すことによって利用できます。

    単にトゥイーンライブラリとして、たとえば「ある場所にSpriteを簡単に移動させたり」「フェードアウト/インしたり」「視覚処理を付けて、ぬるっと移動・拡大縮小させたり」することができるだけではなく、ある処理にディレイをかけたり、処理の前後に自由に関数を実行したりすることもできます。

    サンプルは以下の通りです。赤いスプライトをクリックすると、キューに様々なアニメーションが追加され、実行されます。

    animation.enchant.js サンプル – jsdo.it – share JavaScript, HTML5 and CSS

    トゥイーンの追加

    bear = new AnimationSprite(32, 32);
    bear.animation.addTween({
        rotation: 360,
        scaleX: 2,
        scaleY: 2,
        time: 30
    });
    

    回転しながら拡大し、大きくなる。
    (bear.rotation は bear オブジェクトの回転角度、bear.scaleX, scaleY は縮尺を表します。上記のコードで実行している addTween メソッドで、bear のキューに30フレームかけて rotation, scaleX, scaleY を変化させるアクションを追加しています)

    トゥイーンは、x, y, scaleX, scaleY, opacity(不透明度), rotation などのプロパティだけではなく、どんなプロパティでも自由に変化させるすることができます。

    但し、時間を指定する time のほか、onload、callbackなど、指定することでトゥイーンを拡張できるプロパティもあります。

    • time: トゥイーンが終了するまでのフレーム数(必須)
    • onload: トゥイーンが始まったときに実行される関数
    • callback: トゥイーンが終わったときに実行される関数

    onload, callback は指定されていない場合は実行されません。

    イージング

    イージングとは、プロパティの値の変化を単に直線的に行うのではなく、数式に従って様々な効果を付けることを指します。例えば変化がだんだんと加速するような効果、端でバウンドするような効果をつけることができます。

    enchant.Easing のプロパティとして、デフォルトのイージング関数がいくつか登録されています。Robert Penner 氏によるものを利用しています(BSDライセンス)。

    bear = new AnimationSprite(32, 32);
    bear.animation.addTween({
        x: 320,
        y: 320,
        easing: enchant.Easing.BACK_EASEOUT,
        time: 30
    });
    // (320, 320) まで移動する。いったん端を通り過ぎて戻るような視覚効果がある
    
    bear = new AnimationSprite(32, 32);
    bear.animation.addTween({
        scaleX: 2,
        scaleY: 2,
        easing: enchant.Easing.BOUNCE_EASEOUT
        time: 30
    });
    // Spriteを拡大する。端でバウンドしたような視覚効果がある。
    

    ActionScript向けのトゥイーンライブラリ「Tweener」にプリセットされている数式はすべて使うことができます。イージングの数式についてグラフ化したものが Tweenerのドキュメント に記載されています。実際に動きを確認するには Aquioux氏のブログ をご参照ください。

    簡易記法

    トゥイーンを簡易的に記述する記法があります。

    bear = new AnimationSprite(32, 32);
    
    // 30フレームで (320, 320) に移動する。(moveTo: 絶対座標)
    bear.animation.moveTo(320, 320, 30);
    
    // 30フレームで (320, 320) に移動する。(moveBy: 相対座標)
    bear.animation.moveTo(-320, -320, 30);
    
    // フェードアウトする
    bear.animation.fadeOut(30);
    
    // フェードインする
    bear.animation.fadeIn(30);
    

    制御

    アニメーションだけではなく、様々な関数の実行にも利用できます。

    // 30フレーム後に消える
    bear.animation.delay(30).then(function(){
        game.rootScene.removeChild(this);
    });
    // delay(30) は、30フレーム経過するまで何もしないアクションを追加する
    // then(...) は、引数に渡した関数を実行するアクションを追加する
    // アクションは追加された順に実行されるので、30フレーム経過したあと指定した関数が実行される
    
    bear.animation.repeat(function(){...}, 60, 3);
    // 60フレームのあいだ、3フレームおきに1回指定した関数を実行する
    
    bear.animation.after(function(){...}).then(function(){...})
    // 1つ目の関数が true を返すまで待ったあと、2つ目の関数を実行する
    // after(..) は毎フレーム渡した関数を実行し、true を返したなら次のアクションに移る
    
    bear.animation.loop();
    // アニメーションキューをループさせる
    // (あるアクションが終わるとき、アクションは破棄されずキューの最後に追加される)
    
    bear.animation.pause();
    // アニメーションキューの実行を一時停止する
    
    bear.animation.start();
    // アニメーションキューの実行を再開する
    
    bear.animation.clear();
    // アニメーションキューを空にする
    

    animation.enchant.js によって追加された機能は、複雑なアニメーションの管理を必要とするゲームに最適です。本格的なゲームをどんどん作ってみてください!お待ちしています。

  • 8 Comments
  • Filed under: 未分類
  • DevCon5二日目レポート

    日本語版はwise9ブログをご覧下さい!

  • 0 Comments
  • Filed under: 未分類
  • DevCon5の初日レポート

    日本語版は、wise9ブログをご覧下さい!

  • 0 Comments
  • Filed under: 未分類
  • enchant.js meetup! 大阪 を開催しました

    「enchant.js meetup!」イベント第二弾として、大阪でのユーザイベント「enchant.js meetup! 大阪」を中央区本町のTKP大阪本町ビジネスセンターにて開催いたしました。

    タイムテーブルはこちら。

    時間 発表者 タイトル
    13:00 – 13:30 - 受付
    13:30 - 諸注意・ご連絡
    13:40 – 14:00 sidetepism enchant.js 概要説明
    14:00 – 14:20 hidemy アトラスXでゲームを作る ~ともだちポンが出来るまで~
    14:20 – 14:40 shi3z Ruby on enchant.js の開発 (仮)
    14:40 – 15:00 blankblank Coffee Scriptでenchant.js
    15:00 – - スイーツタイム (休憩)
    sidestepism ミニゲーム・プログラミング講座
    16:00 – 17:30 - ハッカソンタイム
    17:30 – 17:45 - 作品発表タイム
    17:45 – 18:00 shi3z enchant.js + PRO ロードマップ
    18:00 終了

    今回のイベントでは、「ハッカソンタイム」として、当日配布したパッケージを元にゲームを1本作っていただくという形式のハッカソンを開催しました。実質1時間という短い間でしたが、なんと6人の方々にゲームを発表していただくことができました。

    発表資料はこちらから

    UEI 清水「enchant.js を使ったいろいろなハック紹介」



    戸谷さん(@blankblank)「enchant.js でcoffee script」



    UEI 辻「はじめてのenchant.js AtlasXでプログラミング入門」



    いくつかの ゲームは、9leap にも投稿いただいています。

    9leap : スネークん by usamyu_

    週刊アスキーplus さんによるイベントレポートはこちら。

    わずか1時間でゲームを6本も開発! 関西人の底力を見た『enchant.js meetup!』

  • 0 Comments
  • Filed under: イベント
  • 11月30日にリリースした enchant.js オンライン対戦プラグイン “socket.enchant.js” に致命的な不具合が見つかりました。現在この不具合は修正されており、github に最新版 (2011/12/01) がリリースされています。この間にプラグインをダウンロードされた方には、大変ご迷惑をおかけいたしました。まだ (beta 2011/11/30) 版のプラグインをお持ちの方はアップデートを強くおすすめします。
    • ゲームIDを取得できない
    • ロビーへのログインができない

    プラグインのダウンロードはgithubからどうぞ。バグの詳細と、修正後のサンプルは、wiseの記事で公開されています(日本語)

  • 0 Comments
  • Filed under: 未分類
  • 手軽に本格的なARプログラムを開発可能ということで話題になったenchant PROがついにiPhoneにも対応したぞ!

    ソースコードレベルではもちろんAndroid版、iPhone版で互換性があり、これでiPhoneとAndroidに両対応したARゲームを同時開発することが可能になる。

    もちろんAR認識だけでなく、ネイティブのOpenGL ESを使ったポリゴン描画も実現

    iPhone4Sで実際に動作させたデモが以下のような感じだ。

    また、Android版のenchant PROもバージョンアップし、AR認識時にカメラ画像と認識後の画像をシンクロさせる機能が追加された。
    最新のenchant PROを内蔵させた9leapアプリも既にAndroid Marketからダウンロード可能だ

    やあみんな。shi3zだよ。

    三日間の短期集中連載だからガンガンポストしていくよ。

    さて、前回の最後のプログラムは実行してみたかな?
    マウスカーソルに不思議な動きで宇宙船がついてくるね。

    この動きの秘密は、もちろんプログラムにある。

    ship.tick = function(){ //宇宙船がマウスカーソルを追いかける
    this.x += (mouseX-this.x)/10;
    this.y += (mouseY-this.y)/10;
    };

    ひとつずつ解説しよう。

    (続きは以下から)

    まず、this.xのあとに続く記号、+=は、this.xに右の式の値を足し込むという意味になる。
    this.x+=1だと、this.x=this.x+1と同じ意味になるわけ。これはゲームでは異常によく使う記号だから覚えておこう。

    次に、mouseXという謎の変数が突然出てくる。
    これはお察しの通り、僕の作った最速ゲーム学習用システムが用意している変数だ。

    この変数には常にマウスカーソルのX座標が格納されている。
    ではmouseYには・・・そう。マウスカーソルのY座標だ。

    この式は、mouseXからthis.xを引いた値を10で割ったものをthis.x自身に足し込んでる。

    これは一体どういうことなのか?

    まず、プログラムとしてはマウスカーソルに宇宙船を近づけたい。
    それにはいくつか別のもっとわかりやすい方法もある。

    例えば次のようなプログラムだ。

    ship.tick = function(){ //宇宙船がマウスカーソルを追いかける
    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;
    };

    こんどは動きはどう変わっただろうか?前回のコードではヌルっという動きでマウスカーソルをまっすぐ追いかけた。

    今回のコードでは斜めにしばらく進んだ後、横または縦方向にまっすぐカーソルを追いかけてくるようになるはずだ。

    この動きの差はどうしてうまれるのか?すべての秘密はソースコードにある。

    前回示したコードより、後者のif文を沢山使ったコードのほうが理解しやすいはずだ。

    もし、自分の位置(this.xとthis.y)がマウスの位置と違ったら、それぞれ10ドットずつ移動しろ、という命令を書いているわけだね。

    けれども、カーソルがたとえば45度以外の斜め方向に居るとき、x、yの増加量はともに10ずつとなって、結局斜め45度の動きになってしまう。

    この動きは非常にぎこちなく、なんだか変な感じだ。

    それにくらべると、最初の例に用いた式は、シンプルだが効果的だ。

    この数式がどういう動きを生み出すのか。下の図を見てほしい。

    マウスカーソルの座標から宇宙船の現在座標を引くと、これは宇宙船からマウスカーソルへ伸びるベクトルになる。

    これを足すと、宇宙船がいきなりマウスカーソルの位置にワープすることになる。

    これはもっとシンプルなプログラムで試すことができる。

           ship.tick = function(){ //宇宙船がマウスカーソルを追いかける
    this.x += mouseX-this.x;
    this.y += mouseY-this.y;
    };

    10で割るのをやめてみると、いきなり宇宙船がマウスカーソルに張り付いたような動きになるはずだ。

    これを10で割ることで、マウスカーソルに近づけば近づくほど細かい動きになっていき、あの独特のヌルっとした動きになるのだ。

    このヌルっとした動きがなんとなく「気持ちよく」感じられるのはなぜだろうか?

    ひとつはこの動きにリアリティ(現実感)があるからだ。

    実は、こうした動きは実際のモノの動きに良く似ている。

    クルマは急に止まれない、という言葉があるけれど、本当に急に止まれない。
    止まるには少しずつ減速していかないとならない。

    全速力で走っていて、急に止まろうとしたら勢いで二三歩余計に歩いてしまう、そんな経験が誰にもあるだろう。

    そういう感覚がこうした動きにはあるのだ。

    さて、宇宙船しかいなかったらつまらないから、宇宙船以外のものも表示してみよう。

    宇宙だから岩がいい。それにはforループを使うのが簡単だ。

    function onLoad() {     var ship= new Image('img/starship.png');
    ship.tick = function(){ //宇宙船がマウスカーソルを追いかける
    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();
    }

    実行すると次のような画面になる。

    白い宇宙空間に岩がゴロゴロ。
    小惑星、というわけだ。

    ところがこの宇宙船、小惑星にぶつかってもびくともしない。
    それではつまらないから、小惑星にぶつかったらゲームオーバーになることにしよう。

    function onLoad() {
    var ship= new Image('img/starship.png');
    ship.tick = function(){ //宇宙船がマウスカーソルを追いかける
    this.x += (mouseX-this.x)/10;
    this.y += (mouseY-this.y)/10;
    };

    ship.onHit = function(){ //衝突した!
    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();
    }

    ただし、これは極めていい加減なプログラムなので、衝突すると「CRASHED」という警告ウィンドウが出続ける。

    やめるにはマウスカーソルを正しい位置に逃がして、リロードする必要がある。

    alertは、JavaScriptが元々もっている命令(関数)のひとつで、警告ウィンドウを表示する機能を持っている。
    ship.onHit関数もまた、システムが呼び出す特別な関数で、なにか他のImageと衝突したときに呼び出される。

    この場合、宇宙船(ship)がなにか別の物体とぶつかったとき、警告ウィンドウを表示する、というゲームになったわけだ。

    これをもとにして、以下の課題に挑戦してみよう。また次回。次回はすぐだよ

    1)rockをforループと乱数を使わずに並べて、電流イライラ棒ゲームを作ってみよう
    2)rock.tickを定義して、隕石のほうも動かしてみよう
    3)動く隕石と動かない隕石を作ってみよう

  • 0 Comments
  • Filed under: Tutorial
  • 日本語版はwise9ブログをご覧下さい!

    http://wise9.jp/archives/5540

  • 0 Comments
  • Filed under: イベント
  • やぁみんな!元気かな? shi3zだよ。

    さてさて、先日の環太平洋ミニゲーム開発オリンピック、個人的には参加する方としても見ている方としても大いに楽しめたんだけど、まあ正直、自分が優勝しちゃったのはどうかと思うんだよね。まあ立場もあるし、気を使ってくれたのかもしれないけど、とにかく、僕は次回からは参加しないことにしたんだ。

    でもこれって結構面白くて、ミニゲームそのものもそうだけど、この大会というひとつの大きな枠組みのゲームとして、ハマってきた。

    だからもう一回やりたい。

    と言ったら鎌田君が「いいですね。でも僕はもう体力の限界です」というのでリタイヤ。TAZZY委員長は仕事が忙しすぎてやってられないということで、近藤君と伏見君の二人だけになっちゃう、というのもつまらない。

    そこで、プログラム完全未経験のHidemyに僕がゲームプログラミングを三日でコーチし、大会で闘えるところまで育てることができるか!?という挑戦をしてみることになったよ。そんなこと本当にできるのかね?

    続きは以下


    実は昨日、alan先生からもらった連載原稿を先に全部出しちゃったのは、まずHidemyにプログラミングを学んでほしかったからなんだ。

    正直、教育学部卒で英文学専攻という彼女がどのくらいのスピードでこれをマスターできるかは多いに疑問だったんだよね。

    とりあえず昨日の夜、みんなでご飯を食べたあと、「Hidemyはalan先生の原稿を読んでから、自分なりのプログラムを作って提出して」と課題を与えてみた。

    それが八時くらい。

    そして12時。つまり四時間後だけど、早速Hidemyから課題が届いた。

    //おはな
    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();
    }


    これ以外にもふたつのプログラムをつくってきてくれた。

    彼女の飲み込みの速さに結構驚いたね。

    これならいけるかもしれない

    と思ったよ。

    そこでalan先生の連載とは別に、僕がゲームプログラミングを教える短期集中連載を始めることにするよ。

    alan先生の連載は丁寧でわかりやすいけど、ちょっと時間がかかるので、ここでは一足飛びに僕がゲームを学ぶために必要な教材をまとめてzipにしてみた。

    まずはこれをダウンロードしてほしい

    ゲームのもと(game.zip)をダウンロード

    とはいっても、alan先生の連載とファイル構成は似ている。

    違うのは、game.jsというファイルとimgフォルダがあることくらい。

    まずはmain.jsをテキストエディタで開いてほしい。

    例によって面倒だという人のために、ブラウザ上で試す環境も用意してある。

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

    さて、最初のプログラムはゲームのキャラクターを表示するものだ。

    function onLoad() {
    banana = new Image('img/banana.png'); // ここでキャラクターを出現
    }

    このプログラムのポイントは 「new Image」という部分にしかない。

    この命令は、新しいImageを作成してbananaという変数に入れろ、という意味になる。

    このImageというのは、実はゲームプログラミングを最速で教えるために僕が定義した新しいプログラムだ。
    実は、JavaScriptではプログラムの中から別のプログラムの塊を呼び出すことができる。

    こういうプログラムの塊を「クラス」とか「ライブラリ」とか言ったりするんだ。
    クラスとライブラリは本質的に別のものだけど、今回はそんなことを理解する必要はない。興味が湧いたら自分で調べてみてほしい(きっとそのうちalan先生の連載で扱うだろう)。

    とにかく、ゲーム開発に必要なことで、面倒なだけのことはあまりにも多い。
    そこで今回はオリジナルのゲームを作るために本当に最低限しかプログラムを書かなくてもいいように教材の方を工夫した。料理で言えばレトルト食品みたいなものだ。
    味は最高に良いとは言えないが、誰でも調理できてそこそこ美味しい。そういう連載なのだと思ってほしい。

    こうしたクラスにはクラスを設計したプログラマの経験が総て詰まっている。
    そのひとつが、このImageクラスというわけだ。

    秘伝のタレ、みたいなものだね。

    さて、このプログラムを実行するとどうなるか、まずは試してみてほしい。

    ここで注意事項。
    ゲームプログラムは、過激なプログラムだ。
    だから、「ゲームを実行する」というボタンを押したら、止めたりソースコードを書き直したりしたくなったら一度リロードする必要がある。

    リロードしても君の書いたコードが消えることはないのでご安心を。

    さて、new Imageのあとにつづく謎の文字の説明をしなくてはならない

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

    これは言わずと知れた「ファイル名」である。「img」はフォルダ名を指し、banana.pngはファイル名となる。フォルダとファイル名の間は「/」で繋ぐことになっている。まあこのへんはわりとお馴染みかな。

    banana.pngにはバナナの画像が入っている。
    バナナには見えないかもしれないが、これは断じてバナナである。
    実は今回のzipファイルには、ゲーム作りに最低限必要と思われる画像ファイルをこちらで用意したものを添付してある。

    バナナ以外にも、いろいろあるからフォルダを覗いてみてほしい。
    さて、次はキャラクターを動かしてみよう。
    バナナがひとりでに動く、というのも気持ち悪いので、宇宙船の絵に変えてみる。
    以下のようなプログラムを動かしてみてほしい。

    function onLoad() {
    ship = new Image('img/starship.png');  //A
    ship.tick = function(){ //B
    this.x = this.x + 1;//C ここで宇宙船の動きを定義する
    };
    gameStart(); //D
    }

    いくつか新しい命令が出て来た。

    Aの行でImageをshipに代入しているのはいいとして、Bの行はなんだろう?

    実はJavaScriptの変数は総てオブジェクト変数といって、数字だけでなくプログラムも入れることができるようになっている。

    ship変数のなかにtickという関数を定義しているわけだね。
    このtickは一定時間ごとに呼び出される特殊な関数だ。

    tickの中身を見てみよう(C)これも単純だね。

    this.x = this.x +1 ;

    this.xに1を足したものをふたたびthis.xに代入している。
    このthisが示すのはこの関数が定義されているオブジェクト自身、この場合はたとえばship自身を指しているんだ。this.xがあるということは当然、this.yもある。しかしこの式はなにをしてるんだ?

    実はこれは学校で真面目に数学をやっていると、けっこう混乱してしまう部分のひとつだ。

    「こんなthis.xはあり得ない」

    と思ってしまうのだ。しかしこの式はあくまでも代入式であって方程式ではない。解くための式ではないのだ。

    どうしても意味が分からないのなら、次のようなイメージで理解すると良い。

    this.x ← this.x +1 ;

    右のthis.xは過去のthis.xであり、左のthis.xは未来のthis.xである。矢印の向きで覚えると良いのだ。

    たとえばこの式の実行時点でthis.xの内容が0なら、この式が実行されたあとのthis.xの中身は1になる。

    実際、プログラミングで最初につまづくポイントがこの代入式と方程式の違いがわからないというところだったりする。

    解ればあまりにも簡単だが、いきなりそれまで習って来たことの前提が覆ってしまうと人はビックリしてしまうものだ。

    さて、これを実行すると、宇宙船が画面の中央に現れて、ゆっくり右へ移動していくのが見えると思う。

    一定時間ごとにthis.xに値を足していくと、this.xの座標が変わるワケだ。

    さて、一回目なのでそろそろやめにしたいが、最後にキャラクターを自分の思うがままに動かすプログラムを示して終わろうと思う。詳しい解説は次回行う。

    是非試してみてほしい。

    function onLoad() {
    ship = new Image('img/starship.png');
    ship.tick = function(){ //宇宙船がマウスカーソルを追いかける
    this.x += (mouseX-this.x)/10;
    this.y += (mouseY-this.y)/10;
    };
    gameStart();
    }
  • 0 Comments
  • Filed under: Tutorial
  • 日本語版は、wise9ブログをご覧下さい!

    http://wise9.jp/archives/5402

  • 0 Comments
  • 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

    facebook Like