NGUI必备概念和理论（一）【NGUI3.5.8】

Ps：角色换装那个例子，先淡定的等下吧，我们先补补基础的知识点。今天到公司没收到啥任务派发，那就与大家一起学习下NGUI这个东西吧。

本节将讲述NGUI的基础概念和理论，不知从何讲起，算了，我们就从创建一个UI的顺序来学起吧：

一、底层设计

UIRoot

UIRoot总是放在UI层级的最上层。它用来使UI的缩放变的更容易。Widget通常是以像素为单位的坐标。

UIRoot有几种缩放形式，最为常用的就是PixelPerfect。什么意思呢？它的意思是UI永远以像素作为单位进行缩放，比如你的UI是200 * 100的大小，那么它将永远占用屏幕的尺寸是200 * 100个固定像素面积。这样的设置将优先保证UI的清晰度。但是这样会出现一个问题，就是在低分辨率的机子上UI将会变的粗糙很大，而在高分辨率的机子上将显得非常的小。

FixedSize是一个和它功能正好相反的设置。通俗一点就是占用固定的百分比。比如说有一个200 * 100的UI在1024*768上是占用25%的大小，那么即使在其他分辨率上也是占用同等百分比的区间。如果你的UI不关心尺寸变化且也不关心是否清晰，可以选择这个缩放形式。这个选项记得设置Manual Height。

如果你不需要自动缩放功能，直接去掉这个组件就可以了。

FixedSizeOnMobils缩放选项，集成了PixelPrefect和FixedSize组合。这个选项将在PC上使用像素缩放形式来表现，在手机上使用百分比缩放形式。

注意：

如果没有选择FixedSize，那就要设置Minimum Height和Maximum Height选项，这些值让你的虚拟屏幕看起来在合理的范围内。比如你选择了PixelPerfect，

Minimum Height设置为了720，那么这个时候当有玩家将你的游戏运行在了800 * 600 的设置上时（即，高度低于720的时候），你UI的行为就和设置了“Fixed Size”、Manual Height为720的时候一样的效果了。

UIRoot是以 2 / ScreenHeight 的值进行缩放。这个ScreenHeight可能是实际的屏幕高度，也可能是Manual Height（Fixed Size）。这样做的目的是使渲染UI的Camera的Orthographic Size的值一直使用1。

UICamera

NGUI里边的这个摄像机用来接收NGUI控件的事件响应。需要把UICamera这个脚本挂在主摄像机上。

游戏场景里边可以有多个UICamera。大多数游戏，一个挂在渲染Widgets的摄像机上，一个挂在渲染游戏的摄像机上。

UICamera组件中的Event Type用来决定脚本如何排序mouse或者touch触发的事件。如果选择的模式是UI，那么事件响应的顺序依赖于Deptch深度值；如果UICamera挂在了主摄像机上，那么需要将Event Type选择成World模式，这将根据objects距离摄像机的远近来触发事件。

UICamera组件中的Event Mask是事件响应的具体作用域。比如UI层，比如Water等等。

UICamera组件中的Debug，是用来调试用的，勾选上它，当你运行点击的时候，在屏幕的右上角将显示当前是哪个东西被点击了。

UICamera组件中的Allow -Multi Touch，控制是否支持多点触碰。

UICamera组件中的Thresholds，用来微调鼠标和Touch事件的行为。

UICamera组件中的Axes和Keys，用来设置哪个轴控制哪个方向上的移动。

UICamera可以接收的事件很多：

