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

http://enchantjs.com

日本語版はwise9ブログをご覧下さい：http://wise9.jp/archives/7418

日本語版はwise9ブログをご覧下さい：http://wise9.jp/archives/7367

4月21日(土)に enchant.js meetup! 東京 vol.2 を開催します。

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

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

http://atnd.org/events/26921

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

http://wise9.jp/archives/6944

アスキー・メディアワークスより「ゼロからはじめるenchant.js入門」が刊行されました。

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

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

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

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

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

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

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

動画プログラミング学習サイト「ドットインストール」に、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 を始めてみたい人はぜひチェックしてみてください。

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

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

プレイはこちらから。

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

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

そろそろ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で定義しておき、雑魚キャラの細かい動きのところだけ同じメソッド名で違う内容にする、といったことが可能です。

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

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

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

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

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

本日、公式プラグイン 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 によって追加された機能は、複雑なアニメーションの管理を必要とするゲームに最適です。本格的なゲームをどんどん作ってみてください！お待ちしています。

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

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

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

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

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

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

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

やあみんな。shi3zだよ。

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

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

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

ひとつずつ解説しよう。

(続きは以下から)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

http://wise9.jp/archives/5540

やぁみんな!元気かな? shi3zだよ。

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

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

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

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

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

続きは以下

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

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

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

それが八時くらい。

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

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

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

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

と思ったよ。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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の座標が変わるワケだ。

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

是非試してみてほしい。

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

http://wise9.jp/archives/5402