2D&3D UI

一、创建一个2D UI 在制作UI的时候，首先要创建的就是可以看到我们UI的“眼睛”，在NGUI菜单中选择Creat,然后选择2D UI，创建完成了，就可以看到一个虚拟的长方体一样的东西，同时在Scene窗口，NGUI自动生成了一个UIRoot的物体，并且自带了一个Camera作为它的子物体。那么这个新生的Camera就是NGUI生成的专门用来渲染UI的相机了，当我们生成的NGUI的UIRoot的时候，能自动的将生成的UIlayer设为了第8层，在这个相机中，只能看见第8层的物体，也就是只能看见UI。因为是2D的UI，所以我们的相机其实是正交相机。而我们看到的红色矩形其实就是相机的视窗大小比例，它会根据Game视图中的屏幕长度比设置自动调整。

二、创建一个3D UI 其实3DUI的创建和2D的基本没有区别，都是一个UIRoot带有一个Camera子物体，唯一的区别就是3DUI的相机在Scene视窗中是一个透视的摄像机，将会支持UI的三维透视效果。

三、如何选择使用3DUI还是2DUI (1)新版本的NGUI中对3DUI支持非常好了，如果选择2D,3D都OK的情况下，建议选择3DUI,扩展性会更强一些 (2)如果出现UI不允许有远近透视的大小变化，必须选择2DUI，例如角色头顶的血条，在角色人物跑远了之后也不会变小，这时血条就必须用2DUI来制作 (3)如果出现UI有三维变换的效果，例如从远到近的变大，三维旋转等，就必须使用3DUI了 (4)无法明确知道使用什么UI的时候，建议使用3DUI (5)无论哪一种UI，其实本质都是摄像机的区别，基本上都能实现UI的效果，只是需要处理的东西不一样，所以如果选错了也没关系，总有很多办法来解决的。

在我们创建的UI中，可以看到UIRoot物体和Camera物体上面都带有NGUI的脚本组件，其中UIRoot物体上带有UIRoot和UIPanel组件，而子物体Camera带有一个UICamera组件，这几个组件都是NGUI系统中的核心组件。下面我们就单独的来详细讲解一下。

(1)UIRoot组件

UIRoot根据名字的解释，其实他就是"顶层",也可以理解为所有UI的父亲节点。它的作用是用来缩放UI,我们的美术人员制作UI元素的时候都是知道的，UI一般都是根据像素来作为单位的，例如19201080 480800等等，而Unity中则是以米为单位的，如果是一个100100像素的UI元件放到一块10001000的分辨率的屏幕中的话，那么按理说这个UI元件应该只有1%的大小了，但是因为Unity的单位是米，所以它会从100100像素的大小变为100100米，会导致一个小UI元件变得非常巨大，这个时候UIRoot就通过屏幕的比例来缩放UI控件，让UI看起来视觉上是正常的。
 UIRoot组件提供了三种缩放的方式，就是ScalingStyle下拉选项菜单，分别是Flexible,Constrained,ConstrainedOnMobile(旧版本中叫做：PixelPerfect,FixedSize,FixedSizeOnMoiles)

Flexible是指永远保持像素大小不变，比如一个100100像素的图片，在500500的分辨率上是100100，在10001000分辨率屏幕上还是100*100.这样做的好处坏处都有，好处就是图片大小始终一样，那么图片始终是以最清晰的状态显示的，但是缺点就是在大分辨率上会显得特别小，小分辨率屏幕上显得特别的大。这个需要大家根据发布的平台来适配，再进行适当的选择了。

Constrained就是和上一个方案完全相反的方案，NGUI在这种状态下将不再保留图片原始尺寸，它只关心NGUI自己的缩放参数，就是我们需要进行设置的最大和最小高度了，然后NGUI会根据这个高度值的高度比例进行缩放，例如设置最大高度值为1000，然后100100的图片就会是1/10的大小，那么如果这个时候屏幕高度值变为了500，那么图片还是会占1/10，所以尺寸自然就缩放为了5050了，这个就保证了UI和屏幕分辨率的比例是一致的，这个再我们发布到移动平台适配多分辨率的时候非常的有用。

ConstrainedOnMobile的话就是上面两种方案的结合体了，它会让UI在PC,MAC,Linux系统下自动采用PixelPerfect，而在移动设备上自动采用FixedSize。

(2)UIPanel组件 

如上图所示，我们的UIPanel有很多的属性，

Alpha就是控制透明度的，当然它的透明度是控制整个它下面的子物体的，都会一起发生变化，这个可以用来制作整个UI的淡入和淡出以及隐藏等。

