如何设置Atlas的Texture

苹果带来的 SpriteKit 不仅仅只是增加了制作2D游戏的 API，还在 Xcode5 中集成了包括 Texture Atlas 和粒子系统等等专为 SpriteKit 服务的插件。本文将介绍如何在 SpriteKit 中使用 Texture Atlas和需要注意的一些问题，这个主题将分为两部分来介绍，本文是第一部分。

Texture Atlas

Texture Atlas，又称为 SpriteSheet，是游戏开发里非常常用的一种图片技术。简单的说，就是将多个图片整合到一张大图上，在使用图片时通过从大图上截取需要的部分来绘制正确的图形的技术。作为游戏开发者，如果你还不知道 TextureAtlas 是什么，或者为什么要使用 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的文件目录里会自动修改过来，如下图。

这一点在游戏开发中是非常实用的，因为图片总是在不停的修改和变动，这样你就不用每次去修改或重新生成 TextureAtlas 了。

最后我们来看看 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 所使用的方法。

1. 使用 texture package 将 零碎的图合成一张. 下面以将数字整合成一张为例.

首先将零碎的图拖入 texture package,也可以使用打开文件夹(使用打开文件夹的话 , 就会加载且只加载文件夹里所有图片塌手念,)

然后可以看到预览界面看到 已经整合成一张图的效果预览.

最后是参数设置.

输出参数:

data format , 我们是给unity3d 使用,所以选择 u3d

datafile ,选择 输出文件存储位置.

texture fomat 图片格式 使用png

image fomat 图像方式 rgb8888

Dithering 一个优化方式.

texture fi le 数据文件存储位置. 这个文件 简单的记录 小碎图片的一些 位置尺寸信息.

几何参薯老数:

auto size 自动调节图集大小 这个不用选择

注意最大宽度和最大高度,就是 图集的宽高, 确保长宽相等,使图片成正方形.

allow free sizes 不允许自动缩放图片(这里指的是碎图)

scale 缩放比例 1.0 (碎图 不进行缩放,避免因缩放而模糊)

布局参数:

algorithm 算法 选择 最大矩形.

border padding : 图片边界填充选择0, 碎图 边缘到图集边缘 的填充像素团困数.

shape padding : 碎图中间填充 的像素数, 一样选择0.

这两个填充 都选择 0 ,主要是为了 我们方便计算,每一个碎图的位置. 他们的位置要在以后 修改 font文件时候使用.

inner padding 和 extrude 目前还不知做什么用, 先填成0.

reduce border artifacts 不选择,应该是优化一些列的东西.

allow rotateion 不选择,不需要他自动旋转.

trim crop 裁剪的意思 , 不需要选择 .

填好 参数之后就可以点击 工具栏里面的 publish ,生成 贴图了.

可以在Phaser编辑器中打开和编辑.ATLAS 文件。编辑完.ATLAS 文件后，可以生成纹理.ATLAS 纹理.ATLAS 包括带袜雀袭告兄有人物纹理的PNG图像和包含每个部分在PNG文件中的位置的.JSON 文件。JSON文件被游戏引用，以对游戏中的每个角色或对象应用正确的纹理。岁拦

---