u3d菜鸟入门：游戏中的图集

写本文的目的

希望那些像我一样想从事游戏开发，但对这些基础知识了解甚少的人做一些简单讲解。在图文并茂、理论与实践结合的讲解之后，让那些不了解的初学者能够明白这些基础的原理（也就是为啥要这么用）以及实际应用

关于图集

图集，在unity引擎中第一次看到，还是在用NGUI的时候，看到有一个叫做atlas的东东。当时不知道这是何物。网上搜了下，也没能得到太清晰的答案。

百度百科里的解释如下：

1. 图片的集合，如地图集，影集，把图片分门别类装订成册。

2. 图示的集合。如设计图集，按照一定规则编制的规范样本及说明文件的集合。

3. 国家指定的技术科研部门出版的图集，是指导规范各种专业实体，具有鉴定与约束效力的法规性质的技术文件。

乍一看上面的解释，很难对游戏里的图集有一个具体的认识吧？

但是如果接触过游戏开发，或者在网上搜过一些游戏的素材包，应该可以看得到一些类似下图的图片



这就是图集，Atlas！

所谓图集，就是图片的集合。上面的图集中，有很多个小的图片单元。它们大小不一，像那把刀的图片，相对来说就大一些；而那些拳头的图片，甚至那些锁链的图片，就小很多。

这里找到一个关于介绍图集的原理的视频，可惜是英文版的，自己没能力将其翻译成中文的，也仅仅是能够听个大致意思。如果英文比较好的同学可以看看这里，相信你对图集会有更全面的认识！这里是视频地址：

图集原理视频

上面这个视频如果没看的同学，我这里也只能简单的给大家讲下视频的大致意思，毕竟自己英文水平还不够高，好尴尬，哈哈。。

个人对视频内容的理解是：

例如上面的图集中，里面的每个小图片都是一个图片单元。本来图片单元是各自在不同的图片，甚至是各自单独占据一张图片。那么对于计算机来说，每次为了读取图片中的信息，会将整张图片的信息都独到内存中来。那么，空白的地方虽然没有图片信息，但是也会有空数据来占据内存。所以假如上面的图集是分别存放在不同的图片中，那么计算机为了读取到这些图片，就不得不花费很多的时间和内存来读取和存放这些图片。但是我们可以清楚的看出，每张图片都只占据了那么大的空间，即使是在同一张图集中，仍然也只有那么大。而游戏中要用到的图片何止这么多，做过游戏开发或者研究过游戏素材包的同学应该很清楚，图片那是相当的多。所以为了在游戏运行时减少计算机的消耗，开发人员就发明了图集这样一种神奇的东东！

而图集展示给我们的也很清楚，有这么多图片，但中间仍然有空隙。这个有两部分原因：

1.每个图片单元虽然很小，并且都放在了同一张图集中，但仔细观察会发现，它们和周边的空白部分都可以组成一些有规则的图形（一般来说为了计算机读取方便，都是正方形或者矩形）。例如我们仍然可以用左下角的两个小图片单元为例，仔细观察，应该可以看出它们之间有那么一点点（很小，甚至可能是一像素）的间隙，由于无法完美展现出两者之间的距离，只能用QQ截图的办法来做个示意图，希望大家能理解我的意思：

下图中，图1和图2之间的距离大概也就是这个红线框的宽度吧（目测1像素）。



有同学可能会问了，那计算机是如何读取这些图片单元的呢？也就是这些小图片都在这一张图集中，如何来判断读取的是哪张图片呢？

这个问题问的好！之前做开发的时候，也遇到过这种问题。上图中图1的大小是一个矩形，而矩形可以通过三个数据来保存：起始点，宽度，高度。起始点呢，可以将图片看成是一个2D坐标系，实际上游戏开发过程中也就是将其看作一个2D坐标系，坐标系中是由很多个像素块组成的。因为是像素块是最小单位了，所以该坐标系中只会有整数，木有小数（浮点数）。所以一般来说图1的起始点就是红线框的左上角（也有可能是右下角，根据不同的图像处理引擎或者游戏引擎而定）。宽度和高度就不用再解释了。

