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

  1. 云栖社区>
  2. 博客列表>
  3. 正文

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

关东升 2014-05-19 12:20:00 浏览316 评论0

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

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

 

纹理图集(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""http://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函数,使用坐标文件中描述的数据。

 


更多内容请关注Cocos2d-x系列图书《Cocos2d-x实战(卷Ⅰ):C++开发》
本书交流讨论网站:http://www.cocoagame.net
欢迎加入cocos2d-x技术讨论群:257760386、327403678


用云栖社区APP,舒服~

【云栖快讯】云栖社区技术交流群汇总,阿里巴巴技术专家及云栖社区专家等你加入互动,老铁,了解一下?  详情请点击

网友评论

关东升
文章404篇 | 关注24
关注
阿里云数据库内置的智能专家,提供云数据库问题诊断、性能优化、SQL分析、资源分析、优化报告等... 查看详情
Node.js 性能平台(Node.js Performance Platform)是面向中... 查看详情
服务底层使用经国家密码管理局检测认证的硬件密码机,通过虚拟化技术,帮助用户满足数据安全方面的... 查看详情
为您提供简单高效、处理能力可弹性伸缩的计算服务,帮助您快速构建更稳定、安全的应用,提升运维效... 查看详情
建站4折

建站4折