cc.SpriteFrame.create(image,rect)でアニメーションを記述する

アニメーションの作成方法として
前回記載した「TexturePackerで作成した素材をCocos2d-html5で動作させる」
http://d.hatena.ne.jp/oggata/20140327/1395896104
を記載した。
この方法では複数画像をspriteにしてplistを作って..という手順を踏むのがけっこう大変。
既にsprite化された素材を使う場合もあるので、そういう場合はSpriteFrameで画像を分割してAnimationにするのがはやそう。
(注: v2.2.2ではSprite.create()の第二引数にrectが指定できないので、v2.2.3を使う。)

var frameSeq = [];
for (var i = 0; i <= 7; i++) {
    var frame = cc.SpriteFrame.create("hoge.png",cc.rect(120*i,0,120,120));
    frameSeq.push(frame);
}
this.wa = cc.Animation.create(frameSeq,0.05);
this.ra = cc.RepeatForever.create(cc.Animate.create(this.wa));
this.sprite = cc.Sprite.create("hoge.png",cc.rect(0 ,0 ,120, 120));
this.sprite.runAction(this.ra);
this.addChild(this.sprite);

sample image: rei.png