enchant.jsのお勉強2日目。
デフォルトのくまが憎くなったので、勝手にネスに変更。

サンプル

enchant.jsでMOTHER2 ~ネス歩くよ~

やったこと

イベントの設定
タッチイベントの設定
キーボードイベントの設定
シーンからのオブジェクト追加・削除
オブジェクトの移動
スプライトアニメーションの設定
テキストの表示
経過時間数の取得

シーンの概念

大元は　rootScene
Scene　を作ってそこにオブジェクトを置いていく。
Scene　を切りかえて中身をまるっと変えることもできる。

イベントの設定

SpriteやLabelに特定のイベントリスナを登録していく。
リスナの登録方法は２つ。

[on+イベント名]プロパティに関数を代入する
addEventListenerを使って登録する

main.js

//[on+イベント名]プロパティに関数を代入する場合
object.onenterframe = function(){
  //処理
};

//addEventListenerを使って登録するする場合
object.addEventListener('enterframe', function() {
  //処理1
});
object.addEventListener('enterframe', function() {
  //処理2
});

※enterframe:フレームに入ったときに・毎フレームごと

addEventListenerは第1引数にイベント名、第2引数に関数を登録する。
addEventListenerの場合、1つのイベントに対して複数のリスナ登録ができる。

タッチイベントの設定

main.js

core.rootScene.on('touchstart', function(e){
  object.x = e.x;
  object.y = e.y;
});

タッチした位置をe.x　e.yでとれる。
タッチはスマホ画面でのタッチだけでなく、PCでマウスクリックにも対応してる。

キーボードイベントの設定

main.js

object.addEventListener('enterframe', function() {
  if(core.input.left) this.x -= 5;
  if(core.input.right) this.x += 5;
});

シーンからのオブジェクト追加・削除

main.js

core.rootScene.removeChild(object);
core.rootScene.addChild(object);

オブジェクトの移動

main.js

object.x -= 5;             //移動
object.rotate(20);         //回転
object.scale(1.01, 1.01);  //拡大

スプライトアニメーションの設定

main.js

core.fps = 8;
var object = new Sprite(32, 32);
object.frame = 2;                 //3番目のスプライト画像を表示
object.frame = this.age % 3;      //　0,1,2番目のどれか
object.frame = this.age % 4 + 1;  //　1,2,3番目のどれか

※this.age:スプライトを書きだして何フレーム動いたか

テキストの表示

文字を表示するにはLabelクラスを使う。
表示する文字はLabel生成時に指定するか、textプロパティで指定する。

main.js

var label = new Label();
label.x = 280;
label.y = 5;
label.color = 'red';
label.font = '14px "Arial"';
label.text = '0';

core.rootScene.addChild(label);

経過時間数の取得

main.js

label.on('enterframe', function(){
 label.text = (core.frame / core.fps).toFixed(2); //小数点2ケタまで表示
});

※core.frame:現在のフレーム数取得

参考サイト