enchant.jsの概要

enchant.jsは、本体といくつかのプラグインから構成されています。
主要なプラグインの中にはは、ゲーム投稿サイト9leap.net(ナインリープ)と組み合わせてから初めて効果を発揮するものがあります。

enchant.jsを学ぶには、code.9leap.netを使うのが最も手軽です。

enchant.jsの基本

enchant.jsはHTML5に対応したWebブラウザ上で動くライブラリです。
ゲーム開発がしやすいように作られていますが、もちろんゲーム以外のものも作ることが出来ます。

enchant.jsを使ったプログラムは以下のような構造が基本になります。

enchant(); // enchant.jsの使用開始を宣言する
window.onload = function(){ // ウィンドウがロードされたら呼び出される
  game = new Game(320,320); // 解像度320x320のゲーム画面を作る
  game.preload('fig1.png','fig2.png'); // ゲーム開始時にロードする画像ファイルを指定する
  game.onload = function(){ // ゲーム開始時の処理を記述する
    var bear = new Sprite(32,32); // スプライトを作る
    bear.image = game.assets['fig1.png']; //画像ファイルを指定
    bear.x = 50; //x座標を指定
    bear.y = 50; //y座標を指定
    game.rootScene.addChild(bear); //画面に画像を表示する
  }
  game.start(); //ゲーム開始
}

window.onloadの中でGameクラスのインスタンスをつくり、ゲームで使用する画像をpreloadで読み込ませた後、game.onloadの内容が実行されます。

実際のゲーム処理の大半はgame.onloadの内部に記述します

エンティティ

enchant.jsでは、シーン(Scene)、スプライト(Sprite)、ラベル(Label)、グループ(Group)といった画面に表示される要素を抽象化したエンティティ(Entity)によってゲームを作ります。全てのエンティティはEntityクラスを継承しています。エンティティは、x座標、y座標を持ち、必ずどこかのシーンに追加されることで画面に表示されます。Gameクラスをインスタンス化した段階で、game.rootSceneというデフォルトのシーンが設定されているので、通常はそちらにaddChildして画面に表示させます。

シーンはグループを持つことが出来ます。
グループもシーンと同じように他のエンティティをaddChildすることができますが、実際に画面に表示する時にはグループがどこかのシーンにaddChildされていなくてはなりません。

エンティティをシーンから削除する場合は、removeChildを使います。

実際の画面は、スプライトとラベルによって表示されます。
スプライトは、もともと妖精という意味で、画面を飛び回る画像を意味します。

ラベルは、その名の通りラベルで、画面に文字を表示します。

イベント

イベントとは、画面に触った、時間が経過した、など何か変わったことが起きた、ということを意味します。
イベントが起きた時に、なにかするためにはイベントリスナーという関数を作ります。

イベントリスナーはエンティティに追加することで、エンティティを制御することができます。
イベントリスナーによって、エンティティに命が吹き込まれるのです。

var bear = new Sprite(32,32); // スプライトを作る
bear.image = game.assets['fig1.png']; //画像ファイルを指定
bear.x = 50; //x座標を指定
bear.y = 50; //y座標を指定

bear.addEventListener('enterframe',function(){ //イベントリスナーを追加する
  //enterframeイベントのイベントリスナー
  this.x+=2; //2ドット右へ動く
});
game.rootScene.addChild(bear); //画面に画像を表示する

このようにすることで、画面に表示されたキャラクターが右へ進んで行くアニメーションとなります。
これはenterframeイベントが、一定時間ごとに画面に表示されている全てのエンティティを順に呼び出すためです。

また、例えば

bear.addEventListener('touchend',function(){ //イベントリスナーを追加する
  //touchendイベントのイベントリスナー
  this.x+=2; //2ドット右へ動く
});

のようにイベントの名前をtouchendに変えると、今度はキャラクターをクリックした時だけ右へ2ドット動く、というインタラクティブな動作にすることができます。

画面全体のイベントが取りたい場合は、シーンに対してイベントリスナーを追加します。

game.rootScene.addEventListener('touchend',function(param){ //シーンのイベントリスナー
  bear.x = param.x; //キャラクターをクリックした場所に移動させる
  bear.y = param.y;
});

イベントリスナーは、パラメータを受け取ることができます。
ここではparamとしていますが、ここにはタッチされた座標が入っています。

これをbearの座標に代入することで、画面上のタッチした位置にキャラクターを移動させています。
イベントはひとつのエンティティにいくつでも追加することができます。

クラス

開発に慣れてくると、自作クラス(Class)を使った方がより便利で複雑なゲームを作りやすくなります。
enchant.jsのクラスは、Class.createという関数で作ることが出来ます。

Bear = Class.create(Sprite, { //自作クラスBearの定義
  initialize:function(){ //クラスの初期化(コンストラクタ)
    Sprite.call(this,32,32); //スプライトの初期化
    this.image = game.assets['fig1.png']; //画像の指定
    game.rootScene.addChild(this);
  }
});

こうしてクラスを定義すると、今度はもっと簡単にキャラクターを出せるようになります。

bear = new Bear();

これだけです。
このやり方では、Spriteクラスを継承して自作のBearクラスを作りました。
継承すると、Spriteの機能を全てもったBearクラスを簡単に作ることが出来ます。

継承を使わない場合は、次のように書きます。

hoge = Class.create({
  initialize:function(){
    this.x=10;
  });

また、イベントリスナーを定義するのもより簡単になります。

Bear = Class.create(Sprite, { //自作クラスBearの定義
  initialize:function(){ //クラスの初期化(コンストラクタ)
    Sprite.call(this,32,32); //スプライトの初期化
    this.image = game.assets['fig1.png']; //画像の指定
    game.rootScene.addChild(this);
  },
  onenterframe:function(){ //enterframeイベントのイベントリスナー
    this.x+=2;
  },
  ontouchend:function(){ // touchendイベントのイベントリスナー
    this.y+=10;
  }
});

こうすると非常にスッキリ書けるので便利です。
一度作ったクラスは、いくつでもコピーできます。

bear1 = new Bear();
bear1.x=100;

bear2 = new Bear();
bear2.x=150;

クラスをうまく活用することで効率的なゲーム開発が可能になります。

当たり判定

あるエンティティと別のエンティティが交差しているかどうかを調べるには、withinかintersectを使うのが便利です。

if(bear1.intersect(bear2)){ // 当たった!
  bear1.x -= 10;
  bear2.x += 10;
}

最後に

enchant.jsの最初の説明は以上で終わりです。
リファレンスマニュアルを読むと、さらに細かいことがわかるようになります。
色々なテクニックも使えるようになるとさらに楽しめると思います。

それでは、Enjoy!

This post is also available in: 英語, ポルトガル語(ブラジル)