NGUI官网示例--讲解

NGUI 例子制作过程，由笔者参照 NGUI 的例子重新自己做了一遍，以加深对 NGUI 用法的理解。
一、Example 1 – UIAnchor
该例子是演示 NGUI 中使用 Anchor 组件实现 GUI 对齐的功能。其最终效果如下：

图片:1.png

下面一步一步实现该例子。
1.          删除新建的场景的 Main Camera 摄像机，在图层中新建一个 GUI 层，接着，选择菜单上的 NGUI->Create a new UI, 弹出该对话框，设置如图所示：

图片:2.png

2.         最后点击 Create Your UI 按钮，可以在 Hierachy 窗口中自动生成下面的树状结构：

图片:3.png

3.         把 Panel 的父物体改成 Anchor ，如图所示：

图片:4.png

4.         把该 Anchor 命名为 Anchor-Bottom ，并为该对象添加一个空游戏对象，并命名为 offset ，并 reset 它的变换。该空游戏对象可以用于它下面子对象与该 Anchor 之间的偏移量。如图所示：

图片:5.png

5.         选中 offset ，选择菜单中的 NGUI-> Create new Widget ，弹出一个 Widget Tool 对话框，该对话框基本是用于制作按钮（ Buttom ）、标签（ Label ）等部件的对话框。设置其参数之后，并点击 Add To 按钮，确保该按钮后面的对象是 offset 。这就在 offset 下生成一个 Label 便签，并把标签的文本改成 Bottom ，如图所示：

图片:6.png

图片:7.png

6.         以同样的方法在 offset 中添加一个 slicedsprite 。记住该对象的深度应该比 Label 要小，不然 Label 就会被覆盖而看不到。这里设置 label 的深度（ depth ）为 0 ，而 slicedsprite 为 -1 ，并在编辑器中调节该元素的大小，如图所示：

图片:8.png

图片:9.png

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

图片:10.png

8.         其他的 7 个 Anchor 可以使用 Ctrl+D 复制出来，并更改 Anchor 的不同的方式来对齐到不同的位置上，并在编辑窗口中调整 offset 的位置，其结果如图所示：

图片:11.png

9.         最后来制作其背景，新建一个空的游戏对象，并最后 Panel 的子物体，并 reset 它的变换。命名为 Anchor-background ，并在 NGUI 菜单中，选择 Attach an Anchor ，此时该空游戏对象就成为了一个 Anchor ，并设置对齐方式为 center 。

图片:13.png

10.     接着以 Anchor-backgournd 作为父物体，新建一个名为 window 的空游戏对象，如图所示， window 游戏对象只是为了方便管理而设置的一个辅助对象而已。

图片:12.png

图片:15.png

11.     在 window 下面，使用 Create Widget 面板创建一个 slicedSprite, 其参数如下：

图片:13.png

12.     在编辑窗口中缩放该对象，使其对齐到窗口，并把其深度（ Depth ）设置成 -2 。最终效果如下：

图片:14.png

13.      接下来，给他添加一个多行 Label ，同样使用 createWidget 对话框，其参数如下：

图片:16.png

14.     在其文本内容框中写入需要的文字，当然，因为现在使用的是英文字体，所以中文是显示不出来的，如图所示，并把深度（ depth ）改为 -2 ，把 Line Width 设置成 500 ，可以设置显示每行文字的宽度。如图所示：

图片:17.png

在官方的该例子中，还有上面一个标题，其实也是有一个 Label 和一个 slicedSprite 组成的，所以，这里不再阐述。下面的几个例子将视时间创作，论坛发文章还真有点难度，尤其是用word写出来后，图片还得一张一张拷出来再贴上去。由于时间仓促，未免有疏漏的地方，请各位灌水的同仁批评指正。