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

纹理与打包

缘由

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

什么是纹理(Texture)?

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

代码语言：javascript复制

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文件)只需要一行代码即可,其他地方都不要修改.

代码语言：javascript复制

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

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

代码语言：javascript复制

// 图片名称可以从纹理打包的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一次全部绘制完成.

代码语言：javascript复制

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

游戏 opengl

0 人点赞