NGUI工具使用示例

NGUI是Unity3D引擎上一个最常用的界面制作工具。

这份文档是NGUI插件官方13个例子的制作过程详解，是一份很全很难得的资料。

照着做完了的话，基本能掌握NGUI插件的大多数功能了。

NGUI例子制作过程，由笔者参照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。

记住该对象的深度应该比La bel要小，不然Label就会被覆盖而看不到。

这里设置label的深度（depth）为0，而sli cedsprite为-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写出来后，图片还得一张一张拷出来再贴上去。

由于时间仓促，未免有疏漏的地方，请各位灌水的同仁批评指正。

二、Example2 – Interaction其最终效果如图所示,当点击Show按钮时，窗口会过度到平躺位置，并出现两个立方体，这两个立方体当鼠标位于上面时，会出现按钮的onHover效果：1.新建一个场景，并把该场景中的MainCamera删除掉，并通过菜单中的NGUI->Create a new UI新建一个UI结构，如图所示：删除Anchor和UIRoot（3D），只留下Panel，并把Panel命名为Message Root，如图所示：在MessageRoot下，创建一个空游戏对象，并命名为3D UI，并reset它的所有变换，reset 这一步很重要，不然以后的GUI元素可能位置就不对了。

如图所示：首先先使用Create a widget工具创建一个Sprite，并命名为UISprite-Background，并在编辑窗口中调整它的大小，设置其深度为-5，该Sprite用于作为背景，其参数如图所示：在3D UI层级中，新建一个空游戏对象，并命名为Window，该对象用于整体调整下面GUI 的移动和旋转等。

如图所示：下面来制作Window中的各个元素。

首先创建背景。

使用Create a widget，使用UITiledSprite，该元素可以等你放大它的范围时，它会以平铺的方式显示，这样可以大大节省资源的体积。

该其参数如下：使用Create a Widget中的Sliced Sprite，创建标题栏，该元素可以在放大范围时，拉伸其背景。

创建好之后在编辑窗口中改变它的位置和大小，使其在窗口的顶端，其参数和效果如下：再为背景添加一个半透明的SlicedSprite，其参数和效果如下：创建一个Label，作为该窗口的标题，其参数和效果如下:创建一个Label，作为窗口中的文字说明，其参数和效果如下：创建一个按钮，命名为：button-show，设置该按钮的Label文字描述为Show，设置Background的颜色为深蓝色，调整它的位置和大小，最终效果如图所示：为该Button创建一个空的子物体，并命名为Animation，最后对该空物体添加一个Animation 组件（Component->Miscellaneous->Animation），并在project窗口中找到NGUI->Examples->Animations->Button，把该脚本添加到Animation组件中的Animation 中。

（这个Button的动画可以用于实现按钮在某种状态下的动画效果）接着把Button下面的Label和Background拖到Animation对象上，成为其子对象，如图所示：为Show按钮添加三个装饰图标，这三个图标都是Sprite元素，可以制作一个之后，使用Ctrl+D复制出另外两个，并设置它的位置和颜色，最后可以添加一个空的游戏对象，并命名为ICON，把这三个图标拖到ICON中，这样可以方便管理，其最终结果如图所示：复制该Button，并把该Button的Label文本设置成HIDE，命名为button-hide再把ICON 删除掉，调整它的位置，最终效果如图所示：现在，来完成当鼠标放置在按钮上面时，即onHover状态时，它的动画效果。

我们以Show 按钮为例子，Hide的设置类同。

选择Button-show，为该按钮添加一个UIButtonPlayAnimation组件（菜单中Component->NGUI->Interaction->Button Play Animation）。

添加之后，把该按钮下的Animation赋值给该组件中的Target变量，设置Trigger为OnHover，点击播放，当把鼠标放置在该按钮上时，可以看到已经有动画效果了，此时可以对比未对Hide按钮添加UIButtonPlayAnimation组件时的效果。

参数如图所示：对Button-hide按钮进行相同的操作。

接下来，完成窗口的变换（移动和旋转），使其当点击show按钮时，窗口平躺下来。

新建两个空游戏对象，并命名为WindowActive和WindowInactive，这两个对象只包含了对象的变换信息（平移、旋转和缩放）。

我们将用这个两个空游戏对象的变换信息来制作窗口在这两个位置间的平滑过渡。

首先把该两个游戏对象放置到3D UI对象下，成为它的子物体，然后把这两个对象reset一下，接着，调整WindowInactive的旋转角度和位置。

而WindowActive 保持变换不变。

注意，此时当中的scale参数最好跟Window中的缩放一样，除非你要实现缩放效果，如图所示：选择Window对象，为其添加一个TweenTransform组件（Compoent->NGUI->Tween-> Transform），该组件可以根据两个Transform对象来在它们之间进行平滑过渡。

添加组件之后，把WindowActive和WindowInactive对象赋值给该组件下的From和To下，同时把给组件的Enable关掉，我们将使用Show按钮来控制它的打开，具体参数如下，如图所示：为Show按钮添加UIButtonTween组件（Component->NGUI->Interaction->Button Tween），该组件可以使得Target中的Tween类型的动画进行开关。

把Window对象赋值给该组件下的Target，并设置PlayDirection为Forward，Trigger为OnClick，If Disabled On Play为EnableThenPlay，表示当播放该动画时，启动Target中的Tween类型动画。

这个组件是关键。

点击播放，可以看到最终的效果，你可以在播放时，在没按下show按钮之前选择Window 组件，可以看到此时的TweenTransform组件是关闭的，当你按下show按钮之后，该组件被打开了，播放完之后，又被关闭。

现在来完成当点击Hide按钮时，窗口回到原来的位置，同样给该按钮添加一个UIButtonTween组件，把Window对象赋值给该组件下的Target，Trigger设置为OnClick，Play Direction设置为Reverse，If Disabled On Play设置为DoNothing。

完成之后，点击播放，查看效果，如图所示：以上几步就实现了官网上的Interaction中窗口位置的平滑变换效果。

关键是UIButtonTween和其他的Tween类型之间的连接。

最后，把摄像机调整到其他的角度，（没有怎么去考虑美术上面的东西，有点难看，呵呵）以上几步就实现了官网上的Interaction中窗口位置的平滑变换效果。