enchant.js:素材作成

enchant.js

いや、ありがたいことです。私も早速DLさせていただきました。
さて@さんが作成してくれた素材ですが、Flash用に作成したものということで動きのある画像が分割されて保存されています。
一方enchant.jsでは、動きのある絵を１枚の画像に収めることで、frameの増減だけで動きのあるアニメを表現しています。
じゃあ、@さんが作成してくれた素材をenchant.jsで使う場合は、グラフィックソフトを使って自分で１枚にまとめなくてはならないのでしょうか？
いえ、そんなことはありません。
最終的に１枚にまとめなければいけないのは確かですが、それも全部プログラムでやってしまいましょう。
では前提として、tetsukoという女の子の画像、1.png～6.pngまでがpreloadされているものとします。（なぜ６までかいというと、７から横向きになって横幅が変わるからです）

var tetsuko = new Sprite(17, 28);
tetsuko.image = new Surface(170, 28);
for (var i = 0; i < 6; i++) {
    tetsuko.image.draw(game.assets[(i + 1) + '.png'], 0, 0, 17, 28, i * 17, 0, 17, 28);
}
tetsuko.addEventListener(Event.ENTER_FRAME, function(e){
    this.frame = (this.frame + 1) % 3;
});

これでOKです。
何のことはありません。
Surfaceに順次画像をコピペしていってるだけです。
横向きの画像を追加する場合は、横の追加位置と追加サイズに気を付けてください。