cocos2d-objc 3.0+ 游戏开发学习手册(五): 纹理打包与CCSpriteFrameCache

纹理与打包
缘由

在游戏开发中,通常对于性能的处理是比应用型的App要敏感一些.游戏中的操作往往比较频繁而且多数都需要立刻响应,若是性能问题导致用户体验卡顿,算是比较糟糕的情况了,对于大型游戏开发公司来说,会有专门的团队(也可能是个人)处理性能优化,其重要性不言而喻.在cocos2d的项目开发中,性能调节的入手点往往都是最先由纹理开始的.下面我们就来讲一下纹理的基础知识.

什么是纹理(Texture)?

纹理,我们可以认为是cocos2d中需要在屏幕上显示的所有节点(CCNode)的样子,可以把它理解为外貌,有时候也常常被称为皮肤,也就是显示在我们眼前的形状,颜色的统称.
纹理(Texture)也是图像绘制里的专用语,就是指将要显示的目标绘制成何种样子.换句话说就是图像绘制系统会根据纹理的数据来在屏幕上绘制目标元素.在cocos2d中,图像绘制系统就是openGL,纹理(Texture)通常是我们项目中的图片资源,因此我们也会在开发中经常说纹理图片.
例如我们在项目中会这样显示一个图片在屏幕上:

CCSprite *userHeadSprite = [CCSprite spriteWithImageNamed:@"xxxx.png"];
[self addChild:userHeadSprite];

实际上图片(xxxx.png)是先被加载到纹理缓存中,在显示的时候由openGL图片纹理绘制到屏幕上,这样我们就可以看到这个图片了.

纹理的渲染

cocos2d中的图形处理是使用的openGL技术实现的,因此它对需要绘制的图片有一些特殊的要求: 图片的长和宽必须是2的整数幂,基于这样的一个规定,我们如果需要显示一个17x17的图片时,实际上需要一个32x32的绘制纹理才可以装得下这个图片,造成内存的额外开销和浪费存储空间.也正是由于这个纹理渲染的原因,我们才需要对纹理进行一些适当的处理,以合理的减少不必要的浪费.
openGL绘制纹理过程十分复杂,去除其中的细节(说的好像自己知道似的^_^)可以笼统的概括为三个步骤:

    1. 绘制纹理的准备(预处理) : 开启绘图缓冲
  • 2.纹理绘制: 绘制缓冲的内容
    1. 绘制纹理的结束(收尾): 关闭绘制缓冲

项目开发中肯定会有很多的图片资源需要展示到屏幕上,如果每个图片资源都执行上面的绘制步骤,除了耗费很多不必要的绘制资源之外,还进行了很多重复性的操作.频繁的开启和关闭绘制缓冲也是导致性能下降的一个重要因素,为了尽量避免这种情况,我们需要将一个一个单独的图片资源,合并为一张图片,然后使用合并后的图片进行一次纹理渲染就可以了.这样既减少了重复的绘制操作,也合理的利用了内存空间,那么接下来的问题是:如何将许多原本单独的图片组合为一个通用的图片资源呢?
答案是: 打包

如何打包?
纹理打包软件

游戏开发中会用到很多代码之外的工具,纹理打包有很多工具软件,笔者使用的TexturePacker,关于这个软件简单使用可以看图例,详尽的使用方法大家可以自行百度

TexturePacker 使用界面

在TexturePacker中设置好参数之后,点击Publish sprite sheet就可以完成打包并导出
Publish

最后会在你指定的文件夹路径下会生成两个文件:一个plist文件,一个png文件

使用打包后的纹理

图片资源经过纹理打包之后,我们就可以把它们导入到项目中并准备使用.如果你的项目是cocos2d的新版本(笔者的版本为cocos2d-3.5),那么恭喜你,加载纹理打包后的文件(plist文件)只需要一行代码即可,其他地方都不要修改.

 [[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"TexturePacker导出的plist文件.plist"];

如果你的项目使用的cocos2d是比较早的版本(3.0之前),除了上面的代码之外,你需要这样使用加载后的纹理资源:

// 图片名称可以从纹理打包的plist文件里查看
CCSpriteFrame *spriteFrame = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"你需要的图片名称.png"];
CCSprite *sprite = [CCSprite spriteWithSpriteFrame:spriteFrame];

使用打包后的纹理资源(通常都是一张图片),cocos2d会将纹理资源一次渲染完成,提高了图片资源的加载和使用效率.

被遗弃的CCSpriteBatchNode

还记得前面提到的纹理渲染的三个步骤么(准备,绘制,收尾)?,在cocos2d-3.1 之前, 每个CCSprite在被绘制(draw)到屏幕上时,都会执行这三个步骤!
如果你的项目属于cocos2d- 2.x版本的,推荐你使用CCSpriteBatchNode类来优化渲染. CCSpriteBatchNode可以将多个CCSprite添加到渲染队列中去,然后只需要提交一次渲染操作就可以将需要绘制的CCSprite一次全部绘制完成.

    CCSpriteBatchNode *batchNode = [CCSpriteBatchNode node];
    
    CCSprite *s1 = [CCSprite spriteWithImageNamed:@"s1.png"];
    // ..... 设置s1的其他代码...
    CCSprite *s2 = [CCSprite spriteWithImageNamed:@"s2.png"];
    // ..... 设置s2的其他代码...
    CCSprite *s3 = [CCSprite spriteWithImageNamed:@"s3.png"];
    // ..... 设置s3的其他代码...
    [batchNode addChild:s1];
    [batchNode addChild:s2];
    [batchNode addChild:s3];
    
    [self addChild:batchNode];

cocos2d- 3.1+之后,CCSpriteBatchNode已被标记为废弃,这是因为CCNode默认会帮助我们完成一次性将多个CCSprite(精灵)的渲染工作,不再需要专门使用CCSpriteBatchNode来手动实现了.
尽管在最新的cocos2d版本中依然保留了CCSpriteBatchNode,但你基本上都不会怎么用到它了.

结束语

cocos2d 3.0+新版本为我们提供很多便利性的功能,也正是由于这样会导致和之前的旧版本有一些比较明显的差异,希望在使用中的朋友们能够留意这里面的一些变化,并通过对比来理解其中的原因,对于项目开发也是十分有益处的.

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,992评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,212评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,535评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,197评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,310评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,383评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,409评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,191评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,621评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,910评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,084评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,763评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,403评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,083评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,318评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,946评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,967评论 2 351

推荐阅读更多精彩内容