725
精靈的優化-使用紋理圖集
遊戲是一種很耗費資源的應用，特別是在移動設備中的遊戲，性能優化是非常重要的
紋理圖集（Texture Atlas）也稱為精靈表（Sprite Sheet），它是把許多小的精靈圖片組合到一張大圖裏麵。使用紋理圖集（或精靈表）有如下主要優點：
減少文件讀取次數，讀取一張圖片比讀取一堆小文件要快。
減少OpenGL ES繪製調用並且加速渲染。
減少內存消耗。OpenGL ES 1.1僅僅能夠使用2的n次冪大小的圖片（即寬度或者高度是2、4、8、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文件代碼如下：
<?xml version="1.0"encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//AppleComputer//DTD PLIST 1.0//EN""https://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>frames<"/key">
<dict> ①
<key>hero1.png</key> ②
<dict>
<key>frame</key>
<string>{{2,1706},{391,327}}</string> ③
<key>offset</key>
<string>{6,0}</string>
<key>rotated</key>
<false/>
<key>sourceColorRect</key>
<string>{{17,0},{391,327}}</string>
<key>sourceSize</key>
<string>{413,327}</string> ④
</dict>
……
<key>mountain1.png</key>
<dict>
<key>frame</key>
<string>{{2,391},{934,388}}</string>
<key>offset</key>
<string>{0,-8}</string>
<key>rotated</key>
<false/>
<key>sourceColorRect</key>
<string>{{0,16},{934,388}}</string>
<key>sourceSize</key>
<string>{934,404}</string>
</dict>
… …
</dict>
<key>metadata</key>
<dict>
<key>format</key>
<integer>2</integer>
<key>realTextureFileName</key>
<string>SpirteSheet.png</string>
<key>size</key>
<string>{1024,2048}</string>
<key>smartupdate</key> <string>$TexturePacker:SmartUpdate:5f186491d3aea289c50ba9b77716547f:abc353d00773c0ca19d20b55fb028270:755b0266068b8a3b8dd250a2d186c02b$</string>
<key>textureFileName</key>
<string>SpirteSheet.png</string>
</dict>
</dict>
</plist>
上述代碼是plist文件，其中代碼①~④描述了一個精靈幀（小的精靈圖片）位置，第②行代碼是精靈幀的名字，一般情況下它的命名與原始的精靈圖片名相同。第③行代碼描述了精靈幀的位置和大小，{2,1706}是精靈幀的位置，{391,327}是精靈幀的大小。由於我們不需要自己編寫plist文件，其它的屬性我們就不再介紹了。
使用精靈表文件最簡單的方式是使用Sprite 的create (const std::string &filename, const Rect &rect)函數，其中創建矩形Rect對象可以參考坐標文件中第③行代碼的{{2,1706},{391,327}}數據。使用create代碼如下：
auto mountain1 = Sprite::create("SpirteSheet.png",Rect(2,391,934, 388));
mountain1->setAnchorPoint(Point::ZERO);
mountain1->setPosition(Point(-200,80));
mountain1->addChild(mountain1,0);
在創建紋理Texture2D對象，也可以使用精靈表文件，代碼如下：
Texture2D* cache = TextureCache::getInstance()->addImage("SpirteSheet.png");
auto hero1 = Sprite::create();
hero1->setTexture(cache);
hero1->setTextureRect(Rect(2,1706,391,327)); ①
hero1->setPosition(Point(800,200));
this->addChild(hero1,0);
上述代碼第①行中的setTextureRect函數，使用坐標文件中描述的數據。
最後更新：2017-04-03 12:56:43