TexturePackerで作成した素材をCocos2d-html5で動作させる

1)素材の配置

Sample/res/にtexturePackerで作成した素材を配置する
Sample/res/battle_sprite.plist
Sample/res/battle_sprite.png
みたいな感じ

2)リソースの記載

Sample/src/resource.jsに追記する

var s_battle       = "res/img/battle.png";
var s_battleplist  = "res/img/battle.plist";

var g_resources = [
    //image
    {src:s_battle},
    //plist
    {src:s_battleplist},
    //fnt
    //tmx
    //bgm
    //effect
];

3)AnimationLayerを作成

var AnimationLayer = cc.Layer.extend({
    spriteSheet:null,
    battleAction:null,
    sprite:null,
    ctor:function () {
        this._super();
        this.init();
    },

    init:function () {
        this._super();

        //スプライトシートの作成
        cc.SpriteFrameCache.getInstance().addSpriteFrames(s_battleplist);
        this.spriteSheet = cc.SpriteBatchNode.create(s_battle);
        this.addChild(this.spriteSheet);


        //アニメーションを配列に入れる
        var animFrames = [];
        for (var i = 1; i <= 5; i++) {
            var str = "battle" + i + ".png";
            var frame = cc.SpriteFrameCache.getInstance().getSpriteFrame(str);
            animFrames.push(frame);
        }

        //アニメーション作成
        var animation = cc.Animation.create(animFrames, 0.1);
        
        //バトルアクション : (animationをリピート*無限)
        this.battleAction = cc.RepeatForever.create(cc.Animate.create(animation));

        //アニメーションを表示するSpriteの作成＋そのspriteでbattleActionをrunする
        this.sprite = cc.Sprite.createWithSpriteFrameName("battle001.png");
        this.sprite.setPosition(cc.p(80, 85));
        this.sprite.runAction(this.battleAction);
        this.spriteSheet.addChild(this.sprite);

    }
});

4)シーンを切り替え.(前回SampleLayerとして作っていたものをAnimationLayerに切り替えて実行させる)

var SampleScene = cc.Scene.extend({
    onEnter:function(){
        this._super();
        var layer = new AnimationLayer();
        layer.init();
        this.addChild(layer);
    }
});