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}        // 未知