Sprite

Sprite(精灵)其实就一切UI元素，甚至可以理解为UI上的图片等等。在一套UI中，精灵是一种非常常见的元件。当我们制作UI的时候，如果需要显示一张图片，需要先判断这个图片是否应该制作到图集里面去，然后用精灵的方式去使用它。

一般这些情况我们会使用精灵。

(1)精灵是最基础的UI元件，经常不会独立使用，很多其他控件也都会用到精灵，比如一个进度条，需要用到一个表示空槽的精灵，和一个上面会走进度的条形精灵，所以精灵并不是独立使用的。 (2)对于一些展示型的图片，不会变化，只是起一个展示作用，例如一个界面上的一个装饰花纹图案，如果不是特别的大的话，一般我们都使用精灵的方式去制作。 (3)如果要显示一个图片，它形状不规则，长宽不是2的N次方，那么一定要使用精灵，因为Unity对非2的N次方的图片处理要慢很多。 (4)如果这个UI元件经常性的出现，那么也应该是用精灵，因为这样它就可以跟图集一起载入内存，并不用新增一个drawcall去渲染它。

如何创建一个Sprite呢？

(1)首先我们创建一个3DUI或者2DUI也可以，然后选中UIRoot，直接在菜单栏上面创建，同时需要注意一下，创建出来的UI控件的本地坐标都需要为0，或者需要reset一次。 (2)使用老版本的创建方式，在Unity顶部菜单中选择NGUI菜单，选择open，选择widgetWizard，然后我们在Template中选择Sprite,在Sprite栏单击会弹出你所设置的图集中的所有精力，从中可以选择你想要创建的精灵，Pivot是精灵的锚点。Addto是选择你要在哪一个UI节点下进行创建，最后点击addto即可创建。

Sprite组件的设置

 接下来我们就详细的来说一下该面板可以设置的详细参数 (1)Atlas,单击Atlas按钮将会弹出图集选择界面，可以选择要使用的哪一个图集，所以这个就需要我们把图集命名好，在很多图集的时候便于找到自己需要的图集。

(2)Sprite,单击Sprite按钮，将会弹出该图集所拥有的精灵的预览界面，我们只需要再其中找到需要的精灵，然后双击即可。

(3)Type和Flip，在这里Type有5个选项

1）Simple,这种类型下，图片会正常显示出来，图片是什么样子它就是什么样来显示，当我们将一个精灵的尺寸拉大的时候，它会以原图拉伸的方式来完成，我们将精灵的大小通过拉动周围的蓝色锚点拉大，但是精灵就被拉伸了。在这种类型下，Flip有几个选项，分别是:Nothing(不翻转)、Horizontally(水平翻转)、Vertically(垂直翻转)、Both（既水平又竖直翻转） 2）Sliced，切片风格，这种类型的知识需要和后面九宫格的制作练习比较紧密，所以在后面我在来详细讲解。 3）Tiled，平铺类型，选择了之后，精灵尺寸会保持原来的尺寸不变，然后将精灵的尺寸拉大时，精灵回忆平铺的方式来填充，并不会以拉升的方式来填充。我们将精灵的大小通过拉动四周的蓝色锚点拉大，精灵变成了平铺模式。 4）Filled，填满模式，这种模式可以设置图片填充一块区域的方式，例如技能CD时技能图片前面有一层灰色的图片蒙住，这个灰色的图片要顺时针旋转消失，一直到转完为止灰色的梦曾彻底消失、图片回复正常的CD完成。在Filled模式下，会多出Fill Dir，Fill Amount、Invert Fill3个设置项，其中FillDir是指选择填充的方式，默认为360度的填充，Fill Amount可以设置填充的比例，默认为1全部填充，InvertFill是设置填充的方向，不勾选是正方向，勾选是反方向。接下来我们在Unity中来进行一下尝试看看具体的效果，特别是FillDir不同选项的效果。 5）Advanced ，这一块在后面九宫格的时候详细来讲解。

(4)Widget模块

这个也就是我们所说的UI控件，Widget是NGUI的控件组件都具有的一个模块  1)Color Tint 通过这个颜色控制可以改变控件的颜色和透明度，我们可以打开调色板对相应的UI进行颜色的变换和透明度的变换，同时还是需要注意的是，如果这个是父物体的话，那么其子物体的透明会和父物体一起改变。 2)Pivot 锚点，默认是为中心点，通过这个锚点的设置，可以改变图片的中心点位置，这个UI控件和其他UI控件之间的相对应的位置就是以这个锚点为准的。 3)Depth 深度，这个之前讲过了，我们可以通过back和forward来进行加减，也可以直接输入数字 4)Size 有些NGUI版本是Dimensions 尺寸，就是来控制控件的像素尺寸，单击snap是让图片直接设置为原版的大小不会有拉伸想象，这个比较常用，有时候我们导入进来的物体有拉伸或者有形变都需要点击一下snap，同时有时候还会经常性的根据需求来调整UI的大小也一般是通过这个来调整，而不是调整scale，这个大家注意下。 5)Aspect，宽高比，一般我们都设置原始图片尺寸的宽高比，同时我们还可以锁定宽或者高进行缩放，也是很常用的一个功能。

(5)Anchors模块 这个模块也是比较重要的一块，是设置适配锚点的