unity ngui 有哪些控件

学习了 Unity NGUI 插件的同学，是否了解 NGUI 中有哪些控件，并且能说出它们的使用方法呢？今天我们就来详细了解一下。

一、场景（Scene）搭建

创建新场景

1. 创建一个新的场景（New Scene）。
2. 选择并删除场景里的 MainCamera。
3. 在 NGUI 菜单下选择“Create a New UI”，会打开 UI 创建向导。
4. 在创建向导中可更改 UI 的基本参数，这里我们选择 Default layer，然后点击“Create Your UI”按钮，UI 便创建完成。

注意：如果是在一个已存在 NGUI 的项目中，需跳过第二步。若要选择不同的 UI 层，还需确保非 GUI 相机不渲染该 UI 层。

查看 UI 向导创建内容

在进行具体 UI 控件创建前，我们先了解一下 UI 向导为我们做了什么：

1. UIRoot 脚本：在 UI Root (2D) 对象上有 UIRoot 脚本，该脚本会重新调整游戏对象以适配屏幕高度，支持自动和手动选择高度，能让开发者指定小部件在像素中的坐标，且与游戏世界中的其他对象相比尺寸相对较小。
2. UICamera 脚本：Camera 对象包含 Camera 和 UICamera 脚本，其中 UICamera 脚本包含 NGUI 的事件系统（event system）。
3. UIAnchor 脚本：Anchor 包含 UIAnchor 脚本，虽然该脚本可附加给控件，但在此处使用可避免 Windows 机器上半个像素偏移的问题。
4. UIPanel 脚本：Panel 对象有 UIPanel 脚本，UIPanel 是一个容器，它将包含所有 UI 小部件，并负责将所包含的部件组合优化，以减少绘制命令的调用。同时，此时 Panel(仪表板) GameObject 已被选中，后续添加的所有部件都将作为它的子对象。

对应的场景在插件中的 Tutorial 1 - Scene 里。

二、精灵（Spirit）控件添加

在 NGUI 菜单中选择“NGUI menu -> Create a Widget”，该向导会指导我们建立一些基本的控件，此过程需要选择所使用的图片集 Atlas 和字体集 Font。

由于是新建项目，按下 Atlas 和 Font 按钮无效果，会自动展示最近使用的元素。我们需要将想用的 Atlas 和 Font 拖拽到按钮旁边的区域，这里我们选择 Atlas 为 SciFi Atlas，字体为 SciFi Font - Normal。

接下来是模板选择，可从一堆模板中挑选想要创建的部件。需要注意的是，这些模板只是为了方便我们开始创建，在实际使用 NGUI 时，经常会花很多时间复制粘贴整个小部件，而非仅使用该向导。

创建第一个控件

1. 假设 Atlas 选择的是 SciFi Atlas，为 Sprite 选择 Dark。
2. 点击“Add To”按钮（若按钮为灰色，说明未选择 Atlas，可在项目窗口的搜索栏输入 scifi 查找）。
3. Sprite 创建并选中后，其尺寸通常较小，在使用 NGUI 时，需通过 Transform 来移动、缩放和旋转部件。

同一个 atlas 中的控件不会使用 Z 轴，但可调整 Depth 参数来调整前后顺序。若项目结束时使用了多个 atlase（或多个 UI 面板），则可调整 Z 轴变换，这样能创建完全平滑的窗口，且绘制时部件顺序不会混乱。

在进入下一章学习前，可尝试添加更多控件，如 Sliced Sprite（一个含有 9 个切片的 Sprite，是创建固定边框控件的最佳选择）、Tiled Sprite（一个 Sprite 缩放填充整个自定义区域）和 Filled Sprite（每个 Sprite 都有单独参数控制可见部分，常用于做进度条或滚动条），后续教程会对它们进行讲解。

对应的场景在插件中的 Tutorial 2 - Spirit 里。

三、切片精灵（Sliced Sprite）

1. 选择 Panel 对象，使用控件向导从 atlas 中添加一个“Dark”的 Sliced Sprite。若不清楚 9 - slicing，可查看相关资料。
2. 调整缩放为(500, 500, 1)。
3. 添加另一个 Sliced Sprite 并设置缩放为(500, 40, 1)。
4. 更改第二个 sprite 的位置到(0, 230, 0)。
5. 将 Sprite 的 Dark 更改为 Light。
6. 调整两个 sprite 的颜色，直至达到满意效果。
7. 调整 Depth，让彩色的 sprite 在 Sliced Sprite 前面，此时看上去有点像小窗口了。

