SpriteSheetでキャラクタアニメーション / CreateJS


CreateJSではSpriteSheetというアニメーション用に用意されたクラスがあります。
この場合はパラパラ漫画的なアニメーションです。

キャラクタのアニメーションをずらっと並べた画像を用意します。
サンプルにある下記のような感じ。
アニメーションGIFとかじゃなく、全ての動きが並んだ状態です。
https://github.com/CreateJS/EaselJS/blob/master/examples/assets/runningGrant.png

そして、下記のようにアニメーションの設定をします。
設定方法は何種類か用意されていて、細かい設定が出来るようになってます。
http://createjs.com/Docs/EaselJS/SpriteSheet.html

1
2
3
4
5
6
7
8
9
10
11
12
var playerWidth = 165;
var playerHeight = 292;
var spriteSheet = {
    images: ['path/to/image.png'],
    frames: { width: playerWidth, height: playerHeight },
    animations: {
        run: [0, 25],
        jump: [26, 63]
    }
};
var ss = new createjs.SpriteSheet(spriteSheet);
var character = new createjs.BitmapAnimation(ss);

この場合、アニメーション名「run」に 0 〜 25 までの連続した動きが使われます。
frames で指定した width, heigt で自動的に分割されます。
0 〜 25 はこの分割された配列のインデックスみたいなもんです。

「jump」のあとはそのまま「run」を再生させたり、「run」はルーブさせたりできます。

1
2
ss.getAnimation("run").next = "run";
ss.getAnimation("jump").next = "run";

キャラクタはいったん Container に登録してから使った方が後からイロイロ調整できそうです。
というか、addChild が Container にしか用意されてないので、そうしろってコトかと。

キャラクタの移動は Container で調整したいので、画像の中心に座標の原点が来るようにズラします。
移動や回転、拡縮に便利なので。

1
2
3
var player = new Container;
player.addChild(character);
character.setTransform(-playerWidth/2, -playerHeight/2);

あとはキーイベントなどに関連付けたりして、アニメーションを再生させればOKす。
再生は設定で指定したアニメーション名を使用します。

1
character.gotoAndPlay('run');

Error: Suspended

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です