enchant.jsでキャラクタを動かそう! (5/5)

では、表示したスプライトを動かしてみましょう。動かすには、「フレーム」と呼ばれるものを利用します。先に述べたように、フレームは映画のコマのようなものです。

映画を上映する時、１つ１つのコマを高速に切り替えて静止した絵が動いてみるのと同様に、enchant.jsでも高速にフレームを切り替え表示することで静止して表示されているキャラクタが動いて見えます。

このフレームを利用する場合の基本的なスクリプトを整理すると以下のようになります。

※window.onloadに用意する処理

var 《Game》= new Game( 横幅 , 高さ );
game.fps = １秒あたりのフレーム数;
《Game》.onload = function(){
    ……Spriteの準備……
    《Sprite》.addEventListener(enchant.Event.ENTER_FRAME, 
        function(){
            ……フレーム切替時の処理……
        });
};

game.fps = １秒あたりのフレーム数;
フレームは、毎秒何回という形で表示スピードを設定できます。それを管理するのがGameオブジェクトの「fps」というプロパティです。例えばこれを20にすれば、「毎秒20回のスピードでフレームを切り替える」ということになります。

《Sprite》.addEventListener(enchant.Event.ENTER_FRAME, function(){……});

フレームを切り替える時に発生するイベントです。正確には、切り替えの直前に呼び出されます。このイベント発生時に必要な処理を行うことで、フレーム切り替えごとに表示を変更することができるわけです。

イベントのバインドは、Spriteの「addEventListener」を行います。第１引数にはイベントの種類を、第２引数には呼び出される処理（関数）を用意します。フレーム切替時のイベントは、enchant.Event.ENTER_FRAMEという値を設定して下さい。

――では、実際のサンプルを下に掲載しておきましょう。先ほどのリストに修正を加えたものです。ページを表示すると、キャラクタが斜め右下へと動き続けます。下端あるいは右端まで移動したら一番上および左端に移動し、ひたすら動き続けます。ここでは、addEventListenerに以下のような処理を用意していますね。

char1.addEventListener(enchant.Event.ENTER_FRAME, function(){
    char1.moveBy(5, 5);
    if (char1.x > game.width){ char1.x = -100; }
    if (char1.y > game.height){ char1.y = -100; }
});

Spriteの「moveBy」というのは、引数に指定した距離だけキャラクタを移動させるものです。moveBy(5, 5)ならば、右に５ドット、下に５どっと移動させます。xとyのプロパティを変更して動かしてもいいのですが、ここでのように「ちょっと右に移動する」とか「ちょっと下に移動する」というようなときは、このmoveByが便利です。

また、Spriteがゲーム領域の右端または下端まで移動したかどうかを調べるのに、ゲーム領域の横幅と高さを返す「width」「height」というプロパティを利用しています。これらの値より、Spriteのxおよびyプロパティの値が大きければ、端まで達している、と判断できるわけです。

とりあえず、これで「キャラクタを表示して動かす」といった基本は使えるようになりました。それぞれでいろいろとキャラクタを動かしてみてください。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

enchant();

window.onload = function(){
	var game = new Game(400, 300);
	game.preload("character1.png");
	game.fps = 20;
	
	game.onload = function(){
		var char1 = new Sprite(100, 100);
		char1.image = game.assets["character1.png"];
		char1.x = 0;
		char1.y = 0;
		char1.addEventListener(enchant.Event.ENTER_FRAME, function(){
			char1.moveBy(5, 5);
			if (char1.x > game.width){ char1.x = -100; }
			if (char1.y > game.height){ char1.y = -100; }
		});
		game.rootScene.backgroundColor = "#ffaaaa";
		game.rootScene.addChild(char1);
	};
	
	game.start();
};