enchant.jsで熊が動くまでをより理解するためのTips

enchant.jsを利用して以前簡単な旗取りゲームを作ったことがあるが、
正直サンプルをコピペしてちょっといじくっただけなのであまりにも理解が乏しかった。

改めてjavascriptのオブジェクト指向のさわりだけ学習して、enchant.jsの学習を再開したので自分向けにメモ残しておきます。

enchant();

enchant.jsの読み込み。ゲームファイルの頭で必ず読み込む。

Core(width,height)

主なプロパティの初期値、もしくは実行時の初期状態

ver Core = function(width,height){
 this.assets = [object Object]; //ロードされた画像をパスをキーとして保存するオブジェクト
 this.currentScene = [object Object]; //現在のScene.
 this.fps =30; //フレームレート
 this.frame =0; //アプリの開始からのフレーム数
 this.height = height(320); //画面の高さ
 this.input = [object Object]; //アプリに対する入力状態を保存するオブジェクト
 this.loadingScene = [object Object]; //ローディング時に表示されるScene
 this.ready = false; //アプリが実行可能な状態かどうか.
 this.rootScene = [object Object]; //ルートScene. Sceneスタック中の一番下のScene
 this running = false; //アプリが実行状態かどうか.
 this.scale = 1.34375; //画面の表示倍率.
 this.width = width(320); //画面の横幅.
}

オブジェクトの生成(インスタンス化)

var core = new Core(320,320);

Coreオブジェクトの生成はウィンドウが読み込まれた後にしなくてはいけない。

window.onload = function(){ ver core = new Core(); }

基本的にはこのCoreクラスの読み込み後に様々な処理を展開していく。

core.onload = function(){ 処理 };

ちなみにCoreクラスと同じGameクラスも存在しますがこちらは非推奨です。

今までどおり Game クラスは使えますが、互換性の面から推奨しません。Game クラスを継承しているプラグインも正しく動きますが、今後 Game クラスを継承するようなプラグインをアップデート / 作成する場合は、Core クラスを継承するように変更することをおすすめします。

たまにGameクラスを使ってるサンプルもありますが、v0.6.0より古い時のやつなんだなーって思ったほうがいいと思います。

Label ("text")

主なプロパティの初期値、もしくは実行時の初期状態

var Label = function("text"){
this.color = undefined;//(#000)文字色の指定
this.font = 14px serif;//文字サイズ フォントの指定
this.text = text;//表示する文字列
this.textAlign = left;//文字の位置指定
}

オブジェクトの生成(インスタンス化)

var string = new Label("test");

表示はシーン内にaddChildで追加を行う。

core.onload = function(){ 
var string = new Label("test");
core.rootScene.addChild(string);
}

Sprite(width,height)

主なプロパティの初期値、もしくは実行時の初期状態

var Sprite = function(width,height){
this.frame = 0;// 表示するフレームのインデックス.
this.image = null;// Spriteで表示する画像.
this.height = height;// Spriteの高さ
this.width = width;// Spriteの幅
this.x = 0;//Spriteのx軸の初期位置
this.y = 0;//Spriteのy軸の初期位置
this.scaleX = 0;//Spriteの横幅
this.scaleY = 0;//Spriteの縦幅
}

オブジェクトの生成（インスタンス化）

var image = new Sprite(32,32);

表示するフレームのインデックス

Spriteと同じ横幅と高さを持ったフレームがenchant.Sprite#imageプロパティの画像に左上から順に 配列されていると見て, 0から始まるインデックスを指定することでフレームを切り替える. 数値の配列が指定された場合、それらを毎フレーム順に切り替える。 ループするが、null値が含まれているとそこでループをストップする。

例として 64px32pxの画像に32px32pxのキャラが二体描画されてるとする。

var image(32,32) = new Sprite;

というスプライトを作成し、

image.frame = [0,1];

として指定するとフレーム毎に二体の絵が切り替わりで表示されるという意味。

表示はシーン内にaddChildで追加を行う。

enchant();
window.onload = function(){
var core = new Core();
core.preload("chara1.png");
core.onload = function(){
var img = new Sprite(32,32);
img.image = core.assets["chara1.png"];
core.rootScene.addChild(img);
 }
 core.start();
}

画面に表示にするにあたりLabelとはいくつか異なった点がある。
・core.preloadで予め利用する画像の読み込みを行わないといけない。
・core.start()しないと表示されない。

addEventListener

object.addEventListener("イベントタイプ",追加するイベントリスナ);

イベントリスナを追加するためのメソッド。
主にキャラクターを動かしたりするのに使う。

イベントタイプにはよく利用されるものとして
"touchstart" : タッチ/クリックされたとき
"touchmove" : タッチ座標が動いた/ドラッグされたとき
"touchend" : タッチ/クリックが離されたとき
"enterframe" : 新しいフレームが描画される前
"exitframe" : 新しいフレームが描画された後
などがある。

ここでイベントタイプは全て確認できます。
http://wise9.github.io/enchant.js/doc/core/ja/symbols/enchant.Event.html

追加するイベントは関数で設定する。

何を動かす?.addEventListener("何をきっかけに動かす？",function(){どう動かす？});

試しにキャラクターが勝手に横にスライドするサンプルを作る。

enchant();

window.onload = function(){

var core = new Core();

core.preload("chara1.png");

core.onload = function(){

//キャラクタ/////////////////////////////
var img = new Sprite(32,32);
img.image = core.assets["chara1.png"];
///////////////////////////////////////

core.rootScene.addChild(img);

//動かす///////////////////////////////
img.addEventListener("enterframe", function(){
					  this.x += 1;
					});
 }
 core.start();
}

core.start();でフレームが動き始める -> 新しいフレームが描画される前にキャラクターがx座標に1進む -> 以降繰り返し