cocos2d-js 显示帧序列图中的一帧

1.flashCC中打开库，在一个元件中右键->Generate Sprite Sheet...设置如下：

2.点Export后得到playerWalk.png和playerWalk.plist，复制到当前项目目录的res文件夹下。如图:

3.修改resource.js

var res = {
    playerWalk_plist:"res/playerWalk.plist",
    playerWalk_png:"res/playerWalk.png"
};

var g_resources = [];
for (var i in res) {
    g_resources.push(res[i]);
}

4.修改app.js

var HelloWorldLayer = cc.Layer.extend({
    sprite:null,
    ctor:function () {
        this._super();

        var size = cc.winSize;
        
        cc.spriteFrameCache.addSpriteFrames(res.playerWalk_plist,res.playerWalk_png);

        var sp=cc.Sprite.create("#playerWalk0000");//前面加'#'号,再加plist中的帧key名
        sp.setPosition(cc.p(size.width*0.5,size.height*0.5));
        this.addChild(sp);

        return true;
    }
});

var HelloWorldScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new HelloWorldLayer();
        this.addChild(layer);
    }
});

 5.playerWalk.plist

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
    <dict>
        <key>frames</key>
        <dict>
            <key>playerWalk0000</key>
            <dict>
                <key>aliases</key>
                <array/>
                <key>sourceColorRect</key>
                <string>{{0,0},{46,67}}</string>
                <key>spriteOffset</key>
                <string>{0,0}</string>
                <key>spriteSize</key>
                <string>{46,67}</string>
                <key>spriteSourceSize</key>
                <string>{46,67}</string>
                <key>spriteTrimmed</key>
                <false/>
                <key>textureRect</key>
                <string>{{0,0},{46,67}}</string>
                <key>textureRotated</key>
                <false/>
            </dict>
            <key>playerWalk0001</key>
            <dict>
                <key>aliases</key>
                <array/>
                <key>sourceColorRect</key>
                <string>{{0,0},{46,67}}</string>
                <key>spriteOffset</key>
                <string>{0,0}</string>
                <key>spriteSize</key>
                <string>{46,67}</string>
                <key>spriteSourceSize</key>
                <string>{46,67}</string>
                <key>spriteTrimmed</key>
                <false/>
                <key>textureRect</key>
                <string>{{46,0},{46,67}}</string>
                <key>textureRotated</key>
                <false/>
            </dict>
            <key>playerWalk0002</key>
            <dict>
                <key>aliases</key>
                <array/>
                <key>sourceColorRect</key>
                <string>{{0,0},{46,67}}</string>
                <key>spriteOffset</key>
                <string>{0,0}</string>
                <key>spriteSize</key>
                <string>{46,67}</string>
                <key>spriteSourceSize</key>
                <string>{46,67}</string>
                <key>spriteTrimmed</key>
                <false/>
                <key>textureRect</key>
                <string>{{92,0},{46,67}}</string>
                <key>textureRotated</key>
                <false/>
            </dict>
            <key>playerWalk0003</key>
            <dict>
                <key>aliases</key>
                <array/>
                <key>sourceColorRect</key>
                <string>{{0,0},{46,67}}</string>
                <key>spriteOffset</key>
                <string>{0,0}</string>
                <key>spriteSize</key>
                <string>{46,67}</string>
                <key>spriteSourceSize</key>
                <string>{46,67}</string>
                <key>spriteTrimmed</key>
                <false/>
                <key>textureRect</key>
                <string>{{138,0},{46,67}}</string>
                <key>textureRotated</key>
                <false/>
            </dict>
            <key>playerWalk0004</key>
            <dict>
                <key>aliases</key>
                <array/>
                <key>sourceColorRect</key>
                <string>{{0,0},{46,67}}</string>
                <key>spriteOffset</key>
                <string>{0,0}</string>
                <key>spriteSize</key>
                <string>{46,67}</string>
                <key>spriteSourceSize</key>
                <string>{46,67}</string>
                <key>spriteTrimmed</key>
                <false/>
                <key>textureRect</key>
                <string>{{184,0},{46,67}}</string>
                <key>textureRotated</key>
                <false/>
            </dict>
            <key>playerWalk0005</key>
            <dict>
                <key>aliases</key>
                <array/>
                <key>sourceColorRect</key>
                <string>{{0,0},{46,67}}</string>
                <key>spriteOffset</key>
                <string>{0,0}</string>
                <key>spriteSize</key>
                <string>{46,67}</string>
                <key>spriteSourceSize</key>
                <string>{46,67}</string>
                <key>spriteTrimmed</key>
                <false/>
                <key>textureRect</key>
                <string>{{0,67},{46,67}}</string>
                <key>textureRotated</key>
                <false/>
            </dict>
            <key>playerWalk0006</key>
            <dict>
                <key>aliases</key>
                <array/>
                <key>sourceColorRect</key>
                <string>{{0,0},{46,67}}</string>
                <key>spriteOffset</key>
                <string>{0,0}</string>
                <key>spriteSize</key>
                <string>{46,67}</string>
                <key>spriteSourceSize</key>
                <string>{46,67}</string>
                <key>spriteTrimmed</key>
                <false/>
                <key>textureRect</key>
                <string>{{46,67},{46,67}}</string>
                <key>textureRotated</key>
                <false/>
            </dict>
            <key>playerWalk0007</key>
            <dict>
                <key>aliases</key>
                <array/>
                <key>sourceColorRect</key>
                <string>{{0,0},{46,67}}</string>
                <key>spriteOffset</key>
                <string>{0,0}</string>
                <key>spriteSize</key>
                <string>{46,67}</string>
                <key>spriteSourceSize</key>
                <string>{46,67}</string>
                <key>spriteTrimmed</key>
                <false/>
                <key>textureRect</key>
                <string>{{92,67},{46,67}}</string>
                <key>textureRotated</key>
                <false/>
            </dict>
            <key>playerWalk0008</key>
            <dict>
                <key>aliases</key>
                <array/>
                <key>sourceColorRect</key>
                <string>{{0,0},{46,67}}</string>
                <key>spriteOffset</key>
                <string>{0,0}</string>
                <key>spriteSize</key>
                <string>{46,67}</string>
                <key>spriteSourceSize</key>
                <string>{46,67}</string>
                <key>spriteTrimmed</key>
                <false/>
                <key>textureRect</key>
                <string>{{138,67},{46,67}}</string>
                <key>textureRotated</key>
                <false/>
            </dict>
            <key>playerWalk0009</key>
            <dict>
                <key>aliases</key>
                <array/>
                <key>sourceColorRect</key>
                <string>{{0,0},{46,67}}</string>
                <key>spriteOffset</key>
                <string>{0,0}</string>
                <key>spriteSize</key>
                <string>{46,67}</string>
                <key>spriteSourceSize</key>
                <string>{46,67}</string>
                <key>spriteTrimmed</key>
                <false/>
                <key>textureRect</key>
                <string>{{184,67},{46,67}}</string>
                <key>textureRotated</key>
                <false/>
            </dict>
            <key>playerWalk0010</key>
            <dict>
                <key>aliases</key>
                <array/>
                <key>sourceColorRect</key>
                <string>{{0,0},{46,67}}</string>
                <key>spriteOffset</key>
                <string>{0,0}</string>
                <key>spriteSize</key>
                <string>{46,67}</string>
                <key>spriteSourceSize</key>
                <string>{46,67}</string>
                <key>spriteTrimmed</key>
                <false/>
                <key>textureRect</key>
                <string>{{0,134},{46,67}}</string>
                <key>textureRotated</key>
                <false/>
            </dict>
            <key>playerWalk0011</key>
            <dict>
                <key>aliases</key>
                <array/>
                <key>sourceColorRect</key>
                <string>{{0,0},{46,67}}</string>
                <key>spriteOffset</key>
                <string>{0,0}</string>
                <key>spriteSize</key>
                <string>{46,67}</string>
                <key>spriteSourceSize</key>
                <string>{46,67}</string>
                <key>spriteTrimmed</key>
                <false/>
                <key>textureRect</key>
                <string>{{46,134},{46,67}}</string>
                <key>textureRotated</key>
                <false/>
            </dict>
            <key>playerWalk0012</key>
            <dict>
                <key>aliases</key>
                <array/>
                <key>sourceColorRect</key>
                <string>{{0,0},{46,67}}</string>
                <key>spriteOffset</key>
                <string>{0,0}</string>
                <key>spriteSize</key>
                <string>{46,67}</string>
                <key>spriteSourceSize</key>
                <string>{46,67}</string>
                <key>spriteTrimmed</key>
                <false/>
                <key>textureRect</key>
                <string>{{92,134},{46,67}}</string>
                <key>textureRotated</key>
                <false/>
            </dict>
            <key>playerWalk0013</key>
            <dict>
                <key>aliases</key>
                <array/>
                <key>sourceColorRect</key>
                <string>{{0,0},{46,67}}</string>
                <key>spriteOffset</key>
                <string>{0,0}</string>
                <key>spriteSize</key>
                <string>{46,67}</string>
                <key>spriteSourceSize</key>
                <string>{46,67}</string>
                <key>spriteTrimmed</key>
                <false/>
                <key>textureRect</key>
                <string>{{138,134},{46,67}}</string>
                <key>textureRotated</key>
                <false/>
            </dict>
            <key>playerWalk0014</key>
            <dict>
                <key>aliases</key>
                <array/>
                <key>sourceColorRect</key>
                <string>{{0,0},{46,67}}</string>
                <key>spriteOffset</key>
                <string>{0,0}</string>
                <key>spriteSize</key>
                <string>{46,67}</string>
                <key>spriteSourceSize</key>
                <string>{46,67}</string>
                <key>spriteTrimmed</key>
                <false/>
                <key>textureRect</key>
                <string>{{184,134},{46,67}}</string>
                <key>textureRotated</key>
                <false/>
            </dict>
            <key>playerWalk0015</key>
            <dict>
                <key>aliases</key>
                <array/>
                <key>sourceColorRect</key>
                <string>{{0,0},{46,67}}</string>
                <key>spriteOffset</key>
                <string>{0,0}</string>
                <key>spriteSize</key>
                <string>{46,67}</string>
                <key>spriteSourceSize</key>
                <string>{46,67}</string>
                <key>spriteTrimmed</key>
                <false/>
                <key>textureRect</key>
                <string>{{0,0},{46,67}}</string>
                <key>textureRotated</key>
                <false/>
            </dict>
        </dict>
        <key>metadata</key>
        <dict>
            <key>format</key>
            <integer>3</integer>
            <key>size</key>
            <string>{256,256}</string>
            <key>target</key>
            <dict>
                <key>name</key>
                <string>playerWalk.png</string>
                <key>textureFileName</key>
                <string>playerWalk</string>
                <key>textureFileExtension</key>
                <string>png</string>
                <key>premultipliedAlpha</key>
                <true/>
            </dict>
        </dict>
    </dict>
</plist>
View Code
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/kingBook/p/5202102.html