创建UI控件使用向导创建UI控件NGUI从入门到实战大学霸

第2章  创建UI控件创建UI控件使用向导创建UI控件NGUI从入门到实战大学霸

UI控件是玩家与游戏交互的接口，例如按钮，滑块等等。NGUI为创建UI控件提供了高效的向导。本章将详细讲解使用向导如何创建UI控件，并对UI控件参数进行讲解。等读者按照顺序完成本章所讲解的所有操作以后，就可以得到一个由各种控件组成的游戏菜单，如图2-1所示。

图2-1  由各种UI控件组成的游戏菜单创建UI控件使用向导创建UI控件NGUI从入门到实战大学霸

2.1  创建UI控件创建UI控件使用向导创建UI控件NGUI从入门到实战大学霸

本节开始讲解使用NGUI提供的向导工具来创建UI控件的方法。在此之前，读者需要了解NGUI提供的这个向导工具，也就是本节的主要内容。

2.1.1  使用向导创建UI控件

在Unity中，单击NGUI|Open|Widget Wizard命令，打开UI控件创建向导Widget Tools面板，如图2-2所示。

图2-2  Widget Tool对话框，即UI控件创建向导

q  参数Atlas和Font，分别用于设置UI控件需要使用的图片集（Atlas），以及标签上需要使用到的字体（Font）。至于这两种资源，读者完全可以使用各种途径获取，例如上网下载、自己制作。但是建议读者先使用NGUI自带的资源，等熟悉了此向导的使用方法了以后，再考虑使用自己的资源。

提示：NGUI自带的Atlas和Font资源在哪里呢？当读者导入NGUI插件到Unity中的时候，Project视图里，就应该出现了一个名为NGUI的文件夹，资源就位于此文件夹中，路径是Asset\NGUI\Examples\Atlases，如图2-3所示。Atlas文件夹中包含了4个文件夹的Atlas和Font资源，读者可以随意选用。但是本节将演示使用SciFi文件夹中的Atlas和Font资源。

图2-3  NGUI自带的Atlas和Font资源

打开SciFi文件夹，然后拖动里面的SciFi Atlas.prefab到Atlas属性框，拖动SciFi Font – Header.prefab到Font属性框，如图2-4所示。

图2-4  为UI控件创建向导的Atlas和Font属性赋值

q  参数Template允许开发者选择一个UI控件模版。此属性值的下拉列表中有很多可供选择的模版，但此处的演示选择Sprite，如图2-5所示。

图2-5  选择创建UI控件时需要使用的模版（本演示示例使用Sprite）

q  属性Sprite，决定了读者创建的Sprite控件，表面将显示什么样的图片；此处为其赋予Dark。

提示：Dark是SciFi Atlas这个图片集中的一个子图。

q  属性Pivot，决定了读者创建的Sprite控件轴点的位置；此处为其赋予Center，表示轴点位于Sprite控件的中心处；

提示：轴点是Sprite控件自转时，所围绕的点。

q  Add To属性，用于设置UI控件的创建位置，即此UI控件是哪个游戏对象的子对象。第1章曾创建过一个名为UI Root(2D)的游戏对象，其子对象Panel就可以作为本节UI控件创建的位置，即令Panel成为UI控件的父对象，如图2-6所示。

图2-6  指定UI控件的创建位置

提示：对于UI控件向导，最后一个属性是用于设置UI控件的创建位置的，关于这点已经在正文中说明了。读者实际上应该使用鼠标单击此属性后面的 按钮，来设置UI控件的创建位置。

当读者按下Add To按钮的时候，在UI控件创建向导中设置好的UI控件就会被创建于指定的位置上了。

提示：使用向导创建的UI控件被添加到了指定的游戏对象下，成为后者的子对象。如果读者突然发现这个UI控件被赋予了错误的父对象！还有办法挽救吗？这个问题的答案是肯定的。要让UI控件位于哪个父对象之下，就直接使用鼠标拖动UI控件到对应的父对象上即可，如图2-7所示。

图2-7  使用鼠标拖动的方式，修改UI控件的父对象

UI控件创建好以后，应该就可以在Scene视图里看到这个UI控件了，如图2-8所示。如果读者没有看到也不要着急，这只是因为读者没有找到它而已。这方面的内容会在下一小节介绍。

图2-8  Scene视图里的UI Root(2D)对象，及其子对象

提示：读者看到的应该不只是UI控件Sprite(Dark)，还有Panel（最外侧的框线）和Camera（中心位置上的摄像机）创建UI控件使用向导创建UI控件NGUI从入门到实战大学霸。