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

横スクロール / CreateJS

シューティングみたいな横スクロールつくってみる。
背景とか画像読み込むので PreloadJS も使う。

1
<script src="http://code.createjs.com/preloadjs-0.2.0.min.js"></script>
1
2
3
4
5
6
var manifest = [
    { src: "img/bg.png", id: "background" },
    { src: "img/fg.png", id: "foreground" }
];
var loader = new createjs.PreloadJS;
loader.loadManifest(manifest);

画像の読み込み完了してから各処理に移りたいので、下記のようにしておく。

1
2
3
4
5
6
7
8
9
10
11
12
13
var assets = [];

loader.onFileLoad = handleFileLoad;
loader.onComplete = handleComplete;

function handleFileLoad(e){
    assets.push(e);
}
function handleComplete(){
    for (var i = 0; i < assets.length; i++){
        // 読み込まれた画像を処理する
     }
}

onComplete 時には assets に読み込んだ画像データが格納されています。
画像もこれまでの円や四角と同じで Shape で作成します。

1
2
3
4
5
6
for (var i = 0; i < assets.length; i++){
    var result = assets[i].result;
    var s = new createjs.Shape;
    s.graphics.beginBitmapFill(result).drawRect(0, 0, result.width, result.height);
...
}

あとはオブジェクトごとに tick でそれぞれ動きをつければそれらしくなります。
画像を複数枚用意してアニメーションさせることも出来るみたいです。
今回は簡単に座標の移動だけやってみました。

Error: Suspended

Segmentで多関節 / CreateJS

CreateJS使って多関節やってみます。
サンプルのSegment参考にしてます。

多関節は描画が簡単なので円にします。
Shape だと親子階層出来ないので、Container 使います。

1
2
3
4
var container = new createjs.Container();
var shape = new createjs.Shape();
shape.graphics.f(color).dc(0, 0,radius);
container.addChild(shape);

CreateJS のサンプルでは下記のように Container クラスを継承して使ってました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function Segment(){
    this.r = radius;
    this.color = 'yellow';
    this.init();
}
Segment.prototype = new createjs.Container();
Segment.prototype.r;
Segment.prototype.color;
Segment.prototype.Container_initialize = Segment.prototype.initialize;
Segment.prototype.init = function(){
    this.Container_initialize();
    this.addChild(this.getSprite());
};
Segment.prototype.getSprite = function(){
    var s = new createjs.Shape();
    s.graphics.f(this.color).dc(0, 0, this.r);
    return s;
};

あとはいくつか親子階層にしてみます。

1
2
3
4
5
6
7
8
9
10
var seg = [];
seg[0] = new Segment;
var parent = seg[0];

for (var i = 1; i < SEGMENT_NUM; i++){
    seg.push(new Segment);
    seg[i].setTransform(seg[i].r * 2.5, 0);
    parent.addChild(seg[i]);
    parent = seg[i];
}

あとは CreateJS の Ticker でアニメーションをつければ完成。

1
2
3
4
5
6
function tick(){
    for (var i = 1; i < SEGMENT_NUM; i++){
        // 動きをつける
    }
    stage.update();
}

Error: Suspended

DOM Element / CreateJS

CreateJSでDOM Elementを操作します。
たぶん jQuery とかの方がイロイロできそうですが、ゲーム作る時に canvas 以外も動かしたくなった時のために。
CreateJS では DOM の操作の時も canvas いるみたいです。
対象となるHTMLは下記の感じ。

1
2
3
4
5
6
<div id="target" style="background-color: blue; width: 320px; height: 240px;">
    TEST
</div>
<canvas id="demoCanvas" width="640" height="480">
    alternate content
</canvas>

DOM Element でも今までの Shape とそんな変わりない感じに使えます。
下記は試しに 30度回転。

1
2
var content = new createjs.DOMElement('target');
content.rotation = 30;

Shape で描画する時との違いは、DOM Element は canvas からはみ出ることですかね。