cocos2d 使用TexturePacker制作plist文件

上一篇提到plist文件在cocos2d中的使用，那么如何制作plist文件呢？

一、下载TexturePacker

推荐使用TexturePacker，使用免费功能创建我们的需要的已经足够了，收费功能暂时不需要，下载地址：http://www.codeandweb.com/texturepacker/

下载安装即可。

二、免费使用

使用第三个选项：”Use free“即可，我们用不到收费功能

三、放入小图

将该小图拖入到右边的Sprites窗口里就可以了，再依次拖入其它图片

依次拖入图片后，软件会自动选择空位置将图片安排进去，同时记录图片在图中的位置，细心的读者可能发现有一张图片旋转了，这都是软件为了节省空间自动旋转的，我们不需要管它，同时在代码中引用时也不需要管，plist文件会记录，我们还是只需要引用图片名称就行了。最后将图片导出。

四、导出图片和plist文件

点击Publish，选择文件导出位置就可以了

最后，图片和对应的plist文件就生成好了，我们可以用于Cocos2d开发游戏了……

我制作的：

                    

对于plist文件是如何保存图片位置的？

plist文件数一个xml文件我们可以用Eclipse或者记事本打开

    
        frames
        
            character1.png
            
                frame
                {{2,2},{68,90}}
                offset
                {1,-5}
                rotated
                
                sourceColorRect
                {{15,10},{68,90}}
                sourceSize
                {96,100}
            
            character2.png
            
                frame
                {{72,2},{76,88}}
                offset
                {2,-6}
                rotated
                
                sourceColorRect
                {{17,12},{76,88}}
                sourceSize
                {106,100}
            
            character3.png
            
                frame
                {{150,2},{76,100}}
                offset
                {8,4}
                rotated
                
                sourceColorRect
                {{23,1},{76,100}}
                sourceSize
                {106,110}
            
        
        metadata
        
            format
            2
            realTextureFileName
            picture.png
            size
            {252,94}
            smartupdate
            $TexturePacker:SmartUpdate:4d9f9052f72b479531d5262ac554d5db:c14790402c7beb896b15e46c664da0c0:aee6d656c46f4f58abed154134950510$
            textureFileName
            picture.png
        
    

作者也不是很明白代码的意思，我们一起来解读一下。

不难看出，一个对应一个值，这个值可能是矩形区域,也可能是字符串,按照这个方法，这样我们拿第一张图character1.png来解析

character1.png： 属性     //  小图的名称，在代码中可以直接通过该名称引用图片

frame:   {{2,2},{68,90}}            // 图片所在区域左上角和右下角的坐标
offset:    {2,-6}                           // 未知
rotated:     false                        //    是否旋转，可以看到第三张的值为true
sourceColorRect:    {{23,1},{76,100}}    // 未知
sourceSize:    {106,110}        // 未知

还望知道的读者分享一下经验

好了，将图片和plist文件导入到assets文件夹去开发吧！