NGUI官网示例3--Menu讲解

Admin

NGUI例子制作过程，由笔者参照NGUI的例子重新自己做了一遍，以加深对NGUI用法的理解。（建议先看下官网的基础教程，对NGUI有初步了解之后，再看这个帖子。）该贴需要前面我写的内容，请有兴趣的童鞋先熟悉前面的做法，再看本帖。哈哈
Example3-Menu
其最终效果是窗口中的Label文字出现打字效果，当按下Options按钮时，两个窗口会来回切换，如图所示：

1.         按照前面三个帖子的前几步，制作出基本的Advanced3D类型的UI，并把Panel重命名为Panel-Main，并为其添加一个空的游戏对象，命名为Window，最后reset下那个Window空对象，如图所示：

接下来，以前面的NGUI官网示例2-interaction-讲解的过程制作出该Window的界面（此处有点偷懒，不过步骤与上面的论坛一样，所以也省略了一些，而且再加上一个帖子的图片个数有限，所以尽量节约图片，这里给出地址 NGUI官网示例2- 三维立体窗体 interaction-讲解），如图所示：


同时，为Panel-Main中的文字Label添加一个TypewriterEffect组件，这样一步就能实现打字效果，可以点击运行试试看。是不是很帅！

接着复制一个Panel-Main，并改名为Panel-Option，并把其中的元素进行调整，并使用Create a new Widget添加拖动条，checkbox，下拉菜单等。这里讲下下拉菜单的制作，该步骤与添加其他的Widget一样，只是在参数中，可以使用该组件中的Option参数设置下拉菜单的内容，其中左边的图，Difficulty只是一个空的游戏对象，里面包括了一个自己创建的Label和一个PopupList，在左边的Options参数中设置了四个选项，前面中括弧括起来的是该选项的颜色，如图所示：

Panel-Option最后的效果，如图所示：

设置完成之后，把该Panel-option的z轴的值设置成1400，并把它的enable关掉，如图所示：

接下来，为其添加一个Sprite背景和左边的Label，与以前面的NGUI官网示例2-interaction-讲解的过程制作出该Window的界面（此处有点偷懒，不过步骤与上面的论坛一样，所以也省略了一些，而且再加上一个帖子的图片个数有限，所以尽量节约图片，这里给出NGUI官网示例2- 三维立体窗体 interaction-讲解 ）最终的效果如图所示：


  在Panel-Option中，为其添加一个Animation组件（Component->Miscellaneous-> Animation），并把Animation的变量设置成Window-back动画和Window-forward动画（点击该变量最右边的小圆圈，可以出现左边的窗口），把Play Automatically关掉，如图所示：

使用同样的方法，在Panel-Main中，也添加一个Animation组件（Component->Miscell aneous->Animation），并在Animation变量中设置为Window-back和Window-forward动画，如图所示：

选择Button-Option按钮，为其添加两个（菜单中Component->NGUI->Interaction->Button Play Animation），在第一个组件中，设置Target为Panel-Options（Animation）直接把Panel-Options拖到里面就好了，Clip Name输入Window-Back，这个是关键（记得刚才设置两个window都设置了两个动画吧，这个用来播放其中的一个动画，只要动画的名称不出错）。Trigger为OnClick，PlayDirection为Reverse（动画播放翻转，也就是倒着播放动画）, If Disabled On Play 设置为EnableThenPlay（被控制的对象的Enable打开并开始播放加在在此对象上的对象），Disable when Finished为DisableAfterForward（当前向播放完成后，关闭对象的Enable）；在另外一个组件中，设置Target为Panel-Main(需要控制的动画对象)，Trigger为On Click(点击时触发动画)，Clip Name输入Window-Forward，这个是关键。If Disabled On Player为EnableThenPlay，Disable When Finished为DisableAfterForward。如图所示：

选择Panel-Option中的Button-Done，也同样添加两个为其添加两个（菜单中Component->NGUI->Interaction->Button Play Animation），并设置如下的参数：如图所示：

这样便大功告成了！点击运行试试看。总结上面的三个帖子，可以想象得出，使用NGUI制作动态的GUI非常方便，而且添加各种Widget的过程都很类似，可以举一反三。同时只要为某个按钮添加一个UIButton PlayAnimation组件，然后设置该组件，便可以控制已经加入Animation组件的动画，这些Animation可以使用Unity的曲线或者程序编写或者第三方软件来制作。并可以实现向前播放和反向播放等功能，并能够控制该Target的Enable。