(译)在cocos2d里面如何使用Texture Packer和像素格式来优化spritesheet(1)

分类栏目:cocos教程

147

前言:这篇文章是我翻译的第一篇关于cocos2d的文章,我在翻译的时候尽量按原文意思来,但难免会加入自己一些理解进去。还有这篇文章所采用的xcode版本是3.2.5,用xcode4.0的朋友可能实现起来有点出入,我会在文章的最后给出解决办法。

文章原来出处:http://www.raywenderlich.com/2361/how-to-create-and-optimize-sprite-sheets-in-cocos2d-with-texture-packer-and-pixel-formats

 

  在cocos2d里面,为了使你的游戏获得最佳性能,你需要把许多小的sprite图片组合到一张大图里面,这张大图就叫做sprite sheet。

(译)在cocos2d里面如何使用Texture Packer和像素格式来优化spritesheet

  如果你使用cocos2d已经有一段时间了的话,你可能已经使用过了一款叫做Zwoptex的工具来帮你生成sprite sheet。Zwoptex是一个非常棒的工具--我在我的很多程序里面使用它,而且确实帮我节省了很多时间。

  然后,这里有一款新的工具,叫做Texture Packer.它类似于Zwoptex,也能创建sprite sheet,但是它还有一些非常方便的、很神奇的特性。

  这篇文章将以一种教程的形式,讲述如何在cocos2d游戏开发使用Texture Packer,同时,你还将学习到如何使用像素格式(pixel formats)、Texture Packer 如何智能地让你的游戏加载速度更快,运行更流畅,而且还能够在游戏界面看起来很不错的前提下使用尽可能少的内存。

  澄清:我在发博客之前就从Texture Packer这个工具的作者手中拿到了license key。我当时并没有保证我会发一篇博文来回报他,但是,在我使用这个工具一段时间之后,它确实为我的应用程序减少了很多需要加载的内存,因此我爱上了这款工具。所以,我想让你们都了解它。

  这篇教程是为那些熟悉cocos2d的人写的。如果你对cocos2d完全陌生的话,你应该从“怎样做一个简单的iphone应用程序”系列和其它一些cocos2d的教程开始。(目前这些链接依然是e文,但随着我翻译进度的前进,这些也会相应的更新。)

开始

  首先,确保你安装了最新版本的cocos2d(在写作这篇文章的时候,版本号是 Cocos2D v0.99.5-rc1,在翻译这篇文章的时候,已经是 cocos2d-iphone-1.0.0-beta.tar.gz了)。获得最新版本非常重要,因为新版本里面增加了对一些新的图片格式的支持,而这恰恰是这篇文章后面要用到的。

一旦你安装完之后,你就可以启动XCode,然后使用cocos2d应用程序模板来新建一个工程并把它命名为TextureFun。

  下一步,你需要一些图片来制作sprite sheets。你可以下载这些我收集来的样例图片,然后解压缩,并把整个解压缩后的目录拖到你的TextureFun工程的一个子文件夹下面,如下图所示:

(译)在cocos2d里面如何使用Texture Packer和像素格式来优化spritesheet

  好,现在你拥有一个工程模板和一些样例图片以,是时候使用TexturePacker来制作spritesheet了!

使用TexturePacker来创建spritesheet

  你需要做的第一件事情就是下载 Texture Packer的免费版本。请注意,你并不需要购买任何东西,对于这篇教程来说你只需要免费版本就足够了。

