精灵的优化-使用纹理图集

时间 2019-11-07

标签精灵优化使用纹理图集繁體版

原文原文链接

游戏是一种很耗费资源的应用，特别是在移动设备中的游戏，性能优化是很是重要的

纹理图集（Texture Atlas）也称为精灵表（Sprite Sheet），它是把许多小的精灵图片组合到一张大图里面。使用纹理图集（或精灵表）有以下主要优势：

减小文件读取次数，读取一张图片比读取一堆小文件要快。html

减小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的几回幂的内存块了，可是减小读取次数和绘制的优点依然存在。app

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

咱们一般可使用纹理图集制做工具Zwoptex 和TexturePacker帮助咱们设计和生成纹理图集文件以下图所示，以及纹理图集坐标文件（plist）组成。工具

plist是属性列表文件，它是一种XML文件，SpirteSheet.plist文件代码以下：性能

[html] view plain copy 优化

[html] view plain copy this

<?xml version="1.0"encoding="UTF-8"?> spa
<!DOCTYPE plist PUBLIC "-//AppleComputer//DTD PLIST 1.0//EN""http://www.apple.com/DTDs/PropertyList-1.0.dtd"> .net
<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代码以下：

[html] view plain copy

auto mountain1 = Sprite::create("SpriteSheet.png",Rect(2,391,934, 388));
mountain1->setAnchorPoint(Point::ZERO);
mountain1->setPosition(Point(-200,80));
mountain1->addChild(mountain1,0);

在建立纹理Texture2D对象，也可使用精灵表文件，代码以下：

[html] view plain copy

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函数，使用坐标文件中描述的数据。