NGUI官网示例6 – Draggable Window讲解(二)
zf223669
zf223669 30355 13
精华加亮 NGUI 2012-10-05 15:04
NGUI官网示例6 – Draggable Window讲解(一)http://game.ceeger.com/forum/read.php?tid=4243;ds=1
二、       制作gui的动态效果和拖拽功能

制作鼠标停留在按钮上时的按钮动态效果。创建一个空游戏对象,命名为animation,把它拖到Button-hello上,成为其子物体,把该按钮下面的两个子对象拖到Animation空对象上,成为它的子物体。并为Animation空对象添加一个Animation组件(Component->Miscellaneous->animation),添加完成之后,在该组件种的animation属性中的最右边小圆圈上点击,在弹出的对话框中选择button动画文件,该动画文件是在unity的animation曲线窗口中编辑保存的。把play automatically取消掉,最终如图所示:

图片:13.png


选择Button-hello,为其添加一个button play animation组件(Component->Ngui ->interaction->button play animation)。把该按钮下的animation对象拖到该组件的Target上,设置TriggerOnHover(当鼠标放置在该按钮上时,播放Target上的动画)。对Button-world进行同样的操作,最后点击播放,当鼠标放置在该按钮上时,就会播放按钮的动画了,如图所示:

图片:14.png


使用同样的方法制作checkbox的鼠标停留在上面时的效果,其结构和设置如图所示:

图片:15.png


OK。窗口中按钮和checkbox的鼠标停留效果就做好了。点击播放看看。
下面开始制作窗口的拖拽效果,其中还三个辅助功能,一个是摄像机跟随(CameraYaw)、移动延迟(LagPosition)以及窗口摇摆(DragTile)。首先来实现窗口的拖拽功能。因为我们希望当鼠标在窗口的标题栏按下左键之后不放才可以拖动该窗口,所以我们选择该窗口的标题栏(SlicedSprite),为它添加一个DragObject组件(component->NGUI->Interaction->Drag Object),接着把window游戏对象赋值给该组件下的Target变量,点击运行之后,发现并没有任何反应,后来找了大半天,终于知道,我忘了给这个元件加一个碰撞盒,选择SlicedSprite,然后选择菜单中的NGUI->attach a collider(NGUI就是通过碰撞盒中的触发器方式来进行输入监听的),结果如图所示:现在点击播放,可以发现,窗口可以被拖动了。

图片:16.png


实现窗口拖动的三个辅助功能,也就是让它的运动更加灵活,而不死板。首先来实现它的延迟移动效果。创建一个空的游戏对象,并把它命名为LagPosition,把它拖到Window对象下,成为window的子物体,reset一下,再把Panel作为LagPosition子物体。接着为LagPosition添加一个LagPosition组件(Component->NGUI->Example ->Lag Position)。你现在点击播放,然后鼠标以较快的速度拖动窗口,会发现,窗口会以一种组件靠近目前鼠标位置的方式运动。如图所示:

图片:17.png


实现摄像机的跟随变换。创建一个空的游戏对象,命名为Yaw,把他拖动到LagPosition下,reset一下,再把Panel作为它的子对象。接着为Yaw对象添加一个WindowAutoYaw组件(Component-> NGUI->Example->Window Auto Yaw)。现在点击播放,可以发现,摄像机会自动地进行Yaw操作。参数和结构如图所示:

图片:18.png


 最后,实现窗口的摇摆效果。创建一个新的空游戏对象,命名为DragTile,并把它作为LagPosition的子物体,reset一下,接着把Panel拖到DragTile成为它的子物体。接着,为DragTile对象添加一个Window Drag Tile组件(Component->NGUI->Example ->Window Drag Tile)。其参数和结构如图所示:

图片:19.png


大家发现,现在三个辅助效果都是同时更新,现在我们按照一定的次序来安排更新效果,在Lag PositionWindow Auto YawDragTile中都有一个Update Order属性,用来控制其更新次序的,数字越大,更新排序越后。我们设置Lag Position1Window Auto Yaw2DragTile3。这样重新播放,可以看起来,更加自然了。

图片:20.png


 实现Checkbox控制WindowAutoYawDragTile的开关。选择Checkbox-Yaw,为其添加一个Checkbox Controlled ComponentComponent->NGUI->Interaction-> Check box Controlled Component)。再把Yaw对象赋值给其中的Target中。这个组件可以控制Target对象中的组件的开关。接着,对CheckBox-Tile进行相同的操作,只是把Target赋值为DragTile。最后如图所示:

