cocos2d 使用TexturePacker制做plist文件

1、下载TexturePacker

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

下载安装便可。

2、无偿使用

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

3、放入小图

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

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

4、导出图片和plist文件

点击Publish，选择文件导出位置就能够了

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

我制做的：

                    

 

 

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

plist文件数一个xml文件咱们能够用Eclipse或者记事本打开

 

[html] view plain copy

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">  
3. <plist version="1.0">  
4.     <dict>  
5.         <key>frames</key>  
6.         <dict>  
7.             <key>character1.png</key>  
8.             <dict>  
9.                 <key>frame</key>  
10.                 <string>{{2,2},{68,90}}</string>  
11.                 <key>offset</key>  
12.                 <string>{1,-5}</string>  
13.                 <key>rotated</key>  
14.                 <false/>  
15.                 <key>sourceColorRect</key>  
16.                 <string>{{15,10},{68,90}}</string>  
17.                 <key>sourceSize</key>  
18.                 <string>{96,100}</string>  
19.             </dict>  
20.             <key>character2.png</key>  
21.             <dict>  
22.                 <key>frame</key>  
23.                 <string>{{72,2},{76,88}}</string>  
24.                 <key>offset</key>  
25.                 <string>{2,-6}</string>  
26.                 <key>rotated</key>  
27.                 <false/>  
28.                 <key>sourceColorRect</key>  
29.                 <string>{{17,12},{76,88}}</string>  
30.                 <key>sourceSize</key>  
31.                 <string>{106,100}</string>  
32.             </dict>  
33.             <key>character3.png</key>  
34.             <dict>  
35.                 <key>frame</key>  
36.                 <string>{{150,2},{76,100}}</string>  
37.                 <key>offset</key>  
38.                 <string>{8,4}</string>  
39.                 <key>rotated</key>  
40.                 <true/>  
41.                 <key>sourceColorRect</key>  
42.                 <string>{{23,1},{76,100}}</string>  
43.                 <key>sourceSize</key>  
44.                 <string>{106,110}</string>  
45.             </dict>  
46.         </dict>  
47.         <key>metadata</key>  
48.         <dict>  
49.             <key>format</key>  
50.             <integer>2</integer>  
51.             <key>realTextureFileName</key>  
52.             <string>picture.png</string>  
53.             <key>size</key>  
54.             <string>{252,94}</string>  
55.             <key>smartupdate</key>  
56.             <string>$TexturePacker:SmartUpdate:4d9f9052f72b479531d5262ac554d5db:c14790402c7beb896b15e46c664da0c0:aee6d656c46f4f58abed154134950510$</string>  
57.             <key>textureFileName</key>  
58.             <string>picture.png</string>  
59.         </dict>  
60.     </dict>  
61. </plist>  

 

不难看出，一个<key>对应一个值，这个值多是矩形区域<dict>,也多是字符串<string>,按照这个方法，这样咱们拿第一张图character1.png来解析

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

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