キャラクターアニメーションの方法

今回のサンプル
 サンプルの全ファイル
今回は enchant.js に付属の action-skelton フォルダのサンプルを使います。

このサンプルはクマが左から右へ移動するサンプルですがアニメーションは付いていません。こちらにアニメーションを付ける方法を解説します。

enchant.js でのアニメーションの仕組み

enchant.js ではこの様な縦横のサイズが60x30の画像が有った場合に

Sprite を20x30で作成( var bear = new Sprite(20, 30); )すると60x30の元画像は
以下の様に20x30に分割されます。

そして、frameの値が増える毎に左から右に使われる画像が移動して行きます。一番右まで移動した後は最初の位置に戻ります。

アニメーションのプログラムを追加

サンプルフォルダに有る game.js を開いて下さい。中身はこの様に成っているかと思います。

enchant();

window.onload = function() {
    var game = new Game(320, 320);
    game.preload('bear.gif');
    game.onload = function() {
        var bear = new Sprite(20, 30);
        bear.image = game.assets['bear.gif'];
        bear.addEventListener('enterframe', function() {
            this.x += 3;
        });
        game.rootScene.addChild(bear);
    };
    game.start();
};

アニメーションは移動の処理を行なっているのと同じ enterframe イベントで行うのが良いでしょう。
このイベントで this(ここでは bear に対応) の frame の値を加算させ、アニメーションさせましょう

以下の様に this.x += 3; の次の行に this.frame++; を追加しましょう。

        bear.addEventListener('enterframe', function() {
            this.x += 3;
            this.frame++;
        });

変更後のプログラムを動作させると確かにアニメーションはするのですがアニメーションが速すぎるかと思います。

現在の様に毎フレームアニメーションを切り替える方法では速すぎなので何回かに1回だけ frame を加算する(アニメーションを進める)様に変更します。プログラムはこの様に成ります。

        bear.animeWaitMax = 3;		// アニメーションのWait値
        bear.animeWaitCount = 0;	// アニメーションのWait値のカウント
        bear.addEventListener('enterframe', function() {
            this.x += 3;
            if (this.animeWaitCount >= this.animeWaitMax) {
            	this.animeWaitCount = 0;
            	this.frame++;
            } else {
            	this.animeWaitCount++;
            }
        });

animeWaitMax が何回に1回 frame を加算する(アニメーションを進める)かを指定します。今回は3と成っているので3フレームに1回アニメーションが進みます。

丁度良い感じのアニメーションに成ったかと思います。キャラクターの移動速度により、最適なアニメーションの速度は異なります。
あくまで今回の値はこの移動速度に合うアニメーション速度となります。その為、実際にゲームを作成する時にはキャラクターの移動速度に応じてWaitの値は調整する様にして下さい。