説明
2つの画像を切り換えてアニメーション表示するには、あらかじめスプライトにカウンタを用意しておきます。このカウンタはフレームイベントが呼び出されるたびに1つ増えるものです。スプライトの画像はあらかじめ2枚の画像を横に並べたものを用意します。ここでは32×32ピクセルの画像を横に並べています。つまり64×32ピクセルの1枚の画像を用意しています。enchant.jsでは1枚の画像に複数のキャラクタが描かれている場合、それらを切り換えて表示することができます。この切り替えはスプライトのframeプロパティに表示する画像の番号を設定することで行うことができます。
次にスプライトのaddEventListener()を使ってEvent.ENTER_FRAMEイベントが発生したら移動処理を行う関数（イベントハンドラ）を呼び出します。関数内ではスプライトのカウンタに1を加算します。カウンタの値を16で割り、そのあまりを求めます（剰余）。JavaScriptでは%演算子を使うと割り算の余り（剰余）を求めることができます。16で除算した余りは0〜15までの範囲になります。8以下とそうでない場合に分け、8以下ならframeプロパティに0を、8より大きい場合はframeプロパティに1を設定します。
書籍などでは、これらを組み合わせたり排他的論理和(XOR/EOR)を使って完結に記述されています。基本的な原理は同じです。
■HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample game</title>
<style>
body { margin: 0; }
</style>
<script src="js/enchant.min.js"></script>
<script src="js/main.js"></script>
</head>
<body></body>
</html>
■JavaScript (main.js)
enchant(); // ライブラリの初期化
window.onload = function(){
// 320×240ピクセルサイズの画面(Canvas)を作成
var game = new Game(320, 240);
// フレームレートの設定。15fpsに設定
game.fps = 15;
// 画像データをあらかじめ読み込ませる
game.preload("images/man.png");
// データの読み込みが完了したら処理
game.onload = function(){
var man = new Sprite(32, 32);
man.image = game.assets["images/man.png"];
man.x = 160;
man.y = 120;
man.counter = 0; // ゆっくりアニメーションさせるためのカウンタ
game.rootScene.addChild(man);
// フレームイベントが発生したら処理
man.addEventListener(Event.ENTER_FRAME, function(){
this.counter = this.counter + 1; // 1フレームごとに1を加算
var n = this.counter % 16; // 16の剰余を求める
if (n < 8){ // 16の半分の8より小さいかどうか調べる
this.frame = 0; // 画像データの中で1番目の場所の画像設定
}else{
this.frame = 1; // 画像データの中で2番目の場所の画像設定
}
});
}
game.start(); // ゲーム処理開始
}
目次に戻る