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

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

 纹理图集(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文件代码如下:

 

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
 
  1.   
[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
 
  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 plain copy 在CODE上查看代码片 派生到我的代码片
 
  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 plain copy 在CODE上查看代码片 派生到我的代码片
 
  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函数,使用坐标文件中描述的数据。

更多内容请关注最新Cocos图书《Cocos2d-x实战 C++卷》

本书交流讨论网站:http://www.cocoagame.net

更多精彩视频课程请关注智捷课堂Cocos课程: http://v.51work6.com
欢迎加入Cocos2d-x技术讨论群:257760386


《Cocos2d-x实战 C++卷》现已上线,各大商店均已开售:

京东:http://item.jd.com/11584534.html

亚马逊:http://www.amazon.cn/Cocos2d-x%E5%AE%9E%E6%88%98-C-%E5%8D%B7-%E5%85%B3%E4%B8%9C%E5%8D%87/dp/B00PTYWTLU

当当:http://product.dangdang.com/23606265.html

互动出版网:http://product.china-pub.com/3770734

 

《Cocos2d-x实战 C++卷》源码及样章下载地址:

源码下载地址:http://51work6.com/forum.php?mod=viewthread&tid=1155&extra=page%3D1 

样章下载地址:http://51work6.com/forum.php?mod=viewthread&tid=1157&extra=page%3D1

欢迎关注智捷iOS课堂微信公共平台

猜你喜欢

转载自guandongsheng.iteye.com/blog/2068191