NGUI官网示例2-interaction-讲解(一)
zf223669
zf223669 43519 40
精华热门加亮 NGUI 2012-09-29 11:49
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用法的理解。(建议先看下官网的基础教程,对NGUI有初步了解之后,再看这个帖子。)
二、Example2 – Interaction
其最终效果如图所示,当点击Show按钮时,窗口会过度到平躺位置,并出现两个立方体,这两个立方体当鼠标位于上面时,会出现按钮的onHover效果:

图片:1.png



1.         新建一个场景,并把该场景中的MainCamera删除掉,并通过菜单中的NGUI->Create a new UI新建一个UI结构,如图所示:

图片:2.png


删除AnchorUIRoot3D),只留下Panel,并把Panel命名为Message Root,如图所示:

图片:3.png


MessageRoot下,创建一个空游戏对象,并命名为3D UI,并reset它的所有变换,reset这一步很重要,不然以后的GUI元素可能位置就不对了。如图所示:

图片:4.png


首先先使用Create a widget工具创建一个Sprite,并命名为UISprite-Background,并在编辑窗口中调整它的大小,设置其深度为-5,该Sprite用于作为背景,其参数如图所示:

图片:5.png


3D UI层级中,新建一个空游戏对象,并命名为Window,该对象用于整体调整下面GUI的移动和旋转等。如图所示:

图片:6.png


下面来制作Window中的各个元素。首先创建背景。使用Create a widget,使用UITiledSprite,该元素可以等你放大它的范围时,它会以平铺的方式显示,这样可以大大节省资源的体积。该其参数如下:

图片:7.png



使用Create a Widget中的Sliced Sprite,创建标题栏,该元素可以在放大范围时,拉伸其背景。创建好之后在编辑窗口中改变它的位置和大小,使其在窗口的顶端,其参数和效果如下:

图片:8.png


再为背景添加一个半透明的SlicedSprite,其参数和效果如下:

图片:9.png


创建一个Label,作为该窗口的标题,其参数和效果如下:

图片:10.png


 创建一个Label,作为窗口中的文字说明,其参数和效果如下:

图片:11.png


  创建一个按钮,命名为:button-show,设置该按钮的Label文字描述为Show,设置Background的颜色为深蓝色,调整它的位置和大小,最终效果如图所示:

图片:12.png


为该Button创建一个空的子物体,并命名为Animation,最后对该空物体添加一个Animation组件(Component->Miscellaneous->Animation),并在project窗口中找到NGUI->Examples->Animations->Button,把该脚本添加到Animation组件中的Animation中。(这个Button的动画可以用于实现按钮在某种状态下的动画效果)接着把Button下面的LabelBackground拖到Animation对象上,成为其子对象,如图所示:

图片:13.png


Show按钮添加三个装饰图标,这三个图标都是Sprite元素,可以制作一个之后,使用Ctrl+D复制出另外两个,并设置它的位置和颜色,最后可以添加一个空的游戏对象,并命名为ICON,把这三个图标拖到ICON中,这样可以方便管理,其最终结果如图所示:

图片:14.png


复制该Button,并把该ButtonLabel文本设置成HIDE,命名为button-hide再把ICON删除掉,调整它的位置,最终效果如图所示:

图片:15.png


现在,来完成当鼠标放置在按钮上面时,即onHover状态时,它的动画效果。我们以Show按钮为例子,Hide的设置类同。选择Button-show,为该按钮添加一个UIButtonPlayAnimation组件(菜单中Component->NGUI->Interaction->Button Play Animation)。添加之后,把该按钮下的Animation赋值给该组件中的Target变量,设置TriggerOnHover,点击播放,当把鼠标放置在该按钮上时,可以看到已经有动画效果了,此时可以对比未对Hide按钮添加UIButtonPlayAnimation组件时的效果。参数如图所示:

图片:16.png


