2.1 NGUI插件详解

NGUI是专门针对Unity引擎开发的一套UI框架，它已经成为世界上应用最广、最成熟的Unity制作UI的框架。使用它来制作游戏UI界面非常轻松且高效。利用NGUI搭建界面有如下优点：

□ 提供强大的UI系统和事件通知框架。

□ 代码简洁，完全集成到Inspector面板中，在场景视图中看到的就是在游戏视图中得到的（所见即所得）。

□ 基于组件、模块化的特性。要让界面控件做什么，只需为其附加相应的行为即可，不必编码。

所以说NGUI是界面开发最好用的工具。本游戏中利用的就是NGUI插件搭建界面。NGUI插件包含在Thanos框架中。在正式搭建游戏UI界面之前，先来介绍NGUI的几个重要组件的概念以及用法。

2.1.1 UI Root的概念

在NGUI中，每一个UI对象都以UI Root作为其根节点。

UI Root游戏对象的5种属性如图2-1所示。

□ Scaling Style：缩放类型。

□ Minimum Height：最小高度。

□ Maximum Height：最大高度。

□ Shrink Portrait UI：收缩UI。

□ Adjust by DPI：微调超出空间的UI。

2.1.2 UI Lable的概念

Label（标签）相当于Text文本。如图2-2所示，所有的Label都需要Font（字体）才可正常工作。这个字体可以是Dynamic动态字体（引用Unity Font），也可以是Bitmap字体——嵌入Atlas里面的字体。Label中包含很多参数，简单的就不再赘述，主要介绍其4个重点属性。

□ Overflow：字体边距。

□ Alignment：对齐方式。

□ Gradient：渐变色。

□ Spacing：水平竖直间距。

2.1.3 UI Sprite的概念

UI Sprite是NGUI里面最实用的组件之一，相当于Image（图片）。需要使用Atlas（纹理）的一部分来绘制Sprite。Atlas是NGUI的图集，Atlas把一些零散的图片合成一张图。这样做的好处是可以降低Draw Call，如图2-3所示。

□ Atlas：图集。

□ Sprite：图集里面的图片。

□ Type：图片类型。

□ Draw Call：是open GL的描绘次数。

□ Pivot：该控件在场景中的对齐方式。

□ Depth：控件在场景中的层级。

□ Aspect：根据长宽比例剪裁图片。

□ Anchors：锚点。

2.1.4 UI Panel的概念

UI Panel（见图2-4）用来收集和管理它下面所有Widget（控件）的组件。没有Panel所有东西都不能够被渲染出来。可以把UI Panel当作Renderer（渲染器）。Panel有一个Depth（深度）值，会影响所有它包含的Widget。如果UI有很多窗口，那么最好每个窗口有一个Panel。Panel上的Depth权重会远远高于每一个Widget的Depth权重，所以保证Panel不要使用同样的Depth。如果使用同样的Depth在Panel上，那么Draw Call会被自动拆分以保证渲染顺序，所以会增加更多的Draw Call。

□ Alpha：透明度，影响所有在Panel下面的Widget。可以用它来淡出整个窗口。

□ Clipping：Panel会根据Dimensions自动剪裁它的所有子节点。

□ Normals：UI需要被灯光影响。

□ Cull：减少三角形的数目，这样也可能降低性能。

□ Static：Panel下面的Widget不会被移动，这样可以提高性能。

2.1.5 UI Button的概念

UI Button（按钮）是一个比较常用的组件。通常用鼠标可以完成移进、移出、按下等操作。如果使某一个对象可以通过鼠标来调用事件，可以在对象上再附加上Box Collider和UI Button组件，如图2-5所示。

2.1.6 UI Grid的概念

下面看看Grid组件。当需要对多个UI进行排列时就要用到这个组件了。一般不会直接添加一个Grid对象（因为Grid对象需要依靠父级对象来确定大小，自身是不能设定尺寸的），而是先创建一个UI对象，再在该对象下创建Grid组件，最后把需要排序的组件拖入该Grid中即可。如图2-6所示是UI Grid组件的属性。

□ Arrangement：网格排列方向，包括Horizontal（水平排列）、Vertical（垂直排列）、Cell Snap（按子项当前的位置对齐子项）。

□ Cell Width：子项格子宽度。

□ Cell Height：子项格子高度。

□ Row Limit：子项最大数量。

□ Sorting：排序方式。None，按照Index排序；Alphabetic，按照名字进行排序；Horizontal和Vertical按照Local Position进行排序；Custom则是自己实现的排序方式。

□ Pivot：网格起始点锚点。

2.1.7 UI Scroll View的概念

有时要显示的控件不能完整地显示，而是隐藏了一部分，为了查看完整的内容，需要为其添加Scroll View组件，这样可以像滚动视图拖动控件显示界面。UI Scroll View组件属性如图2-7所示。

□ Content Origin：控制panel相对的Scroll View的位置。

□ Movement：控制Scroll View滑动的方向。

□ Drag Effect：拖动的效果。

● Momentum And Spring：拖动到边界松开拖曳时会有弹出来的效果。

□ Scroll Wheel Factor：鼠标滑动滚轮速度。如果不让滚动面板通过鼠标滚轮滚动，可以设置为0。

□ Momentum Amount：滑动后，自动滑行的距离（控制什么时候开始拖动滚动视图，可以根据用户的需求调整这个值，来让它更灵敏或更不灵敏）。

□ Restric Within Panel：如果选中该复选框，则Panel不会滑出Scroll View。

□ Cancel Drag If Fits：当它适合视窗内时，则自动退出拖动。撤选该复选框，可以拖动内容到边界外，不过会有阻力；选中该复选框可以防止内容被拖出区域，并当它适合视窗内时，则会退出拖动，也就是不能拖动了。