精灵图片 Sprite（Dark）控件Simple sprites制作游戏背景NGUI从入门到实战大学霸

精灵图片 Sprite（Dark）控件Simple sprites制作游戏背景NGUI从入门到实战大学霸

2.2  精灵图片精灵图片 Sprite（Dark）控件Simple sprites制作游戏背景NGUI从入门到实战大学霸

上一节和读者一同创建了第一个UI控件——Sprite（Dark）。当读者在Hierarchy视图里选中这个UI控件对象的时候，可以在Inspector视图里看到这个UI控件的预览视图，如图2-18所示。细心的读者也许注意到了预览视图中还有4根虚线，用来表示这种精灵图片（Sprite）的种类是“切片”（Sliced）类型。除此以外还有其它三种Sprite：简单（Simple）、平铺（Tiled）和填充（Filled）类型。本节会分别介绍这四种Sprite。

图2-18  Sprite（Dark）控件的预览视图精灵图片 Sprite（Dark）控件Simple sprites制作游戏背景NGUI从入门到实战大学霸

2.2.1  简单类型精灵图片 Sprite（Dark）控件Simple sprites制作游戏背景NGUI从入门到实战大学霸

不管Inspector的预览视图是如何识别这个Sprite的，要在游戏视图中如何显示Sprite，还是由对属性的设置来决定。默认情况下，Unity将其当做Simple类型来显示，于是这个图片就会主动伸缩，最终以自适应的效果显示，如图2-19所示。

图2-19  自适应显示的Simple sprites精灵图片 Sprite（Dark）控件Simple sprites制作游戏背景NGUI从入门到实战大学霸

2.2.2  切片类型——制作游戏背景精灵图片 Sprite（Dark）控件Simple sprites制作游戏背景NGUI从入门到实战大学霸

切片（Sliced）类型的Sprite会将自身分成9份，然后使用最中间的那份。因为边缘透明的关系，使得这个图形的边缘变得很不规则，因此在将这个图形做伸缩变化的时候，会产生很难看的变形。为了避免出现这种难看的效果，于是就将不规则的边缘去掉，或者说不显示，留下的就是个规则的矩形了。

虽然Inspector的预览视图识别出这是一个Sliced sprites，但是目前还没有明确的告知要将此Sprite当作Sliced sprites来使用。具体的操作方式是，选中Sprite(Dark)对象，然后在Inspector视图里设置其UISprite(Script)组件下的Sprite Type为Slice，设置效果如图2-20所示。

图2-20  Sliced sprites显示效果

提示：设置Sprite Type为Sliced以后，会出现名为Fill Center的属性，默认情况下这个属性是被复选的，如果取消这个属性的复选，那么在游戏视图中将只显示一个边框，而中间变成了透明的，如图2-21所示。

图2-21  Fill Center属性的效果

读者如果觉得对这个图片的分割不合理，可以手动的设定那4条将图片分成9份的分割线，这就相当于要设置图片本身的属性了。名为Dark的图片是SciFi Atlas的一部分，所以读者应该定位到这个Dark，然后再设置其属性即可。定位的方法很简单，Sprite(Dark)有个UISprite(Script)组件，此组件的前两个属性就表示了Atlas和Sprite，这两个属性的后面都有个Edit按钮，单击这个按钮就可以定位到Dark，然后再手动修改那4条分割线的位置即可，如图2-22所示。

图2-22  修改Dark的4条分割线

提示：本章将使用名为Sprite(Dark)的图片将作为游戏的背景图，因此在读者了解了Sliced sprites以后，就该开始将其做些简单的设置了，具体的操作步骤如下：

（1）在Hierarchy视图里，将Sprite(Dark)重命名为Window，这样有利于开发者快速了解这个游戏对象的用途和作用；

（2）令这个对象位于(0,0,0)的位置上，大小与原图一致；

（3）设置其Depth属性为0；

（4）设置其Color Tint属性，即颜色的组成为（R：115、G：240、B：255、A：255）；

（5）Dimensions属性为1300×850；

对这个对象的设置，如图2-23所示。

图2-23  游戏背景图像的属性设置精灵图片 Sprite（Dark）控件Simple sprites制作游戏背景NGUI从入门到实战大学霸