对应的场景在插件中的 Tutorial 3 - Sliced Sprite 里。

四、平铺精灵（Tiled Sprite）

1. 选择 Panel 对象，添加 Tiled Sprite，并选择 Honeycomb sprite。
2. 设置其位置为(0, -19, 0)，缩放为(494, 457, 1)。
3. 设置深度调整前后次序，将它往后调，使其刚好在背景的前面，同时也需调整窗口背景的深度。

可以尝试重新缩放该精灵，观察其变化，也可按自己的意愿调整颜色。任何时候，都可通过选择 Panel 对象中的 Debug Info 的 Geometry 项，然后在场景中点击部件来检验生成的几何网格。添加了这么多东西，目前依旧仅调用了一次绘画指令。

对应的场景在插件中的 Tutorial 4 - Tiled Sprite 里。

五、标签（Label）

1. 按照前面的方法，选择 Panel 对象并在部件导航模板中添加一个 Label 控件。
2. 点击“Add To”按钮后，标签应已添加到场景中并被选中。若“Add To”按钮为灰色不可用，是因为未指定字体 Font，可从 Project 面板中给 Font 栏指定“SciFi Font - Normal”。
3. 在 Inspector 面板中，给刚添加的 UILabel 的 Text 项添加一些文本，如“Hello World!”。
4. 将标签位置移动到(0, 234, 0)，使其出现在标题栏上。

也可创建不同的 Label 并使用不同的字体，还可研究植入颜色的功能，使用 16 进制的值描述不同颜色（可直接从 PS 中粘贴）。例如，以“[FF0000]”代表红色，插入“[-]”可还原到原来的颜色，这之间的文本都会变为红色。由于使用了相同的字体和材质，整个场景依旧是一个 DrawCall。

对应的场景在插件中的 Tutorial 5 - Label 里。

六、按钮（Button）

现在应该能容易地创建一个看上去像按钮的东西，但还需了解如何让它接受点击事件。其实很简单，任何带有碰撞的事件都会收到相应的事件。一个最简单的按钮，只需在 NGUI 下选择“Attach a Collider”给控件，即“NGUI menu -> Attach a Collider”。不过幸运的是，NGUI 中已经嵌入了按钮模板。

创建按钮

和前面一样，选择 Panel，使用向导创建一个 Button。此时会发现按钮不再是一个简单的 GameObject，实际上它由多个部分组成，包括背景、标签以及一些处理按钮事件的脚本，这体现了 NGUI 多个小组件像积木一样组合成强大控件的特性。

按钮相关组件

1. UIButtonColor：控制鼠标悬停在按钮或者按下时的颜色。
2. UIButtonScale：鼠标悬停在按钮上时按钮放大。
3. UIButtonOffset：按下按钮时按钮向右下位移。
4. UIButtonSound：按钮按下时播放声音。

当然还有其他组件，如 UIButtonPlayAnimation 和 UIButtonMessage，需要开发者自行探索。也可以添加自定义事件（MonoBehaviour）来处理更多事件，以下是一些详细的事件目录：

• void OnHover (bool isOver)：鼠标悬停在碰撞体上或移开时发送，在基于触摸的设备上不发送。
• void OnPress (bool isDown)：鼠标按钮（或触摸事件）在碰撞体上按下（isDown 为 true）和释放（isDown 为 false，即使在其他地方释放也会发送给同一碰撞体）时发送。
• void OnClick()：鼠标按钮或触摸事件在与 OnPress 相同的碰撞体上释放时发送，UICamera.currentTouchID 可告知点击的是哪个按钮。
• void OnDoubleClick ()：点击在四分之一秒内发生两次时发送，UICamera.currentTouchID 可告知点击的是哪个按钮。
• void OnSelect (bool selected)：与 OnClick 类似，但一旦一个碰撞体被选中，在选择其他碰撞体之前，它不会再收到 OnSelect 事件。
• void OnDrag (Vector2 delta)：鼠标或触摸在 OnPress(true) 和 OnPress(false) 之间移动时发送。
• void OnDrop (GameObject drag)：当 OnPress(false) 在与触发 OnPress(true) 事件不同的碰撞体上调用时，发送给鼠标或触摸下方的碰撞体，传递的参数是接收 OnPress(true) 事件的碰撞体的游戏对象。
• void OnInput (string text)：在输入内容后，发送给接收 OnSelect(true) 消息的同一碰撞体，通常不太会用到，主要由 UIInput 使用。
• void OnTooltip (bool show)：鼠标在碰撞体上悬停且一段时间（tooltipDelay）未移动后发送显示提示信息，鼠标移开时发送隐藏提示信息，在基于触摸的设备上不发送。
• void OnScroll (float delta)：鼠标滚轮移动时发送。
• void OnKey (KeyCode key)：使用键盘或控制器输入时发送。

