スプライトを使いこなそう！ (2/5)

では、作成したイメージファイルを使ってキャラクタをアニメーションさせてみましょう。前回作成したスクリプトを少しだけ修正して、用意したcharacter2.pngのイメージ２つを切り替え表示しながら動かしてみます。

下のリスト欄に、修正したスクリプトを掲載しておきます。HTMLから読み込むスクリプトファイル（前回作成したサンプルでは、script.js）に記述してください。なお、HTMLファイルおよびゲームの処理を記述するスクリプトファイルの作成については、第１回の記事に記述してあるのでそちらをお読みください。

今回、Gameのフレーム切り替えイベントで呼び出される関数に、キャラクタの表示イメージを切り替えるための処理を追加してあります。といっても難しいものではありません。以下の１文のみです。

this.frame = this.age % 2;

今回、イベント内でSpriteを処理している部分は、直接char1を指定するのでなく、「this」を使うようにしています。thisは、イベントが発生したオブジェクトが代入される特別な変数です。直接、Spriteの代入された変数（char1など）を指定すると、後の拡張が面倒になるので、ここでthisを使う形に書き換えておきました。

さて、ここで使っている「frame」プロパティは、そのSpriteに設定されている「フレーム」を示すためのものです。Spriteには、imageに設定されたイメージファイルからイメージを表示します。が、このとき、Spriteの大きさとイメージの大きさが異なるとき（イメージのほうが大きいとき）、イメージをSpriteのサイズに合わせて分割し、そこから必要なものを取り出して表示するようになっています。Spriteは、

new Sprite( 横幅 , 高さ )

このようにしてオブジェクトを作成しましたね？　今回のイメージは200×100ドットですから、Spriteのサイズで分割すると、２つのイメージに分割されるわけです。

この「何番目のイメージを表示するか」を管理するのが「frame」プロパティなのです。分割されたイメージは、ゼロ番から順に番号付けされています。200×100のイメージなら、ゼロ番と１番に整理されているわけですね。このframeをゼロにすれば左側のゼロ番目のイメージが、１にすれば右側の１番目のイメージがそれぞれ表示されるというわけです。

今回は、Gameのフレームが切り替わるごとに交互にイメージを表示するため、「this.age % 2」という値を設定しています。「age」は、Gameがスタートしキャラクタが動き出してから何フレーム目か？を示す値が保管されているプロパティです。つまり、この値を取り出して２で割ったあまりをframeに設定することで、フレームが切り替わるごとに「0, 1, 0, 1, ……」とゼロと１を交互に設定することができるというわけです。

(by. SYODA-Tuyano.)

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

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

enchant();

window.onload = function(){
    var game = new Game(400, 300);
    game.preload("character2.png");
    game.fps = 20;

    game.onload = function(){
        var char1 = new Sprite(100, 100);
        char1.image = game.assets["character2.png"];
        char1.x = 0;
        char1.y = 0;
        char1.addEventListener(enchant.Event.ENTER_FRAME, function(){
            this.frame = this.age % 2; // ★
            this.moveBy(5, 5);
            if (this.x > game.width){ this.x = -100; }
            if (this.y > game.height){ this.y = -100; }
        });
        game.rootScene.backgroundColor = "#ffaaaa";
        game.rootScene.addChild(char1);
    };

    game.start();
};