前回、キャラクタを「Sprite」というオブジェクトを使って動かしてみました。これには、Gameオブジェクトのフレーム切替時の処理を利用して表示を変更していましたね。

Gameのフレームは、非常に簡単にアニメーションを表示させることができます。が、単にキャラクタの位置が変更されるというだけでは、アニメーションとしても限定されます。表示されるキャラクタが（位置を移動するのでなく）変化してくれないと本当のアニメーションにはなりません。

キャラクタのイメージを複数用意し、それを切り替え表示してアニメーションする、といった手法がゲームの世界では一般的に用いられています。これを行なってみましょう。

キャラクタのイメージを切り替えて表示する場合、enchant.jsでは、使用するイメージを１つのファイルにまとめたものを用意して、それを使います。例えば２つのイメージを交互に切り替え表示して動かそう、と思った場合には、２つのイメージを横に並べたイメージファイルを１つ用意するのです。これを読み込み、キャラクタのサイズごとにイメージを切り抜いてSpriteに表示する、というようなイメージで考えておくとよいでしょう。

では、実際にやってみましょう。前回、100×100ドットの大きさでキャラクタのイメージを作りましたね。このキャラクタを少し変化させたイメージをもう１つ作成し、この２つを横に並べて200×100ドットのイメージファイルを１つ作成してください。ファイル名は、「character2.png」としておきましょう。前回同様、キャラクタの周辺部分は透過設定しておきます。作成したファイルは、HTMLファイルと同じ場所に配置しておきましょう。

今回は２つのイメージを並べたものを用意しましたが、基本的な考え方はイメージの数が３つでも４つでも同じです。利用する順番に横一列に並べたイメージファイルを用意します。

※以下はサンプルで作成したイメージファイル。
100×100のイメージを横に２つ並べ、200×100にまとめたもの。