Depth深度属性，这是一个非常重要的属性，在NGUI中，每一个Panel都会有depth，每一个Widget控件也会有一个Depth,这个Depth就决定渲染的顺序，直接影响了UI之间的前后重叠关系，Depth越高的控件将会显示在视野的最上层，Depth越高的Panel也会显示在视野的上层。但是Panel的Depth权重是远远高于Widget组件的，也就是说大部分情况下，属于低Depth的Panel的控件，不管控件本身Depth为多少，它都会显示在高Depth的Panel的后面，所以如果我们在制作了很多个Panel的时候，我们要尽量保证不要共用同一个Depth，因为这个将会导致NGUI渲染的时候无法以一个DrawCall进行渲染，它会增加DrawCall来保证不混乱，这个就增大了开销。

Clipping是剪辑视窗的功能，它将可以让一个面板只显示一块区域的。

RenderQ就是可以了解为我们的渲染顺序，默认是自动设置的，这个选项在和粒子系统结合使用的时候会有影响。如果该Panel下的UI需要被灯光影响到的话，需要勾选一下Normals.如果该Panel下面的所有UI控件都不会被移动，那么我们可以勾选Static来将他们设置为静态的。单击后面的Show Draw Calls按钮，可以看到该Panel下面所有的DrawCall消耗情况。

(3)UICamera组件

为 UICamera 组件的截图，UICamera 这个组件的核心作用是：让带有这个组件的摄像机渲染出的物体能够接收 NGUI 的事件。如果我们自己创建了一个物体，并且希望对这个物体使用一些 NGUI 中的事件，例如 OnPress()、OnDrag()等，就需要为渲染这个物体的摄像机添加 UICamera 组件。在 UICamera 中，大部分设置我们都不需要去操心，它让我们的事件支持多点触摸、鼠标键盘触摸屏等事件的接收。但是要注意的是 EventMask 这个选项，这个 EventMask 和相机中的 CullingMask 非常相似，相机的 CullingMask 是为了选择渲染那些层的物体，这里的EventMask 是为了选择接收那些层的物体的事件。 UICamera 会默认只接收我们创建 UI 时被自动设置的那个 layer，但是，如果我们在制作 UI 过程中，在创建 UI 后因为某些原因修改了 UI 的层，一定要将 UICamera 的 EventMask 修改过来，否则将会发现，我们单击 UI 没有反应，因为它接收不到这个 layer 的物体的事件。

深度（Depth)

深度这个概念太重要了，还记得我第一次使用NGUI的时候，深度弄的乱七八糟的，导致后面修改一个地方还需要去修改其他更多的地方的深度值。因为深度是伴随整个UI的制作过程的，是UI中一个非常重要的概念。关于深度我们需要记住以下的一个关键的地方。 （1）每一个 UIPanel 和每一个 UI 控件都一定会有一个 Depth，深度值大代表显示的优先级高（会越趋向于在界面更上层显示）。 （2） Depth 决定的是 UI 的显示层级关系，一个 UI 控件是否显示在最上层是由它所属的Panel 的 Depth 和它本身的 Depth 决定的。一般情况下，属于低 Depth 的 Panel 的控件，不管这个控件本身的 Depth 为多少，它都将显示在高 Depth 的 Panel 的控件后面（被高 Depth 的Panel 遮住）。 （3）尽量不要让 Panel 之间共享同一个 Depth，这样会导致性能消耗增加。 （4）制作 Panel 和 UI 控件时，记得考虑一下它所属的 panel 和它自身的 Depth 是否能让它显示在正确的层次关系上。

相机的深度  我们学习到 NGUI 创建时，都会创建一个它独有的相机。这个相机其实就是Unity 中普通的 Camera，然后为其附加了一个 UICamera 的组件。需要注意的是，所有的Camera 也都有一个 Depth，这个 Depth 会影响到 UI 中的 Depth，特别是场景有多个 Camera来渲染不同层次的 UI 时，这个影响会比较大。具体我们得遵循以下这些规律。

（1）相机的 Depth 永远是最高级的，也就是高 Depth 相机所看到的画面，永远在低 Depth相机所看到的画面之上。 （2）如果需要相机有视觉穿透效果（只渲染所看到的东西，其他地方透掉显示其他相机所看到的画面），需要将相机的 ClearFlags 设置为 DepthOnly。 （3）并不是只有负责渲染 NGUI 的相机的 Depth 会有影响，所有的相机（比如默认存在的渲染场景的 MainCamera）的 Depth 都受此规律影响。例如，如果将照射 UI 的摄像机的深度设为 0，然后将照射场景的相机深度设为 1，那么，将看到场景把所有的 UI 遮住。 （4）创建 UI 时，UIRoot 下生成的相机默认 Depth 是比场景中的相机深度高的，不过当场景内有多个摄像机时，一定要管理好每个摄像机的 ClearFlags 和Depth。 （5）当场景内有多个摄像机时，一定要检查摄像机的 CullingMask 不要渲染重复的 Layer，否则可能导致显示双重画面。 UI 画面被两个相机同时看到，显示了两份（因为两个相机所在的位置不一样，所以看到的大小会不一样）。