NGUI Example5 示例讲解– lights and Refraction
zf223669
zf223669 12550 16
精华热门加亮 NGUI 2012-10-03 23:37
NGUI Example5 – lights and Refraction
       NUI这个系统是在是牛,比unity3D里面自带的gui要好用得多,还可以为GUI添加法线贴图!哈哈。虽然在EZgui里面也可以。
接下来的例子,我不在使用它自己的例子了。因为重复性劳动太多,大家看了也烦。我就说说如何给它加入法线贴图,并实现动画的简单例子。
1.         创建一个Simple2D NGUI结构,如图所示:

图片:1.png


 
1.         创建一个Sprite,其参数如图所示:

图片:2.png



1.         接着,选择Panel,在里面把Normals打开(关键,不然法线效果不出来),再为场景打一盏平行光。这样法线贴图的效果就出来了,如

图片:3.png


1.         现在来创建一个当鼠标放在图标上时,一个点光源从左向右移动的效果。为场景创建一个点光源,把它放在sprite的左边,如图所示:

图片:4.png


1.         选择该点光源,打开动画窗口(window->Animation,如图所示:

图片:5.png



1.         点击该窗口左上角的红色圆点图标,开始录制,此时会弹出保存动画文件的窗口,为它起名为LightMove,点击保存之后,大家会发现,点光源自动添加了一个Animation组件,如图所示:

图片:6.png


1.         在第零帧添加一个X轴的关键帧,如图所示:

图片:7.png



1.         把播放光标拖到1秒钟处,再添加一个关键帧,在场景编辑窗口中,把点光源移动到sprite的右边,此时,Animation窗口会把此变换记录在1秒钟的关键帧中。如图所示:

图片:8.png


1.         关闭Animation窗口,这样,点光源就完成了移动动画的制作,当然,你也可以同时给它光照强度,颜色等的动画。最后,在点光源中把Animation组件关闭,我们用button play animation组件来触发给动画。
2.         选择Sprite,在Nui菜单中选择Attach a collider,如图所示:

图片:9.png



1.         再给sprite添加一个Button Play Animation组件(Component->NGUI->Interaction->Button Play Animation,并设置其参数如下:

图片:10.png


哈哈,点击播放,看看。大功告成!帅!在改例子中,关键是使用了refraction altas,打开这个altas可以看到,它采用了法线贴图来实现效果,如图所示

图片:11.png

图片:12.png



这样,只要你能想到的,基本能够实现!!!
 
 (浙江传媒学院-新媒体学院-数字游戏设计专业-张sir)
分享:
游客
要评论请先登录 或者 注册
16条回应 只看楼主 最新
d_kb@live.cn 学徒 2012-10-04 22:09 1楼
真心感谢楼主的坚持~~~
楼主值得学习~~
zf223669 学者 2012-10-04 22:51 2楼
回 d_kb@live.cn 的帖子
d_kb@live.cn:真心感谢楼主的坚持~~~
楼主值得学习~~  (2012-10-04 22:09) 

哈哈。谢谢鼓励。作为老师,传播已经获得的知识是天经地义的。
ychng 学徒 2012-10-05 08:27 3楼
出到第五個範例了 多謝樓主的分享
emaxya 论坛版主 2012-10-05 16:49 4楼
这教程的效果很不错,推荐学习
ly774508966 论坛版主 2012-10-07 10:50 5楼
不错,给力啊,做个老师真好!
0o_mu 学徒 2012-10-16 18:19 6楼
嘿嘿~看每一个教程都收获很多~很多~~谢谢~
wangyel1 大师 2012-10-26 10:14 7楼
这个效果很炫
夢醒今朝 新手 2012-10-31 11:23 8楼
感谢楼主!!!!!!!!!
木木 新手 2012-12-28 23:05 9楼
很高兴,我也跟到第五讲了。把视频教程看完,再来看这个,真的容易了很多,前面那个各种写代码。。这NGUI看起来这么小,真能学好也相当难啊,不过尽量多学一点!争取这几天把全部教程学一遍。 继续支持! 希望以后也出出视频呀,那个更加直观,也可以让更多人学习到。
1 2
返回顶部