【转载】NGUI Example5 示例讲解– Lights and Refraction

艾西格亚

（浙江传媒学院-新媒体学院-数字游戏设计专业-张sir）



NGUI这个系统是在是牛，比unity3d里面自带的gui要好用得多，还可以为GUI添加法线贴图！哈哈。虽然在EZgui里面也可以。



接下来的例子，我不在使用它自己的例子了。因为重复性劳动太多，大家看了也烦。我就说说如何给它加入法线贴图，并实现动画的简单例子。



创建一个Simple2D NGUI结构，如图所示：





创建一个Sprite，其参数如图所示：





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





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





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





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





在第零帧添加一个X轴的关键帧，如图所示：





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





关闭Animation窗口，这样，点光源就完成了移动动画的制作，当然，你也可以同时给它光照强度，颜色等的动画。最后，在点光源中把Animation组件关闭，我们用button play animation组件来触发给动画。



选择Sprite，在NGUI菜单中选择Attach a collider，如图所示：





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





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





这样，只要你能想到的，基本能够实现！！！

may

支持楼主的帖子