这样我们就能告诉计算机，某张图片在图集中的具体位置了。然后我们可以将该图片的信息存放到一个数据结构（比如数组、链表等），或者存放到字典中等，在取用的时候，只需要根据索引或者对应的信息来取想要的图片即可。

2.虽然每张图片单元有自己的大小，但是有一些空白明显是没有任何图片的。这些空白可能的原因：

1）对于每个图集来说，原则上存放的都是相关的图片，比如这个图集中存放的都是某一个怪物的UI或者是某一个界面的UI，而这个界面中只用到了这么多图片，所以一张图集中就会有这些空白。

2）对于相关的图片，可能其尺寸不一样，有的大有的小，有的太大不适合放在一个图集里，只能单独存放为一个图集（比如一些游戏的loading界面），而小的图片则存放同一个图集中。该图集中剩余的位置不够存放其他大图片，因此图集中一般来说都会有空白。

UGUI中图集的应用

说到图集，理论的上面讲了一大堆，也不知道大家明白了没。自己觉着说的还算凑合，有不对的地方，如果大神看到了还请多喷几句。

下面来说下应用吧。

首先来说说UGUI中如何给控件加图片。

1.首先在U3D中创建一个新场景

2.然后随便从网上找了张图片，任何格式的都可以（理论上来说，U3D支持 PSD, TIFF, JPG, TGA, PNG, GIF, BMP, IFF, PICT这些格式的图片）。

3.将图片导入u3d中，然后在空场景中添加一个image控件

4.然后将图片拖到image控件上

这时我们发现，图片无法拖上去！这是为何？在往3D物体中拖图片的方法，2D中竟然行不通了！

无奈，在网上搜了下，发现是图片的类型不对。这里我们需要在U3D中修改下图片的类型：

5.在U3D中选中图片，在右侧的inspector界面中可以看到图片的Texture Type，默认其类型为Texture。这里我们将其设为Sprite(2D and UI)，然后在下方的Max Size选择合适的大小。然后点击右下角的apply按钮应用设置使图片变成想要的类型。接下来我们就可以把图片拖给2D控件了。

这里我们要讨论的是UGUI的图集使用。所谓图集，就是图片的集合，所以这里就得找两张图片。导入U3D，然后将其设置为Sprite(2D and UI)类型的图片格式，选择之后，可以看到inspector界面里有Packing Tag这一项，该项的意思是图片打包图集的图集顺序。比如你希望第一张图片打包到第一个图集里，第二张图片打包到第二个图集里。那两张图片的tag分别设置为1、2即可。这里为了讨论UGUI的图集使用，将其均设置为1。这里设置完，然后我们需要去系统设置里修改一个UGUI打包图集的选项：

这里我用的是5.0.1f，点击Edit->Project Setting->Editor，然后在右侧可以看到Editor的选项，最后一项Sprite Packer，选择Always Enabled即可。之后，在U3D中新建两个图片控件，分别将他们的Source Image设置为前面说的两张图片。设置好后，点击Windows->Sprite Packer，打开图集打包界面，点击pack按钮，就将图集打包好了，在Sprite Packer界面中可以看到两张图片被打包到同一个图集里了。

这里也只是简单介绍了下UGUI图集的使用。更多详细信息，大家可以参考U3D官网的资料，也可以看这里，一个很权威的大神写的帖子，很详细：

UGUI研究院之全面理解图集与使用

第一次发技术性帖子，感觉写了好多东西，但仔细看来，也没太多深入的东东。而且后面写的东西有点太简单了，还犯懒直接把雨松大神的文章传送门给出来。。一方面感觉自己研究的还少，另一方面，雨松大神写的确实很到位，大家看这里应该会有不少收获。好吧，先到这里了。

PS：在Unity5.0之后，stat 里显示的draw call被修改为SetPass calls，其实都是一回事。