NGUI 核心组件

NGUI：UICamera

UICamera脚本是所有功能性UI的关键组件。它的责任是向它所在的摄像机渲染出来的所有有碰撞体的对象发送NGUI事件。如果在场景中你有一个摄像机，确保它上面挂载了UICamera脚本。如果你有多个摄像机，确保至少有一个用于渲染UI的摄像机挂载了UICamera。将这个脚本挂载在场景的主摄像机上，你场景中具有碰撞和的物体就可以接收到诸如OnClick，OnHover，OnDrag等NGUI事件。

参数

Use Mouse 决定摄像机是否会响应鼠标事件

Use Touch 决定摄像机是否会响应触摸事件

Use Keyboard 可以允许发送键盘事件（OnKey）

Use Controller 可以允许发送游戏手柄事件（同样通过OnKey发送）

Event Receiver Mask 决定哪一层接收事件。通常会与摄像机的CullingMask相匹配

Tool Tip Delay 控制鼠标在某一个对象上面停留多少秒之后，会发送OnTooltip事件

Mouse Click Threshold 控制在鼠标按下出发OnPress(true)事件之后，还能够触发OnClick事件的最大可移动距离

Touch Click Threshold 与上一个一样，不过是针对触摸事件

Range Distance 决定对象与摄像机距离多远能够接收到消息。只有大于0的值有效，小于0的值表示摄像机能够看到的最远距离

Scroll Axis Name 让你可以改变OnScroll事件中使用的轴

Tips

只是用UICamera而不使用其他的NGUI组件就可以实现所以NGUI事件系统的功能

NGUI:UIAtlas

UIAtlas是一个容器，他包含了许多sprite的坐标信息。如果你对这个概念不是很熟悉，你可以这样理解：与使用很多小的贴图来渲染UI相比，使用一张包含了所有小贴图的大贴图的效率要高许多。这些小的贴图就被叫做sprite，这个大的贴图就被叫做atlas。

在使用NGUI渲染任何东西之前，首先需要创建一个atlas（或者使用一个现成的）。如果你是一个美术，那你可能已经熟悉了相关的流程。如果没有，你可以直接使用NGUI内置的Atlas Maker工具。

当然，你可以在任何地方使用UITexture，但是这个做的效率不是很高。

最后还是看你自己。

参数

Material 指向当前atals正在使用的材质。在材质中最好使用NGUI提供的一些unlit shader，例如Unlit-Transparent Colored

TP Import 让你可以导入完整的使用texture packer程序制作的sprite定义表。只需要把导出来的txt文件拖动进去，所有的sprite会自动导入。如果你使用内置的atlas maker来创建atlas，你可以放心的忽略这个参数

New Sprite 按钮让你可以创建一个新的sprite。它会自动克隆当前选中的sprite的所有参数

Delete 按钮让你删除一个不再使用的sprite。会弹出一个确认框

Sprite 下拉列表让你选择当前需要的sprite

Edit Name 区域让你可以将sprite重命名

Dimensions 是用来标示你的sprite的起始位置和大小

Border 允许你标示sprite的哪一部分不能被缩放，或者只能在一个方向缩放。Sliced sprite会使用这个参数

Padding 是4个边缘的边框宽度。可以用来调整中心点位置，同时在对sprite进行微调的时候也非常重要

Show 区域让你测试你的sprite和它在atlas中的位置

提示

1. 你可以使用多个atlas来对sprite进行分组。只要atlas使用的是同一个材质，他们就只需要消耗一个draw call

2. 为了最好的结果，材质使用的贴图的混合模式最好选择Clamp，并且格式选择Truecolor

3. 将相似的texture组合在一起组成一个atlas是一个不错的选择， 但是最好将同时使用的atlas的数量降低到最小

4. 如果你使用texture packer创建atlas，在导出的时候选择Unity3D

5. 如果你使用photoshop来创建atlas，你可以使用selection工具和信息版来确认sprite的位置和大小

NGUI:UIPanel

UIPanel负责创建实际的集合图形。你不需要手动的添加UIPanel-一旦你创建一个控件，它会自动被添加。如果你想将你的UI渲染拆分到不同的Draw Call中，你可以手动创建你自己的UIPanel，例如你要创建一个分屏的游戏，每个屏用一个摄像机进行渲染，这种秦光下你就需要2个UIPanel来避免控件互相重叠。

参数

Panel Tool 决定这一个Panel是否会显示在Panel Tool中。那些动态创建的临时Panel可以将这个选项关掉，比如那些HUD血条，滚动战斗文字等。

Normals 标志让你选择UI的几何图形是否会受到法线和切线的影响。如果你的UI会受光照影响，那么这个选项需要被选上。

Depth Pass 让你添加一个额外的之渲染深度的Draw Call。打开这个选项可以节省部分填充率，因为在你的不透明的控件后面的物体都不会再被渲染。

-----------------

Widgets 告诉你这个Panel渲染了多少个控件

Draw Calls 告诉你这个Panel会消耗多少个Draw Call。这个数值越低，效率越高

Debug Info 让你选择显示哪种调试信息

Clipping 让你选择是否需要裁切功能。默认情况下不会有裁切。裁切是使用Shader来实现的，当选择了任意一种不是None的裁切模式之后，NGUI会尝试自动的获取一个裁切版本的shader，并更新材质。

