libro
www.tuyano.com
初心者のためのenchant.jsゲームプログラミング入門

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

作成:2012-09-23 11:16
更新:2012-09-23 11:16

■スプライトのframeを利用しよう

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

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

今回、Gameのフレーム切り替えイベントで呼び出される関数に、キャラクタの表示イメージを切り替えるための処理を追加してあります。といっても難しいものではありません。以下の1文のみです。
this.frame = this.age % 2;
今回、イベント内でSpriteを処理している部分は、直接char1を指定するのでなく、「this」を使うようにしています。thisは、イベントが発生したオブジェクトが代入される特別な変数です。直接、Spriteの代入された変数(char1など)を指定すると、後の拡張が面倒になるので、ここでthisを使う形に書き換えておきました。

さて、ここで使っている「frame」プロパティは、そのSpriteに設定されている「フレーム」を示すためのものです。Spriteには、imageに設定されたイメージファイルからイメージを表示します。が、このとき、Spriteの大きさとイメージの大きさが異なるとき(イメージのほうが大きいとき)、イメージをSpriteのサイズに合わせて分割し、そこから必要なものを取り出して表示するようになっています。Spriteは、
new Sprite( 横幅 , 高さ )
このようにしてオブジェクトを作成しましたね? 今回のイメージは200×100ドットですから、Spriteのサイズで分割すると、2つのイメージに分割されるわけです。

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

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

※プログラムリストが表示されない場合

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();
};

※関連コンテンツ

「初心者のためのenchant.jsゲームプログラミング入門」に戻る