• OnHover (isOver) 发送时机为鼠标悬停（只触发一次）或者离开collider。
• OnPress (isDown) 发送时机为鼠标在collider上按下。
• OnSelect (selected)发送时机为鼠标点击和松开的时候都在同一个object上。
• OnClick ()发送时机和OnSelect一样，但是要求鼠标没有移动特别多。UICamera.currentTouchID表示按下的鼠标哪个键。
• OnDoubleClick ()发送时机为当在四分之一秒内click两次的时候。UICamera.currentTouchID表示按下的鼠标哪个键。
• OnDragStart ()发送时机为OnDrag()事件之前。
• OnDrag (delta) 发送时机为一个object被拖拽。
• OnDragOver (draggedObject)发送时机为其他的object拖拽到他的上面。
• OnDragOut (draggedObject)发送时机为其他的object拖拽出他的上面。
• OnDragEnd ()发送时机为drag事件结束。发送给被拖拽的object。
• OnInput (text)发送时机为输入的时候（在点击选择了一个collider之后）。
• OnTooltip (show) 发送时机为鼠标悬停在一个collider上一段时间没有移动。
• OnScroll (float delta)发送时机为鼠标滚轮滚动。
• OnKey (KeyCode key)发送时机为键盘或者输入控制器被使用的时候。

UIStretch

该组件专门来做这样的事情：就是当前控件绑定上了UIStretch组件，其大小会根据UIStretch中的Container的大小进行对应的大小变化。（Ps：比较白话啊，谅解。）上图：

注意：将Label控件中的UIStretch组件中的Container设置为Button的背景图片，之后选择Both风格，最后设置下Border Padding（随便写）。OK，好了。这个时候你再调整背景Background大小无论如何变化，这个时候你的Label大小，也会随着进行相应的大小变化。

UIAnchor

该组件人如其名，就是提供了可以固定在屏幕某个位置的方法。具体就不多说了，很简单。

二、中层设计

NGUI控件设计架构图，如下：

从UML图中可以看出NGUI的基类是UIRect，下面派生出两个分支UIPanel和UIWidget。UIPanel作为容器可以将UIWidget下的组件进行整合；UIWidget下派生出NGUI的各式各样的组件：UI2DSprite、UILabel、UISprite和UITexture，这几个基础组件进行重组可以实现丰富多彩的UI控件效果。

UIRect

UIRect矩形类是个抽象类，包含了UIPanel和UIWidget所需的基础的功能函数。一个UIRect包含4个基本的锚点信息，它可以保证组件的更新顺序。这里换句通俗的解释便是，定义矩形的4个顶点。

UIPanel

UIPanel用来管理下面的Widget组件。通过Widget的geometry来创建实际的draw call。没有Panel所有的东西都不会被渲染出来。现在，每个Panel都有一个深度值了（Depth），会影响下面包含的Widget。如果你的UI有很多窗口，那么最好每个窗口都有一个Panel。这样，UIPanel的Depth权重影响效果远远大于下面各个Widget的Depth权重效果，所以保证所有的Panel的Depth不一样为佳；倘若你的Panel使用同样的Depth，那么draw call将会自动拆分来保证渲染顺序，这样会增加更多的draw call的数目。

说下常用的选项吧：

Alpha ：这个值可以影响该Panel下的所有Widget，所以可以用这个东西实现淡入淡出的效果。

Depth ：上面说过了不赘述了。

Clipping ：裁剪区域。

Normals：如果想让UI接受灯光的影响，对其进行勾选。

Cull ：如果你的UI是一个有很多几何信息的滚动效果的Panel，勾选这一选项，可以减少三角形的数目。当然这样做有可能影响性能，因为每一次的Update都会去检查    Widget的可视性。

Static ：这个选项将导致NGUI忽略所有的Position/Rotation/Scale的变化，提高性能。除非你的UI不可移动的时候才适合使用这个选项。

Show Draw Calls：选项可以看到所有的 Draw Call 详细信息。

新版本的NGUI后面的Panel自动加了一个Rigidbody选项，这个将提升Unity性能。

UIWidget

从UML架构图上可以看出UIWidget是所有的NGUI控件的基类，即最基本的信息定义类。UIWidget就是个白色矩形选框，在运行的时候是不可见的，如下图所示：

注意它也有个深度Depth，这个值越大，表面越靠前显示和接受事件越优先。此外，鼠标右键在UIWidget内点击，会出现如下菜单列表：

在【Select】中显示的控件顺序就是渲染的顺序，你也可以添加各种组件等其他操作。

参考资料：

http://tasharen.com/ngui/docs.html

http://blog.csdn.net/u012091672/article/list/2

http://www.tasharen.com/forum/index.php?board=12.0