Button-hide按钮进行相同的操作。
接下来,完成窗口的变换(移动和旋转),使其当点击show按钮时,窗口平躺下来。新建两个空游戏对象,并命名为WindowActiveWindowInactive,这两个对象只包含了对象的变换信息(平移、旋转和缩放)。我们将用这个两个空游戏对象的变换信息来制作窗口在这两个位置间的平滑过渡。首先把该两个游戏对象放置到3D UI对象下,成为它的子物体,然后把这两个对象reset一下,接着,调整WindowInactive的旋转角度和位置。而WindowActive保持变换不变。注意,此时当中的scale参数最好跟Window中的缩放一样,除非你要实现缩放效果,如图所示:

图片:17.png


 选择Window对象,为其添加一个TweenTransform组件(Compoent->NGUI->Tween-> Transform),该组件可以根据两个Transform对象来在它们之间进行平滑过渡。添加组件之后,把WindowActiveWindowInactive对象赋值给该组件下的FromTo下,同时把给组件的Enable关掉,我们将使用Show按钮来控制它的打开,具体参数如下,如图所示:

图片:18.png


 Show按钮添加UIButtonTween组件(Component->NGUI->Interaction->Button Tween),该组件可以使得Target中的Tween类型的动画进行开关。把Window对象赋值给该组件下的Target,并设置PlayDirectionForwardTriggerOnClickIf Disabled On Play EnableThenPlay,表示当播放该动画时,启动Target中的Tween类型动画。这个组件是关键。点击播放,可以看到最终的效果,你可以在播放时,在没按下show按钮之前选择Window组件,可以看到此时的TweenTransform组件是关闭的,当你按下show按钮之后,该组件被打开了,播放完之后,又被关闭。
 
现在来完成当点击Hide按钮时,窗口回到原来的位置,同样给该按钮添加一个UIButtonTween组件,把Window对象赋值给该组件下的TargetTrigger设置为OnClickPlay Direction设置为ReverseIf Disabled On Play设置为DoNothing。完成之后,点击播放,查看效果,如图所示:

图片:19.png


图片:20.png


 
  以上几步就实现了官网上的Interaction中窗口位置的平滑变换效果。关键是UIButtonTween和其他的Tween类型之间的连接。最后,把摄像机调整到其他的角度,(没有怎么去考虑美术上面的东西,有点难看,呵呵)如图所示:(完了,图片资源用完了,重新起一个帖子)http://game.ceeger.com/forum/read.php?tid=4180
 (浙江传媒学院-新媒体学院-数字游戏设计专业-张sir)
分享:
游客
要评论请先登录 或者 注册
40条回应 只看楼主 最新
翾辰 学徒 2012-09-29 12:12 1楼
写的很详细 支持一个!
zhengjun_025 学徒 2012-10-03 11:18 2楼
详细 O(∩_∩)O谢谢
wyh880123 学徒 2012-10-13 10:09 3楼
很感谢
0o_mu 学徒 2012-10-13 15:23 4楼
谢谢~~~~~~~~~幸苦了~~~~~
0o_mu 学徒 2012-10-14 12:50 5楼
不好意思~想问您一下~版本原因  在您说给button-show添加UIButton Play Animation这个组件之后把他的Enable关掉     可是   我怎么都找不着吖    菜鸟   求帮助~
zolroom 学徒 2012-10-15 13:10 6楼
回 0o_mu 的帖子
0o_mu:不好意思~想问您一下~版本原因  在您说给button-show添加UIButton Play Animation这个组件之后把他的Enable关掉     可是   我怎么都找不着吖    菜鸟   求 .. (2012-10-14 12:50) 

你是找不到什么呀。
socxuli 新手 2012-10-17 20:11 7楼
摄像头怎么调整啊运行后画面出不来了
wll123321 学徒 2012-10-20 02:22 8楼
人才啊 人才啊
buhui 新手 2012-10-23 16:02 9楼
NGUI->Examples->Animations->Button这个选项在哪,表示没找到
1 2 3 4 ...5
返回顶部