对应的场景在插件中的 Tutorial 6 - Button 里。

七、滑块（Slider）

创建滑块

1. 使用 Widget Tool，选择 Slider 模板。
2. 为 Foreground 选择 Button sprite，为 Background 选择 Dark sprite，Thumb 也可选择 Button。
3. 选择 Panel 后点击“Add To”按钮，一个滑块滚动条就创建完成。

可以选择滑块的游戏对象进行颜色和尺寸的调整，但建议不要调整控件对象下面的子对象，这样在旋转它们时可保持尺寸，且内部的部件能在坐标下正常工作。也可尝试再做一个垂直滑块。

对应的场景在插件中的 Tutorial 7 - Slider 里。

八、复选框（Checkbox）

创建复选框

1. 点击蒙版用“X”，背景用“Dark”。
2. 创建一个复选框后，再选择 Panel 对象创建一个新 GameObject。
3. 向这个 GameObject 添加更多的复选框。
4. 在这些复选框上选择 Option 项。
5. 运行程序，点击复选框查看效果。

如果每一步操作正确，不可能同时选中两项，因为选中“Radio Button Root”参数后，复选框会变成单选按钮，它们通过同一个根目录放在一组，即指定的 Transform 对象。还可附加一些其他事件处理功能，如 UICheckboxControlledComponent 和 UICheckboxControlledObject，可用来由复选框状态来启用或禁用指定的组件或者游戏对象。可以尝试做 3 个复选框来控制红、绿、蓝三个控件的显示和隐藏。

对应的场景在插件中的 Tutorial 8 - Checkbox 里。

九、输入框（Input）

现在来创建一个输入框，任何文本标签通过添加碰撞盒 UIInput 脚本都可变成输入框，若有背景会更好看。幸运的是，Input 模板已经为我们做好了这些：

1. 使用 Widget Tool 创建输入框。
2. 可使用“Dark”sprite 或“Highlight” sprite 作为背景。
3. 不断调整直到调试正确。

点击“Play”运行游戏，点击输入框即可直接输入文字，在 iOS 和 Android 设备上会自动显示屏幕键盘。这个输入框同样支持 Unity 3.4.1 新增的输入方法（IME = Input Method），不过要输入中文，需下载单独的中文字体（或者自己制作），下载后拖拽到对应的 Inspector 面板即可。目前唯一不支持 Flash 平台，因为 Unity Flash 还未增加 IME 输入支持。

对应的场景在插件中的 Tutorial 9 - Input 里。

十、3D 界面转换

前面我们一直在创建 2D 的界面，其实也能很容易地将其变成 3D 界面，步骤如下：

1. 将 Panel 从 Anchor 中解除，使其不再是 Anchor 的子物体，由 UI Root 作为它的父对象。
2. 删除 Anchor（本教程只做静止的 UI）。
3. 将摄影机改成透视投影（Perspective Projection）。
4. 将相机的 Near 改为 0.1，Far 改为 4.0。
5. 将相机往后移动一点，大概在（0, 0, -550）的位置。
6. 给 Panel 设置一定角度，这里设置旋转为（0, 345, 0）。
7. 为了让效果更炫目，给 Camera 添加 PanWithMouse。

点击运行游戏，移动鼠标，如果一切正确，会看到一个效果很好的窗口。需要注意的是，这七步仅在一开始创建了 2D UI 的基础上才需要，如果在第一步就创建了 3D UI，则无需这些步骤。最后，需要什么样的 UI 取决于开发者的想象力。

对应的场景在插件中的 Tutorial 10 - 3D 里。