cocos2d-x中描述精灵帧图片的plist和json文件各个key的含义

最近在研究cocos，互联网行业中，手游业最近的表现是非常的火，加上本身对游戏有浓厚兴趣，所以便染指了游戏引擎~

这次的废话就这么简短吧，因为这次记录的东西本身就很少。

在cocos中，为精灵帧添加缓存可以通过下面的方法

cc.spriteFrameCache.addSpriteFrames(url, texture)

其中，第一个参数是一个 plist 或者 json 文件的路径，第二个参数是一个纹理图片对象，一般不传就可以了

添加了精灵帧缓存后，我们就可以通过下面的方法来创建精灵

new cc.Sprite("#帧名")

当中的帧名就配置在 plist 或者 json 文件中，当然，plist 或者 json 文件描述的不单单是帧名，还有每一个帧对应的是图片中的哪一部分

下面是一个最简单的 plist 文件实例

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
　　<key>frames</key>
　　<dict>
　　　　<key>icon001</key>
　　　　<dict>
　　　　　　<key>frame</key>
　　　　　　<string>{{0,0},{240,240}}</string>
　　　　　　<key>offset</key>
　　　　　　<string>{0,0}</string>
　　　　　　<key>rotated</key>
　　　　　　<false/>
　　　　　　<key>sourceColorRect</key>
　　　　　　<string>{{0,0},{240,240}}</string>
　　　　　　<key>sourceSize</key>
　　　　　　<string>{240,240}</string>
　　　　</dict>
　　</dict>
　　<key>metadata</key>
　　<dict>
　　　　<key>format</key>
　　　　<integer>2</integer>
　　　　<key>realTextureFileName</key>
　　　　<string>b01.png</string>
　　　　<key>size</key>
　　　　<string>{240，240}</string>
　　　　<key>textureFileName</key>
　　　　<string>b01.png</string>
　　</dict>
</dict>
</plist>

再来一个 json 的实例

{
    "frames" : {
        "icon001" : {
            "frame" : "{{2,0},{640,305}}",
            "offset" : "{0,0}",
            "rotated" : false,
            "sourceColorRect" : "{{0,0},{640,305}}",
            "sourceSize" : "{640,305}"
        },
        "icon002" : {
            "frame" : "{{2,625},{320,182}}",
            "offset" : "{0,0}",
            "rotated" : false,
            "sourceColorRect" : "{{0,0},{320,182}}",
            "sourceSize" : "{320,182}"
        }
    },
    "metadata" : {
        "format" : 2,
        "realTextureFileName" : "ui_new_icon_png.png",
        "size" : "{1024, 1024}",
        "textureFileName" : "ui_new_icon_png.png"
    }
}

frames 中的各个 key 代表帧名，指向该帧对应的截图信息对象，下面这个截图信息对象中的各个 key 代表的含义

frame：表示这一帧的截图，在大图中的位置和尺寸（也就是起始坐标以及需要截取的宽高）。

offset：表示这个截图的中心点，和整个动画的中心点。

rotated：如果值为true，图片顺时针旋转90度。

sourceColorRect：这个截图在sourceSize这个方形的位置和尺寸。

sourceSize：动画的尺寸，如果一个动画有很多帧的话，所有帧的sourceSize是不变的，基本上可以理解为这么多帧中最大显示范围的那个尺寸。

metadata 中的各个 key 代表的含义

textureFileName 和 realTextureFileName：都是图片名（这个图片必须和 plist 或 json 文件在同一目录下）

size：图片的尺寸

format：这个比较复杂，放在最后特别说明一下

cocos2d-x 中的纹理定义格式，是以 Zwoptex 生成的格式为标准的。

Zwoptex 生成的格式，有4种主要不同的版本：

· format 值为0，代表 Flash 版本；

· format 值为1，Zwoptex 0.4b 以前支持；

· format 值为2，Zwoptex 1.0 以后支持，与 format1 的区别在于支持旋转；

· format 值为3，属性名称进行了大幅修改，Zwoptes1.0.2 之后支持。

生成plist文件的工具

对于纹理定义文件来说，它的作用是如何在大图中找到碎图的坐标。因此很多拼合碎图的软件可以在拼合碎图的同时生成plist文件。

TexturePacker 是所有平台上最好用的工具了。

Zwoptex 是 MAC Only 的软件，我不太喜欢用。

SpritePacker 是 Windows Only 的软件，功能尚可。