NGUI官网示例3--Menu讲解
zf223669
zf223669 25158 24
精华热门加亮 NGUI 2012-09-29 19:29
组图

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

    图片:1.png


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

    图片:2.png


    接下来,以前面的NGUI官网示例2-interaction-讲解的过程制作出该Window的界面(此处有点偷懒,不过步骤与上面的论坛一样,所以也省略了一些,而且再加上一个帖子的图片个数有限,所以尽量节约图片,这里给出地址http://game.ceeger.com/forum/read.php?tid=4179 ),如图所示:

    图片:3.png


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

    图片:12.png


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

    图片:4.png


     Panel-Option最后的效果,如图所示:

    图片:5.png


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

    图片:6.png


    接下来,为其添加一个Sprite背景和左边的Label,与以前面的NGUI官网示例2-interaction-讲解的过程制作出该Window的界面(此处有点偷懒,不过步骤与上面的论坛一样,所以也省略了一些,而且再加上一个帖子的图片个数有限,所以尽量节约图片,这里给出http://game.ceeger.com/forum/read.php?tid=4179 )最终的效果如图所示:

    图片:7.png


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

    图片:8.png


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

    图片:9.png


    选择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。如图所示:

    图片:13.png


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

    图片:14.png


    这样便大功告成了!点击运行试试看。总结上面的三个帖子,可以想象得出,使用NGUI制作动态的GUI非常方便,而且添加各种Widget的过程都很类似,可以举一反三。同时只要为某个按钮添加一个UIButton PlayAnimation组件,然后设置该组件,便可以控制已经加入Animation组件的动画,这些Animation可以使用Unity的曲线或者程序编写或者第三方软件来制作。并可以实现向前播放和反向播放等功能,并能够控制该Target的Enable。国庆中秋到了,估计这两天不会更新。预祝大家中秋国庆过得开心愉快!
     (浙江传媒学院-新媒体学院-数字游戏设计专业-张sir)
     
     
     
     
     
     
    分享:
    游客
    要评论请先登录 或者 注册
    24条回应 只看楼主 最新
    hawk 管理员 2012-09-29 22:03 1楼
    加油啊,继续写。
    屋脊屋脊 总版主 2012-09-29 23:10 2楼
    加油啊,继续写
    小胡子老头 学徒 2012-09-30 09:46 3楼
    继续关注中
    llw00549 学徒 2012-10-01 16:12 4楼
    谢谢大大的分享~
    dawei661 师者 2012-10-07 09:05 5楼
    支持 辛苦了
    0o_mu 学徒 2012-10-14 19:48 6楼
    嘿嘿 ~~谢谢~~我刚刚接触这个   因为有你的帮助~让我在龟速的学习之路上添加了助力~~~非常感谢
    wangyel1 大师 2012-10-24 12:48 7楼
    这个很帅,虽然“偷懒”,但依然详细,呵呵
    wangyel1 大师 2012-10-25 20:13 8楼
    如果按照例子中的ButtonPlayAnimation设置,感觉Panel-Main和Panel-Option中的Animation不用设置两个动画,因为Panel-Main只用到Window - Forward,则可只设置Forward动画,而Panel-Option只用到 Window - Back则可只设置Back动画,运行时是一样的效果。
    不过设置两个动画的好处是可以设置其他的动画效果时用起来比较方便
    texfill 学徒 2012-11-07 13:22 9楼
    加油啊,继续写。
    1 2 3
    返回顶部