图片:21.png


这样,窗口的拖动效果就大功告成了!
三、       制作灯光效果

最后就是为它添加效果,美化一下。
创建一个点光源,设置它的Range0.3Color为黑色,Intensity8。把PointLight成为Button-Hello按钮下Background的子物体,并reset一下位置,接着再把它的位置放在按钮前面。如图所示:

图片:22.png


 Button-Hello按钮添加一个Button Color组件(Component->NGUI->Interaction-> Button Color)。接着把pointlight赋值给Target,同时把Press后面的颜色换成黑色。其中Target用于确定需要控制的对象,Hover表示该对象当鼠标放在该按钮上时被控制对象的最终颜色,Press表示该对象被按下时该被控制对象最后的颜色。现在点击播放,可以看到其最后的效果。对Button-World按钮进行同样的操作,只是pointlight的位置放在button-World上面而已。如图所示:

图片:23.png


 制作Logo的流光效果。创建一个空的游戏对象,并命名为Logo,拖到Panel下,成为其子对象,并调整到窗口中logo的中心位置,接着,把SpriteNGUI)拖到它的下面,成为Logo对象的子对象。接着创建一盏点光源,并把它放到Logo下,同样成为它的子对象,接着调整灯光的位置。

图片:24.png

为灯光添加一个Animation组件(Component->Miscellaneous->Animation),并把该组件中的Animation属性设置为Logo动画文件(这个动画文件可以通过动画曲线编辑窗口进行创建,见lights and Refraction讲解 http://game.ceeger.com/forum/read.php?tid=4226),同时关闭该组件,接着为灯光添加一个Active Animation组件(Component->Ngui->Internal->Active Animation,同样把该组件关闭。把灯光的颜色和范围设置如下,如图所示:

图片:25.png


选择Logo对象,在菜单栏中选择NGUI -> Attach a Collider,为其添加一个碰撞盒,接着为它添加一个Button Play Animation组件(Component->NGUI->Interaction-> button play animation)。把target属性设置成point light,也就是logo上面的那个点光源,接着Trigger设置成OnHoverTrue。点解播放,ok,完成!如图所示:

图片:26.png


 最后为它添加一个修饰作用的背景。选择Create a new Widget窗口,在template属性中选择Simple Texture。点击Add to,为其添加一个简单的材质元件。接着把该元件拖到Camera下面,成为其子物体,接着,把backdrop材质球赋值给该元件下面的Material中。最后调整这个元件的位置和缩放。最后效果如图所示:

图片:27.png


 http://game.ceeger.com/forum/read.php?tid=4244;ds=1
 
在这里做过小广告,呵呵,我是浙江传媒学院新媒体学院数字游戏设计专业的老师,目前我们培养的学生都是往数字游戏设计方向发展的,而且以unity3D作为游戏引擎工具,下半年我们将引进UDK虚幻引擎,如果有需要该方面的人才,可以跟我联系。谢谢帮忙,这也是为学生找找工作!
分享:
游客
要评论请先登录 或者 注册
13条回应 只看楼主 最新
zx20107 学徒 2012-10-05 20:43 1楼
很棒的教學~~感謝分享
lanneret 学者 2012-10-06 12:27 2楼
   
ly774508966 论坛版主 2012-10-07 10:55 3楼
支持!
youyouyou__ 新手 2012-10-16 19:15 4楼
老师讲的好、、、、
0o_mu 学徒 2012-10-17 11:40 5楼
谢谢~~~学了很多~
wangyel1 大师 2012-10-28 22:24 6楼
这个较复杂,谢谢总结分享
教程里面Window Drag Tile的Tile应该是Tilt

夢醒今朝 新手 2012-10-31 15:27 7楼
讲的很好,非常感谢。
另外有个疑问,我做出来以后,窗口拖拽后会留下影子。。。这是怎么回事啊。
liamzhu 学者 2012-10-31 17:12 8楼
GlorySimba 学徒 2013-04-08 17:17 9楼
夢醒今朝:讲的很好,非常感谢。
另外有个疑问,我做出来以后,窗口拖拽后会留下影子。。。这是怎么回事啊。
回到原帖
设置camera的clear flags为skybox
1 2
返回顶部