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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

silverlight3中的"伪"3D

silverlight3中的3d效果,实际上是通过2d+算法模拟出来的"伪3D"(个人估计可能是考虑跨平台和显卡硬件支持通用性所以最终采用了这种设计) ? 上面...

21180
来自专栏人工智能头条

一边吃瓜看球,一边完成AI应用实践——手写体识别入门

23420
来自专栏技术小黑屋

两分钟理解Android中SP与DP的区别

因此通常情况下,我们还是建议使用sp作为字体的单位,除非一些特殊的情况,不想跟随系统字体变化的,可以使用dp.

15120
来自专栏IT大咖说

百度脑图解析:如何进行web复杂应用的渐进式开发

23020
来自专栏数据的力量

制作精彩的傻瓜版Excel气泡图

78880
来自专栏郭诗雅的专栏

Three.js camera初探——转场动画实现

three.js是用javascript写的基于webGL的第三方3D库,通过它可以在网页中进行3D建模,结合上TweenMax.js动画库,在网页中实现3D动...

4.4K30
来自专栏张戈的专栏

图片压缩瘦身好工具:Image Optimizer 绿色版 V5.10 下载

此次推荐的实用小软件是一款图片减肥工具,因为此时博主正在给表哥的公司做 CMS 网站,他发给我的产品图片都是都是 PSD 格式的,大小均为 45M~70MB,如...

44850
来自专栏学习圈

移动端通用优化方案

手机屏幕帧率一般为60 FPS,也就是说一帧的渲染时间为16.7ms,所以如果页面渲染时间超过16.7ms 容易出现卡顿现象。提高页面渲染效率可以考虑如下方法:

260110
来自专栏ionic3+

【技巧】ionic3的手势Gestures

手势Gestures,ionic官网上的文档描述非常简单,就下面一段就没了,估计很多人看完直接就懵了:只有6个事件吗?

12430
来自专栏数据小魔方

复合饼图

今天要给大家分享的复合饼图的制作技巧! ▽ 其实这种复合饼图在数据表达与展示上与传统饼图相差无几,只是形式比较新颖,能够对局部数据突出展示,所以视觉传达效率比较...

35770

扫码关注云+社区

领取腾讯云代金券