如果选择了裁切模式，你可以选择裁切区域的中心点和大小，单位是像素。如果不修改这些参数的默认值，那么会按照整个屏幕的大小来裁切，这个跟没有裁切是一样的效果。

如果裁切模式选择了SoftAlpha，你可以改变Softness参数，这个参数决定了被裁切内容淡出的边缘宽度，这个在整个裁切区域的四个边都是相等的

Material 是一个只读的值。你可能会看到1个以上的material，每个material会消耗一个Draw Call。为了方便，每个Draw Call的面数也显示在这里

Tips

1. 在默认情况下，如果UIPanel不存在，它会在最根层的控件中自动创建。因此，最好将你的UI整理到一个通用的父节点。

2. 你可以通过将UIPanel使用的texture和font整理到同一个atlas来减少UIPanel使用的material数量

3. 你可以放心的删除那些没有使用的或者显示了0个widgets的UIPanel

4. 如果你删除了一个还管理了其他widgets的UIPanel，这些widgets会消失。点击Play或者disable掉这些widgets再enable它们，就可以重新显示（实际上是又重新添加了一个新的UIPanel）

5. 只要没有东西发生改变，已经创建好的几何图形不会重建。意思就是如果你的UI一直保持不动，那么这些几何图形不会每一帧都update，他们会一直被重用，这样提高了一些效率。

NGUI:UIAnchor

Anchor脚本可以用来实现多个目的，这些在Example0里面都有用到。

1. 只要提供一个half-pixel偏移量，它可以让一个控件的位置在Windows系统上精确的显示出来（只有这个Anchor的子控件会受到影响）

2. 如果挂载到一个对象上，那么他可以将这个对象依附到屏幕的角落或者边缘

参数

UI Camera 是渲染这些对象的摄像机，如果没有手动设置，它会自动设置一个场景中的摄像机

Side 设置锚点，分别可以设置4个角，4个边和中心点

Half Pixel Offset 可以让对象在windows系统上显示的时候，有半个像素的偏移量。2D UI界面需要勾选上这个

Depth Offset 用来调整UIAnchor计算出来的位置的深度。它主要作用于基于透视的摄像机。这个值是世界坐标，与摄像机的远近裁切面类似

Relative Offset 相对偏移量 让你可以为物体设置以屏幕半分比为单位的偏移量

Tips

1. 如果一个对象上面挂载了一个UIAnchor，那么他的transform的值不能被手动修改-他们是被脚本控制的。如果你想对锚点加一个偏移量，那么给他添加一个子物体。举例来说，为了保证你的控件在一直在（100，100）的位置，你的对象结构应该是：UI->Anchor->Offset->Widget。

2. 如果你想将一个控件的位置设置为屏幕左边25%的位置，你可以将他设置为一个UIAnchor的子物体，这个UIAnchor的Side设置为Left，Relateive Offset 的X值设置为0.25。

屏幕自适应

NGUI可以比较方便的实现屏幕自适应，但是它的官方教程里面针对这个问题没有详细的教程，所以可能在实现的时候会走比较多的弯路。以下是我在开发过程中找到的一个比较方便的实现方法。

主要组件

1. UIAnchor

这个是用来确定控件在屏幕中的位置，另外有一篇教程专门讲它的功能，所有不会再赘述

2. UIStretch

这个是用来做缩放的组件。老版本的NGUI是集成在UIAnchor上的。新版本的UIStretch提供了4种缩放方式：

Horizontal：只缩放水平方向

Vertical：只缩放垂直方向

Bose：缩放两个方向

BasedOnHeight：基于高度等比缩放

然后基于这些我自己实现了一个

BasedOnWidth：基于宽度等比缩放

代码如下：

[csharp]  view plain copy

1. else if(style == Style.BasedOnWidth)  
2. {  
3.     localScale.x = relativeSize.x * screenWidth;  
4.     localScale.y = relativeSize.y * screenWidth;  
5.     localScale.z = localScale.x;  
6. }  

这段代码添加在Update方法里面。为了能将UIStretch挂在UIPanel上面不出问题，所有将Z轴也缩放了。

自适应流程

1. 创建一个新的UI，将Anchor里面的UIAnchor调整的合适的位置，注意最好将Anchor设置为Bottom。

2. 将Camera的Size调节到默认屏幕大小。比如UI是以960*640分辨率制作的，那么将Camera的Size调整到960。

3. 在Panel上面添加一个UIStretch，模式选择BasedOnWidth。完成之后你可以看到你的Panel的Scale被修改到了当前屏幕的X方向分辨率大小。

4. 将UI控件添加到Panel上，调整位置，在Panel下的所有控件都会以X方向为标准做等比缩放来适应屏幕大小。

5. 添加一张作为背景的图，将UISprite的anchor设置为Bottom，添加之后你可以看到这个sprite可以在不同的分辨率下自适应了。

6. 以上一步添加的背景图作为参照物来摆放页面上的控件，这样不仅仅是大小，位置也同样会按照相同的模式进行等比缩放

7. 可以在第3步创建的Panel下面添加子Panel，子Panel不需要UIStretch（一般用来做Draggable Panel，否则没必要，会增加额外的Draw Call）

8. 如果某一些控件需要定位在屏幕上下左右中的某一角，可以单独给他添加一个UIAnchor，这个时候UIStretch只会缩放这个控件的大小，它的位置由他自己的UIAnchor控制了