当你下载完之后双击,然后点击“TexturePacker.mpkg”,接下来就会弹出一个窗口,然后按照提示一步步安装在你的mac上。

  在你完成安装之后,在你的Application文件夹下面找到它并运行。当你看到第一个提示窗口出现的时候,选择“ Use Essentia”(免费版本)继续。

  现在,点击工具栏上的“Add Folder”按钮,然后选择TextureFunArtsprites文件夹。Texture Packer将会加载图片并且智能地把这些图片布局在spritesheet中,如下图所示:

  另一方面,你能够看到所有导入到纹理集(Texture Atlas)中的图片,当你选中某一个的时候会看到有一个边框--另一个非常方便的功能!你也能够把鼠标停留在精灵(sprite)上面,看它是否创建走样(alias)(走样(alias)指那些被裁剪(cropping)之后的图像看起来实际上是一样的)。如下图所示:

  顺便说一下通过点击“Add Folder”按钮来添加图片的一些注意事项。首先,当你像这样通过增加文件夹的方式来增加精灵后,Texture Packer并不是对每一个精灵增加一个索引(reference),而是对整个文件夹增加了一个索引。这意味着,当你以后向这个文件夹中增加精灵之后,下一次你运行Texture Packer的时候,它会重新根据文件夹下面的所有的精灵来创建spritesheet--多么方便啊!

  同时,你也不需要非得把所有的精灵都放在同一个根文件夹下面,你可以按照自己的方式把这些精灵放在不同的子目录下(比如spritesnimals,spritesmonsters),之后当你从cocos2d中引用它们的时候只需指定相对路径即可。

  最后,需要注意的是,你可以包含多个精灵文件夹--这也是一个非常方便的功能,尤其是在你的游戏非常大的时候,你可以为每一个关卡制作一个spritesheet。

  好了,现在让我们来看一下软件左边的一些选项。通过这些选项,你能够配置spritesheet的大小、布局和输出格式。首先,让我们来快速浏览一遍控制大小和布局的选项:

  • Autosize (默认) – 这个选项会为你的spritesheet挑选最小的2的指数倍的大小。这是一个非常方便的特性,因为它可以省去你自己去计算spritesheet大小的时间。
  • Min/max size 让你为你的spritesheet指定一个最大值。如果你想设置特定大小的spritesheet的时候,这也是一个非常方便的特性。(因为对于特定的设备来说,你可不想超过设备能够支持的最大限制,比如2代touch最大支持texture大小为1024*1024)
  • Scale 让你可以保存一个比原始图片尺寸要大一点、或者小一点的spritesheet。比如,如果你想在spritesheet中加载“@2x"的图片(也即为Retina-display设备或者ipad创建的)。但是你同时也想为不支持高清显示的iphone和touch制作spritesheet,这时候只需要设置scale为 1.0,同时勾选autoSD就可以了。也就是说,只需要美工提供高清显示的图片,用这个软件可以自己为你生成高清和普清的图片。
  • Algorithm TexturePacker里面目前唯一支持的算法就是MaxRects,即按精灵尺寸大小排列,但是这个算法效果非常好,因此你不用管它。
  • Border/shape padding 即在spritesheet里面,设置精灵与精灵之间的间隔。如果你在你的游戏当中看到精灵的旁边有一些“杂图”的时候,你就可以增加这个精灵之间的间隔。
  • Extrude 精灵边界的重复像素个数. 这个与间隔是相对应的--如果你在你的精灵的边边上看到一些透明的小点点,你就可以通过把这个值设设置大一点。
  • Trim 通过移除精灵四周的透明区域使之更好地放在spritesheet中去。不要担心,这些透明的区域仅仅是为了使spritesheet里面的精灵紧凑一点。--当你从cocos2d里面去读取这些精灵的时候,这些透明区域仍然在寻里。(因为,有些情况下,你可能需要这些信息来确定精灵的位置)
  • Shape outlines 把这个选项打开,那么就能看到精灵的边边。这在调试的时候非常有用。

  对于spritesheet来说,上面提到的各个选项的默认值,你一个也不需要改变--因为它们本来就已经很好了。然后,在输出部分,你需要改变一些设置。但是在讲到那个之前,让我们先谈一谈cocos2d中的像素格式。

cocos2d和像素格式

  在cocos2d里面,理解像素格式非常重要。因为,像素格式会影响在你的游戏中加载一张图片到底需要多少内存。因为游戏通常要加载大量的图片资源,所以你要尽可能充分利用移动设备上面非常少的可用物理内存。

  默认情况下面,当你在cocos2d里面加载一张图片的时候,对于每一个像素点使用4个byte来表示--1个byte(8位)代表red,另外3个byte分别代表green、blue和alpha透明通道。这个就简称RGBA8888。

  因此,如果你使用默认的像素格式来加载图片的话,你可以通过下面的公式来计算出将要消耗多少内存来加载:

  图像宽度(width)×图像高度(height)×每一个像素的位数(bytes per pixel) = 内存大小

  此时,如果你有一张512×512的图片,那么当你使用默认的像素格式去加载它的话,那么将耗费

  512×512×4=1MB(好多啊!)

  这里,我们以Iphone3G为例。它总共只有128兆内存,但是系统就要占掉一大半,还有其它一些程序也要使用一些内存,实际可用的内存更少。对于单独一张spritesheet来说那确实足够了。可是想像一下你有许许多多的spritesheet,而且游戏里面经常需要大量的spritesheet!

  这里就需要让像素格式来帮忙了。你可以为图片的每个像素点指定更小的字节来保存图片。(比如每个像素点2个字节,即每个像素点16位),这种方式就能够在图片质量和内存消耗之间取得一个很好的平衡点。

  通常,你是在你的游戏看起来还ok的提前下,尽可能少地使用内存。背景图片就非常适用用8位或者16位来存储,而精灵则一般要用16位或者32位。对于更多可选的像素格式和适用的场合,你可以参考Riq(cocos2d的作者)的一篇文章: understanding pixel format guide.(理解像素格式向导)

  顺便说一下,如果你注意看窗口的右下角,你会看到Texture Packer会基于你当前选择的像素格式计算出这张spritesheet所消耗的内存大小,因此你不必手动计算了。:)