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 代表的含义

textureFileNamerealTextureFileName:都是图片名(这个图片必须和 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 的软件,功能尚可。

 

posted @ 2015-05-17 11:18  前端攻城师-CZF  阅读(1583)  评论(0编辑  收藏  举报