NGUI官网示例--讲解



NGUI 3.0.7 视频教程 http://v.youku.com/v_show/id_XNjc5OTY0NjAw.html 
                                http://v.youku.com/v_show/id_XNjc5OTYxNjMy.html 
                               http://v.youku.com/v_show/id_XNjc5OTU4MzU2.html 

NGUI例子制作过程，由笔者参照NGUI的例子重新自己做了一遍，以加深对NGUI用法的理解。 
一、Example 1 – UIAnchor 
该例子是演示NGUI中使用Anchor组件实现GUI对齐的功能。其最终效果如下： 
 
  
下面一步一步实现该例子。 
1.         删除新建的场景的Main Camera摄像机，在图层中新建一个GUI层，接着，选择菜单上的NGUI->Create a new UI,弹出该对话框，设置如图所示： 
 

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

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

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

5.            选中 offset ，选择菜单中的 NGUI-> Create new Widget ，弹出一个 Widget Tool 对话框，该对话框基本是用于制作按钮（ Buttom ）、标签（ 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.            其他的 7 个 Anchor 可以使用 Ctrl+D 复制出来，并更改 Anchor 的不同的方式来对齐到不同的位置上，并在编辑窗口中调整 offset 的位置，其结果如图所示：

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

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

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

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

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

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

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