精靈的優化-使用紋理圖集

遊戲是一種很耗費資源的應用，特別是在移動設備中的遊戲，性能優化是很是重要的

 紋理圖集（Texture Atlas）也稱爲精靈表（Sprite Sheet），它是把許多小的精靈圖片組合到一張大圖裏面。使用紋理圖集（或精靈表）有以下主要優勢：

減小文件讀取次數，讀取一張圖片比讀取一堆小文件要快。

減小OpenGL ES繪製調用而且加速渲染。

減小內存消耗。OpenGL ES 1.1僅僅可以使用2的n次冪大小的圖片（即寬度或者高度是二、四、八、64...）。若是採用小圖片OpenGL ES1.1會分配給每一個圖片2的n次冪大小的內存空間，即便這張圖片達不到這樣的寬度和高度也會分配大於此圖片的2的n次冪大小的空間。那麼運用這種圖片集的方式將會減小內存碎片。雖然在Cocos2d-x v2.0後使用了OpenGL ES 2.0，它不會再分配2的幾回冪的內存塊了，可是減小讀取次數和繪製的優點依然存在。

Cocos2d-x全面支持Zwoptex和TexturePacker，因此建立和使用紋理圖集是很容易的。

 

咱們一般可使用紋理圖集製做工具Zwoptex 和TexturePacker幫助咱們設計和生成紋理圖集文件以下圖所示，以及紋理圖集座標文件（plist）組成。

plist是屬性列表文件，它是一種XML文件，SpirteSheet.plist文件代碼以下：

[html] view plaincopy

1.   

[html] view plaincopy

1. <span style="font-size:14px;"><?xml version="1.0"encoding="UTF-8"?>  

2. <!DOCTYPE plist PUBLIC "-//AppleComputer//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>hero1.png</key>                                                                                            ②  

8.             <dict>  

9.                 <key>frame</key>  

10.                <string>{{2,1706},{391,327}}</string>                                                              ③  

11.                 <key>offset</key>  

12.                <string>{6,0}</string>  

13.                 <key>rotated</key>  

14.                 <false/>  

15.                <key>sourceColorRect</key>  

16.                 <string>{{17,0},{391,327}}</string>  

17.                <key>sourceSize</key>  

18.                <string>{413,327}</string>                                                                               ④  

19.             </dict>  

20.                        ……  

21.            <key>mountain1.png</key>  

22.             <dict>  

23.                 <key>frame</key>  

24.                <string>{{2,391},{934,388}}</string>  

25.                 <key>offset</key>  

26.                <string>{0,-8}</string>  

27.                 <key>rotated</key>  

28.                 <false/>  

29.                <key>sourceColorRect</key>  

30.                 <string>{{0,16},{934,388}}</string>  

31.                <key>sourceSize</key>  

32.                <string>{934,404}</string>  

33.             </dict>  

34.             … …  

35.        </dict>  

36.        <key>metadata</key>  

37.        <dict>  

38.             <key>format</key>  

39.             <integer>2</integer>  

40.            <key>realTextureFileName</key>  

41.            <string>SpirteSheet.png</string>  

42.             <key>size</key>  

43.            <string>{1024,2048}</string>  

44.            <key>smartupdate</key>           <string>$TexturePacker:SmartUpdate:5f186491d3aea289c50ba9b77716547f:abc353d00773c0ca19d20b55fb028270:755b0266068b8a3b8dd250a2d186c02b$</string>  

45.            <key>textureFileName</key>  

46.             <string>SpirteSheet.png</string>  

47.        </dict>  

48.    </dict>  

49. </plist>  

50. </span>  

上述代碼是plist文件，其中代碼①~④描述了一個精靈幀（小的精靈圖片）位置，第②行代碼是精靈幀的名字，通常狀況下它的命名與原始的精靈圖片名相同。第③行代碼描述了精靈幀的位置和大小，{2,1706}是精靈幀的位置，{391,327}是精靈幀的大小。因爲咱們不須要本身編寫plist文件，其它的屬性咱們就再也不介紹了。

 

 

使用精靈表文件最簡單的方式是使用Sprite 的create (const std::string &filename, const Rect &rect)函數，其中建立矩形Rect對象能夠參考座標文件中第③行代碼的{{2,1706},{391,327}}數據。使用create代碼以下：

 

[html] view plaincopy

1. <span style="font-size:14px;">   auto mountain1 = Sprite::create("SpriteSheet.png",Rect(2,391,934, 388));  

2.               mountain1->setAnchorPoint(Point::ZERO);  

3.     mountain1->setPosition(Point(-200,80));  

4.     mountain1->addChild(mountain1,0);</span>  

在建立紋理Texture2D對象，也可使用精靈表文件，代碼以下：

  

[html] view plaincopy

1. <span style="font-size:14px;">  Texture2D* cache = TextureCache::getInstance()->addImage("SpirteSheet.png");  

2.     auto hero1 = Sprite::create();  

3.     hero1->setTexture(cache);  

4.     hero1->setTextureRect(Rect(2,1706,391,327));                                                                                    ①  

5.     hero1->setPosition(Point(800,200));  

6.     this->addChild(hero1,0);</span>  

上述代碼第①行中的setTextureRect函數，使用座標文件中描述的數據。