NGUI 3.0.x官网示例5 lights and Refraction

NGUI 3.0.x官网示例5  lights and Refraction

这个例题从标题上就可以看出来是光与法线贴图的教程。这个教程里需要涉及到新的概念：
1）法线贴图效果



法线贴图----法线贴图是一种含有高度信息的纹理贴图，利用RGB颜色记录高度信息。这跟我们接触到的高度图概念类似。法线贴图Unity可以通过自己的算法制作，但是并不推荐，因为不准。一般而言法线贴图都是从美术那里获取的。
创建一个Simple2D NGUI结构，如图所示：

创建一个Sprite，其参数如图所示(注意：Atlas资源选择的是Refractive，这个资源里包含了法线信息)：

更多精彩图片 请登录

接着，选择Panel，在里面把Normals打开（关键，不然法线效果不出来），再为场景打一盏平行光。这样法线贴图的效果就出来了：

更多精彩图片 请登录

如图，现在来创建一个当鼠标放在图标上时，一个点光源从左向右移动的效果。利用三维设计软件为场景创建一个点光源，把它放在sprite的左边，如图所示：

更多精彩图片 请登录

选择该点光源，打开动画窗口（window->Animation）,如图所示：

更多精彩图片 请登录

点Add Curve为动画编辑增加一个动画曲线，这个时候弹出对话框，保存动画文件、我们选择Transform中的Position后面的+，为动画曲线增加一个平移的动画轨迹。

更多精彩图片 请登录

点击该窗口左上角的红色圆点图标，开始录制，点光源自动添加了一个Animation组件，如图所示：

更多精彩图片 请登录

点中动画曲线中的关键帧，然后拖动场景中的灯光到新的位置，调整灯光的强度，修改灯光的颜色，修改灯光是否可见，这样在第一帧动画就会自动记录下来你的操作。

更多精彩图片 请登录

移动红色的动画标杆到新的位置，重复上面的操作，这样动画编辑器就会自动增加新的关键帧并且添加新的数据记录。
这个时候运行游戏动画就会自动播放，那么将灯光中的Animation组件中的Play Automatically的勾去掉。
2）为动画做触发机制
选择Sprite，在NGUI菜单中选择Attach a collider，如图所示：

更多精彩图片 请登录

再给sprite添加一个Button Play Animation组件（Component->NGUI->Interaction->Button Play Animation）,并设置其参数如下：

更多精彩图片 请登录

其中Target是刚才的点光源，Trigger方式选择OnHnverTrue。
运行程序，就可以看到，鼠标移到空间上灯光动画就会播放。

更多精彩图片 请登录

回帖奖励！

感谢楼主分享！！

不明觉厉  看一看！

不明觉厉  看一看！ 厉害厉害...

笔记。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。牛

界面出三维效果吗？

好东东 支持了

多谢分享

元素那么大，我想来看看！

国务院：严打侵权行为 推动游戏业发展

楼主好评

NGUI 3.0.x官网示例5  lights and Refraction

不错哦！！！！！！！！！！！！！！！！！

{:1_141:}

谢谢分享

谢谢分享