3.2 制作精灵（UISprite）
3.2.1 怎样判断是否应该使用精灵
在一套UI中，精灵是一种非常常见的元件。当我们制作UI时，如果需要显示一张图片，需要先判断这个图片是否应该制作到图集里去，然后用精灵的方式去使用它，一般来说，可以遵循以下规律。
（1）首先说明一点，精灵是一个很基础的UI元件，经常不会独立使用，很多其他控件都会用到精灵，比如一个进度条，需要用到一个表示空槽的精灵，和一个上面走进度的条子精灵。所以，精灵有的时候并不是独立使用的。
（2）对于一些展示型的图片，不会变化，只是起一个展示作用，例如，一个界面上的一个小花纹装饰，如果它不大，它一般都是以精灵的方式去制作。
（3）如果要显示一个图片，它形状不规则，长宽不是2的N次方，那么一定要使用精灵。因为Unity对非2的N次方的图片处理要慢很多。
（4）如果这个UI元件经常性地出现，那么最好使用精灵，因为，这样它就可以和图集一起被载入内存，并不用新增一个DrawCall去渲染它。
3.2.2 创建精灵
1．第一种创建方式
首先，我们创建一个 3DUI（2DUI 也行，这个没有任何影响），然后选中 UIRoot，单击Unity顶部菜单中的NGUI菜单，选择Creat，然后选择Sprite，如图3.1所示。这样就能在UIRoot下面自动创建出一个带Sprite组件的物体，这就算创建成功了。
▲图3.1
特别说明一下，NGUI创建物体时会在你选中的那个UI物体（可视为一个节点）下进行创建，如果你没有选中任何的UI节点，它会默认在UIRoot下创建。创建出的UI控件的本地坐标都为0（相当于Reset了一下，和父节点的位置保持一样），所以，使用3DUI的时候要注意，不要在UIRoot所附带的Camera下面创建UI元件，否则会导致UI和相机在一个位置，导致相机看不到。
2．第二种创建方式
使用旧版本的创建方式，在 Unity 顶部菜单中选择 NGUI 菜单，选择 Open ，选择WidgetWizard(Legacy)，如图3.2所示。
▲图3.2
打开后，会弹出如图 3.3 所示的界面，其中选择想要创建的精灵所在的 Atlas，然后在Template中选择Sprite，在Sprite栏单击会弹出你所设置的图集中的所有精灵，从中选择你要创建的精灵，Pivot是精灵的锚点（中心点的位置，默认在图片中心点）。AddTo是选择你要在哪一个 UI 节点下进行创建（可以通过拖动的方式将 UI 节点物体拖到这里来），这个AddTo的默认值是你在打开这个菜单之前所选中的UI节点物体。然后单击AddTo按钮，即可完成创建。
▲图3.3
3．第三种创建方式（不推荐）
这种方式是不用NGUI的菜单来创建，通过Unity的空物体，然后为其附加相应组件来自制UI控件。
首先在Unity顶部菜单中选择GameObject，然后选择CreatEmpty，这样就在场景中创建了一个空物体，然后将它的名字改为 Sprite（这个物体的名字可自由定义），再将这个空物体拖动到UIRoot下，使它成为 UIRoot下的一个子物体，将这个空物体的transform组件Reset一下，这样这个物体就和UIRoot根节点保持一样的位置了。然后将这个空物体的Layer改为和UIRoot的Layer一样，否则UI摄像机将无法渲染它。在这个空物体的Inspector面板中，单击Add Component按钮，选择NGUI，选择UI，再选择NGUI Sprite，就为这个空物体附上了Sprite组件，如图3.4所示。
▲图3.4
我们在这个Sprite组件中单击第一行的Atlas按钮，选择要创建的精灵所在的图集，然后单击第二行的Sprite按钮，会弹出这个图集所有的精灵预览界面，从中选择所要的精灵。到此为止，精灵就自制完成了。
关于创建精灵的方式我们就介绍这3种，它的核心就是要为一个物体附加一个Sprite的组件。在制作过程中需要注意创建 Sprite 的节点，也就是它应该在什么物体下创建，这个涉及UI结构的设计，我们在后面会详细讲解。
3.2.3 Sprite组件的设置
我们参照图3.4所示的组件面板进行讲解。在Sprite组件面板中，可以设置如下的一些参数。
（1）Atlas。单击Atlas按钮将会弹出图集选择界面，如图3.5所示，可以选择要使用哪一个图集（如果弹出的图集选择界面没有我们要的图集，记得单击该面板中的ShowAll按钮）。
▲图3.5
（2）Sprite。单击 Sprite 按钮，将会弹出该图集所拥有的精灵的预览界面，我们只需要在其中找到需要的精灵，然后双击，就完成了设置。
（3）Type和Flip。在这里Type有5个选项：Simple（普通类型）、Sliced（切片类型）、Tiled （平铺类型）、Filled（填满类型）、Advanced（高级类型）。Flip选项是翻转选项，相应的Type下有不同的设置。
●Simple
这种类型下，图片会正常显示出来，图片是什么样它就是什么样显示。当我们将一个精灵的尺寸拉大时，它会以原图拉伸（可能会导致原图发生形变）的方式来完成，如图3.6所示，我们将精灵的大小通过拉动四周的蓝色锚点拉大，精灵就被拉伸了。
在这种类型下，Flip有几个选项，分别是：Nothing（不翻转）、Horizontally（水平翻转）、Vertically（竖直翻转）、Both（既水平又竖直翻转）。
这里的翻转和Photoshop中的图片翻转是一个意思，如图3.7所示。
●Sliced
切片风格，这种类型知识量比较大，和九宫格的制作联系比较紧密，所以在后文讲解九宫格的制作时，会详细讲解。
图3.6
▲图3.7
●Tiled
平铺类型，选择了之后，精灵尺寸会保持原来的尺寸不变，然后将精灵的尺寸拉大时，精灵会以平铺的方式来填充，并不会以拉伸的方式来填充。如图3.8所示，我们将精灵的大小通过拉动四周的蓝色锚点拉大，精灵变成了平铺模式。
▲图3.8
●Filled
填满模式，这种模式可以设置图片填充一块区域的方式，例如，技能CD时技能图标前面有一层灰色的图片蒙住，这个灰色的图片要顺时针旋转消失，一一直到转完为止灰色的蒙层彻底消失、图标恢复正常表示CD完成。
在Filled 模式下，会多出Fill Dir、FillAmount、Invert Fill3 个设置项。其中FillDir是指选择填充的方式，默认为 360°填充。Fill Amount 可以设置填充的比例，默认为 1 全部填充。InvertFill是设置填充的方向，不勾选是正方向，勾选是反方向。
如图3.9所示，图中1部分FillDir设置为Horizontally水平填充，FillAmount=0.5，InvertFill不勾选默认为从左至右为正方向，图片相当于从左往右水平填充了0.5，也就是50%
▲图3.9
图中2部分为FillDir设置为Vertically竖直填充、FillAmount=0.5，InvertFill不勾选默认从下至上为正方向，图片相当于从下往上竖直填充了0.5，也就是50%。
图中3部分FillDir设置为Radial90填充（90°旋转填充）、FillAmount=0.5，InvertFill不勾选默认从右下角到左上角90°旋转为正方向，图片相当于从右下角到左上角旋转填充了0.5，也就是50%。
图中4部分FillDir设置为Radial180填充（180°旋转填充）、FillAmount=0.25，InvertFill不勾选默认从左下角到右下角180°旋转为正方向，图片相当于从左下角到右下角180°旋转填充了0.25，也就是25%。
图中5部分FillDir设置为Radial360填充（360°旋转填充）、FillAmount=0.65，InvertFill不勾选默认为逆时针360°旋转为正方向，图片相当于以中心点为中心逆时针旋转填充了0.65，也就是65%。
●Advanced
高级设置因为比较复杂，将会在后面讲九宫格的时候详细讲解。
（4）Widget模块。
Widget模块是NGUI的控件组件都具有的一个模块，如图3.10所示。该模块的参数设置如下。
图3.10
●Color
通过这里可以整体改变控件的颜色和透明度，改变颜色的规则为：原色值乘以这里设置的色值（Unity中，会把RGB色值从0～255转变为0～1的一个浮点数）。
我们单击这个白色区域会弹出调色板，如图 3.11 所示。可以随意地在这里设置控件的颜色值和透明度。
值得注意的是，如果通过这个控件改变了透明度，那么这个物体的子物体的控件透明度也会跟着被改变。
●Pivot
锚点设置，默认为中心点。通过这一排按钮可以设置出左上、顶中、右上、中左、中心、中右、左下、底中、右下一共9个点。
这个锚点设置，改变的是图片的中心点位置，这个UI控件和其他 UI控件之间的相对位置就是以这个点作为标准的。
▲图3.11
●Depth
深度设置，前文已经详细讲过。可以通过单击Back和Forward来减1和加1，也可以直接输入一个深度数字来完成设置。
●Dimensions
尺寸，这里指的是控件的像素尺寸。单击Snap可以将图片的像素尺寸直接设置为原大小（这个图片被改成图集之前的图片大小）。
●AspectRatio
宽高比，AspectRatio 后面的数字为当前该控件的宽高尺寸比例。后面有一个模式选择按钮，默认为Free，可为图片随意设置高和宽。这里除了Free以外，还有两个模式：以宽为基础、以高为基础。如果选择以宽为基础，那么图片的高度设置不论怎么设置都无效，都会以宽度和当前的宽高比计算得出。同理，如果选择了以高为基础，那么图片的宽度就无法被设置，它的宽度都会以高度和当前的宽高比计算得出。
（5）Anchors模块。
这个模块是控件位置适配的锚点设置，在后面讲解屏幕自适应时会详细说明。