苹果带来的 SpriteKit 不仅仅只是增加了制作2D游戏的 API,还在 Xcode5 中集成了包括 Texture Atlas 和粒子系统等等专为 SpriteKit 服务的插件。本文将介绍如何在 SpriteKit 中使用 Texture Atlas和需要注意的一些问题,这个主题将分为两部分来介绍,本文是第一部分。
Texture Atlas
Texture Atlas,又称为 SpriteSheet,是游戏开发里非常常用的一种图片技术。简单的说,就是将多个图片整合到一张大图上,在使用图片时通过从大图上截取需要的部分来绘制正确的图形的技术。作为游戏开发者,如果你还不知道 Texture Atlas 是什么,或者为什么要使用 Texture Atlas,请观看下面的视频。用一句话来说,就是为了加快绘制速度和节约内存使用。
制作 Texture Atlas
在了解 Texture Atlas 之后,我们来看看如何制作生成 Texture Atlas 。首先下载几张图片用于制作 Texture Atlas 。目前生成 Texture Atlas 有两种方式,一种是用 Xcode 生成,另一种是用软件 TexturePacker,下面我会分别介绍两种方式。
Xcode
首先来说说 Xcode ,这里指的是 Xcode5 , Xcode5 之前的版本并不支持 SpriteKit 。使用 Xcode 来生成 Texture Atlas 简单的惊人,你只用把图片准备好,创建一个文件夹,加到工程,就这么简单!当然,创建的文件夹有一点不同,需要以.atlas
结尾。
我们举个例子来边做边说,首先用 SpriteKit 模板创建一个工程,然后将 ViewController.m
的 viewDidLoad
修改成 viewWillLayoutSubviews
,至于为什么请查看SpriteKit中的陷阱一文。删掉自带的 Spaceship.png
图片和 MyScene.m
里的相关代码,并将下载的图片解压到工程根目录下,如图所示:
解压出来的图片已经包括了普通尺寸和 Retina 尺寸的图片,所以我们只需要将文件夹的名称改为需要的形式,比如 texture.atlas
。
然后将该文件夹加入到工程里,如图所示:
加到工程之后我们发现,跟一般文件夹不同的是, texture.atlas
的文件夹颜色不是黄色而是蓝色的,这是不是说明这个文件夹有什么不同呢?确实如此,.atlas
文件夹会自动设置成引用的方式,所以在文件夹内添加或删除文件 Xcode 会自动识别,不需要作什么修改。比如我们删除 texture.atlas
里的 5.png
和 5@2x.png
,Xcode的文件目录里会自动修改过来,如下图。
这一点在游戏开发中是非常实用的,因为图片总是在不停的修改和变动,这样你就不用每次去修改或重新生成 Texture Atlas 了。
最后我们来看看 Xcode5 关于 Texture Atlas 的设置,打开项目target的 Build Settings ,搜索框内输入 sprite 就会显示如图的两项,第一项是 Texture Atlas 生成的开关,第二项是 生成 Texture Atlas 的图片格式,默认情况下 Xcode5 已经将 Texture Atlas 生成打开(设置成 YES ),修改图片格式可以缩小内存的使用,但同时会降低图片质量。
我们需要手动做的就全部说完了。那 Xcode 是如何生成 Texture Atlas 的呢,生成的文件在哪里呢?
在编译工程时, Xcode 会将所有 .atlas
文件夹里的图片编译并生成 Texture Atlas 大图和一个读取信息的 plist
数据文件然后放在一个新的 .atlasc
的文件夹里放在程序 bundle 里。我们用模拟器来看看生成的 Texture Atlas 长什么样,现在编译工程,然后在 Finder 打开这个路径 /Users/<username>/Library/Application\ Support/iPhone\ Simulator/7.0/Applications
将 <username>
换成你自己的用户名,文件夹里应该就有你刚刚编译的工程,找到并打开,然后找到程序 bundle 并右键选择 Show Package Contents
,如图所示:
开打之后你就会发现 .atlasc
文件夹了,快看看里面的 Texture Atlas 吧。
生成的 Texture Atlas 将所有的图片贴在了一起组成一张大图并生成了 plist
数据文件,数据文件存储的就是所有图片的位置信息用于截取每一张需要的图片。而且 Xcode 自动将图片分为了普通尺寸和 Retina 尺寸,非常智能,你只需要为 Retina 图片加上 @2x
而已。我们还发现生成的 Texture Atlas 文件名加上了 1
,这是不是意味着会有 2 3 4等等呢?答案是肯定的, 下面列出了 Xcode 生成 Texture Atlas 的几个规则:
- 每个 Texture Atlas 的最大尺寸是 2000 x 2000 像素
- 如果在一个
.atlas
文件夹下放了过多的图片使得生成的 Texture Atlas 超过最大尺寸时 Xcode 会自动生成多张图片,于是就会有上面说到的 2 3 4等等后缀名的文件了 - 不同分辨率的图片会分别生成独立的 Texture Atlas,如 Retina 图片的
texture.1@2x.png
更神奇的是,你甚至可以将编译生成的 .atlasc
文件夹直接加到工程来使用,而不使用原图片。这也正是下面要讲的 TexturePacker 所使用的方法。
TexturePacker
TexturePacker 可以说是2D手机游戏开发最实用的软件之一了,可以免费试用,也可以通过告诉作者你是开发者或博客主来免费获得 lisence ,如果还没有使用过 TexturePacker 的话我建议你去下载并试用一下,网站上也有很丰富的教程指导,详细的使用方法就不在这里赘述了。
TexturePacker 最新的版本已经开始支持 SpriteKit 了,虽然现在只是初级阶段,但网站作者正在努力的开发当中,相信以后 TexturePacker 肯定是取代 Xcode 自动生成的不二选择,详情可以查看这个页面Texture atlases for SpriteKit with TexturePacker。
当前版本的 SpriteKit 教程在网站上已经发布了 SpriteKit Animations and TextureAtlasses。由于现在 TexturePacker 的功能暂时没有优于 Xcode 的地方,所以我在这里只是简单的提一下使用方法,等到加强版发布之后再另写文章介绍。
下图是 TexturePacker 的基本界面。
首先将素材图片拖入到右侧界面的 Sprites 中。
然后在 Data Format 中选择 SpriteKit ,左侧的 Atlas bundle 选择存放到项目里的文件夹目录,注意 TexturePacker 导出的直接就是生成好的 .atlasc
文件夹。最后点击上面菜单的 Publish 按钮导出即可。
导出的文件包括 .atlasc
文件夹和一个包含一些实用定义的头文件,将所有文件都拖入到工程里。
这里需要选择第二项添加对文件夹的引用,因为如果之后导出新的 Texture Atlas 文件放到该文件夹下就不用重新加到工程,原理类似 Xcode 的自动识别。
最后使用代码和 Xcode 的方式没有任何区别,唯一的不同就是可以使用导出的头文件里的一些预定义变量。
结语
本文介绍了关于 Texture Atlas 的基本知识,告诉了大家如何使用 Xcode 和 TexturePacker 生成导出 Texture Atlas 文件。本文的第二部分将介绍如何使用 SpriteKit 的新 API 来使用 Texture Atlas 和使用 Texture Atlas 需要注意的问题。