enchant.jsのお勉強2日目。
デフォルトのくまが憎くなったので、勝手にネスに変更。
サンプル
やったこと
- イベントの設定
- タッチイベントの設定
- キーボードイベントの設定
- シーンからのオブジェクト追加・削除
- オブジェクトの移動
- スプライトアニメーションの設定
- テキストの表示
- 経過時間数の取得
シーンの概念
大元は 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:現在のフレーム数取得