NGUI官网示例详解

一、Example 1 – UIAnchor

该例子主要演示了在NGUI中使用Anchor组件实现GUI对齐的功能，下面将逐步介绍该例子的实现步骤。

1. 前期准备

删除新建场景中的Main Camera摄像机，在图层中新建一个GUI层。接着，选择菜单上的“NGUI -> Create a new UI”，在弹出的对话框中进行相应设置。

2. 创建UI

点击“Create Your UI”按钮，此时在Hierarchy窗口中会自动生成相应的树状结构。

3. 修改父物体

将Panel的父物体改为Anchor，具体操作可参考对应图示。

4. 创建偏移对象

把该Anchor命名为“Anchor - Bottom”，并为该对象添加一个空游戏对象，命名为“offset”，然后重置它的变换。这个空游戏对象可用于设置其下面子对象与该Anchor之间的偏移量。

5. 创建标签

选中“offset”，选择菜单中的“NGUI -> Create new Widget”，会弹出一个Widget Tool对话框，该对话框主要用于制作按钮（Button）、标签（Label）等部件。设置好参数后，点击“Add To”按钮，确保该按钮后面的对象是“offset”。这样就在“offset”下生成一个Label标签，并将标签的文本改成“Bottom”。

6. 添加切片精灵

以同样的方法在“offset”中添加一个slicedSprite。需要注意的是，该对象的深度应该比Label小，否则Label会被覆盖而无法显示。这里设置Label的深度（depth）为0，而slicedSprite为 -1，并在编辑器中调节该元素的大小。

7. 设置对齐方式

选择“Anchor - Bottom”，将该元素的对齐方式（side）设置为“Bottom”。设置之后，它会自动对齐到摄像机的最低端，我们可以通过“offset”来调节该元件和Anchor之间的偏移量。

8. 复制并调整Anchor

使用Ctrl + D复制出7个Anchor，并更改Anchor的不同对齐方式，使其对齐到不同的位置，同时在编辑窗口中调整“offset”的位置。

9. 创建背景Anchor

新建一个空的游戏对象，将其作为Panel的子物体，然后重置它的变换，命名为“Anchor - background”。在NGUI菜单中，选择“Attach an Anchor”，此时该空游戏对象就成为了一个Anchor，并将对齐方式设置为“center”。

10. 创建辅助对象

以“Anchor - background”作为父物体，新建一个名为“window”的空游戏对象，“window”游戏对象是为了方便管理而设置的辅助对象。

11. 创建切片精灵

在“window”下面，使用“Create Widget”面板创建一个slicedSprite，并设置相应的参数。

12. 缩放并设置深度

在编辑窗口中缩放该对象，使其对齐到窗口，并将其深度（Depth）设置为 -2。

13. 添加多行标签

使用“Create Widget”对话框添加一个多行Label，并设置相应的参数。

14. 设置标签内容和属性

在其文本内容框中写入需要的文字。由于当前使用的是英文字体，中文可能无法显示。将深度（depth）改为 -2，把“Line Width”设置为500，这样可以设置显示每行文字的宽度。

在官方的该例子中，上方还有一个标题，它是由一个Label和一个slicedSprite组成的，这里不再详细阐述。