5.1 初识NGUI
本节主要向读者介绍NGUI的相关知识，主要包括NGUI的背景简介、NGUI的导入和NGUI的菜单等。通过本节的学习，读者将对NGUI有一个基本的认识。
5.1.1 NGUI背景概述
在Unity 3D中，可以使用代码控制其自身所携带的GUI来实现图形界面的搭建。但是，这些组件的搭建效率较低，而且已经无法满足现在市场对图形用户界面美感的要求，所以，引入了NGUI来增加所要开发的图形用户界面的美感。
NGUI是一个功能强大的UI系统，其事件处理通常由开发人员编写C#脚本完成，并且是一个严格遵循KISS原则的Unity框架。该框架具有干净、简约的代码，对于程序员来说，这意味着有更多的时间和精力用在开发的其他方面，更好地提高开发效率。
说明
KISS原则是英语“KeepItSimple，Stupid”的首字母缩略字，也有人称“懒人原则”。KISS原则是指在设计当中应当注重简约的原则。
使用NGUI可以搭建出更多丰富的图形界面，包括文本标签、按钮、列表、复选框等一系列界面控件，如图5-1和图5-2所示。下面将对NGUI进行详细介绍。
▲图5-1 NGUI搭建的界面
▲图5-2 NGUI搭建的界面
5.1.2 NGUI的导入
通过前面小节的学习，相信读者对NGUI有了一个简单的认识。本小节主要讲述在Unity 3D中如何导入NGUI，具体步骤如下。
（1）打开Unity3D软件，登录到NGUI的官方网站http://www.tasharen.com/?page_id=140下载免费的NGUI插件。如图 5-3所示，单击“Free Edition of NGUI here”连接下载。
▲图5-3 免费 NGUI下载
（2）若想下载专业版的NGUI，即可单击“Asset Store”连接，跳转到Unity 3D中的Asset Store界面，单击购买按钮进行下载，如图5-4所示。
▲图5-4 专业 NGUI下载
提示
免费版的NGUI带有“NGUI”的水印，适合用于个人的学习和研究所用，而且免费版的NGUI并不是经常更新的。
（3）双击所下载的NGUI插件ngui_free.unitypackage，在弹出的对话框中单击Import将NGUI导入到Unity中，如图5-5所示。
提示
NGUI组件的使用需要Unity 3.5或更高的版本，本书介绍的是Unity 4.0版本，读者可以放心使用。同时，如果导入失败，读者可以尝试将下载的插件包放在非中文路径下（最好不要放在桌面），然后再次导入。
▲图5-5 NGUI的导入
（4）导入后，在Unity菜单栏中会出现NGUI菜单（如未出现，请刷新界面或重启Unity），并在Project面板的Assets下出现NGUI文件夹，如图5-6所示。
▲图5-6 导入 NGUI后的界面
通过上面的操作，NGUI 就成功地导入到了Unity中，开发人员可以根据需要使用NGUI 搭建界面。需要注意的是，每一个新的Project都必须导入一次NGUI。
5.1.3 NGUI菜单
本小节将对NGUI菜单下的选项进行详细讲解，使读者对NGUI菜单有一个系统、全面的认识，能够在今后的开发中熟练地运用各个功能，以满足开发的需求。
NGUI的菜单中包括Attach a Collider、Make Pixel Perfect、Create a Panel、Create a Widget、Create a New UI、Panel Tool、Camera Tool、Font Maker和Atlas Maker选项，如图5-7所示，可以根据需要选择不同的选项，实现所需要的功能。
▲图5-7 NGUI菜单
● Attach a Collider——添加碰撞，即为物体对象添加碰撞体。
● Make Pixel Perfect——使像素完美，即增强界面像素效果。
● Create a Panel——创建面板，即新建一个面板。
● Create a New UI——创建新界面，即创建一个新的UI。当单击选项Create a new UI，就会立刻弹出一个对话框，单击Create Your UI添加一个场景，如图 5-8所示，然后在Hierarchy面板会出现UI组件，如图5-9所示。
▲图5-8 新建UI
● Create a Widget——创建控件，即创建一种控件。当单击选项Create a Widget，就会立刻弹出一个对话框，读者可以自行添加需要的组件，如图 5-10所示。
▲图5-9 UI组件
▲图5-10 新建控件
● Panel Tool——面板工具，即控制面板的设置。当单击Panel Tool选项，就会立刻弹出一个对话框，读者可以在这里了解Panel的设置情况，如图5-11所示。
● Camera Tool——摄像机工具，即控制摄像机的设置。当单击Camera Tool选项，就会立刻弹出一个对话框，读者可以在这里了解Camera的设置情况，如图5-12所示。
▲图5-11 Panel设置
▲图5-12 摄像机设置
● Font Maker——“字体制作”，即创建字体。当单击Font Maker选项，就会立刻弹出一个对话框，读者可以根据开发的需要制造合适的字体，如图5-13所示。
● Atlas Maker——“图集制作”，即创建图集。当单击Atlas Maker选项，就会立刻弹出一个对话框，读者可以根据开发的需求，制造自己的图集，如图5-14所示。
▲图5-13 字体制造
▲图5-14 图集制造
说明
NGUI菜单中选项的基本知识已经介绍完毕，在稍后的章节中将会详细讲解以上选项的具体内容，以及如何使用这些选项来搭建需要的图形界面。
5.1.4 UI层简介
前面的章节讲解了NGUI菜单中各个选项的功能，本小节将对创建UI层，以及UI向导中的内容进行详细介绍。
创建一个新的UI向导，即单击NGUI→Create a new UI→Create Your UI选项，即可在Hierarchy面板中创建一个新的UI，如图 5-9所示。新建的UI中包括UI Root（2D）、Camera、Anchor和Panel，接下来将为读者介绍UI组件所包括的内容。
● 2D的根对象（UI Root（2D））包括基本的Transform属性及UIRoot（Script），如图5-15所示。这个脚本会重新调整界面对象使其符合测试设备的屏幕的高度（Automatic表示自动调整， Manual Height表示手动调整）；
● Camera对象包括Transform、Camera和UICamera（Script）组件，如图5-16所示。UICamera脚本是所有功能性 UI 的关键组件。其功能是向其所在摄像机渲染出来的所有碰撞体对象发送NGUI事件。
▲图5-15 UIRoot
▲图5-16 Camera参数
Camera参数介绍如下：
● Use Mouse——选择摄像机是否响应鼠标事件；
● Use Touch——选择摄像机是否响应触摸事件；
● Use Keyboard——选择是否允许发送键盘事件；
● Use Controller——选择是否允许发送游戏手柄事件；
● Event Receiver Mas Default——选择哪一层接收NGUI事件；
● Tooltip Delay——控制鼠标光标在对象上停留多久发送鼠标事件；
● Mouse Click Thresh——控制鼠标光标在对象上停留多少秒发生触摸事件；
● Range Distance——选择摄像机与对象接收消息的距离；
● Scroll Axis Name——选择控制滚动事件中的轴。
Anchor（锚点）对象包括Transform和UIAnchor（Script）组件，如图5-17所示。其主要影响UI的显示位置。其参数介绍如下：
● Ui Camera——渲染对象的摄像机，一般自动选择场景中的摄像机；
● Side——设置锚点，包括4个角，4个边以及中心点；
● Half Pixel Offset——选择是否让对象在Windows系统上显示时，存在半个像素的偏移；
● Depth Offset——用于透视摄像机，调整UIAnchor计算的位置深度；
● Relative Offset——相对偏移量，即物体以屏幕半分比为单位的偏移量。
Panel对象包括Transform和UIPanel（Script）组件，如图5-18所示。UIPanel是一个容器，包含了所有UI小控件，负责创建实际的界面集合图形，并且可以将UI渲染拆分到不同的Draw Call中。其参数介绍如下：
● Panel Tool——选择当前Panel是否会显示在Panel Tool（见图 5-11）中。动态创建的临时Panel可以不勾选此选项；
● Normals——选择UI中图形是否会受到法线和切线的影响；
● Depth Pass——选择添加一个额外的Draw Call。勾选此选项后，不透明空间后的物体都不会渲染，因此节省了部分填充率；
● Static——检测UI中控件是否移动；
● Widgets——显示当前Panel一共渲染了多少个控件，若为0，则表示此Panel无用，可以删除；
● Draw Calls——显示当前Panel消耗的Draw Call个数，数值越低，效率越高；
● Debug Info——选择调试信息的显示方式；
● Clipping——选择裁剪功能，使用Shader来实现，NGUI会尝试自动获取一个裁剪版本的Shader并更新材质，默认选择None。
▲图5-17 UIAnchor
▲图5-18 UIPanel
NGUI的UI层的基本知识到这里介绍完毕，接下来将详细介绍NGUI中各个重要控件的具体使用，这是基于NGUI进行界面开发必知必会的部分。