纳金网

标题: 【转载】NGUI示例2 - interaction - 讲解（二） [打印本页]

作者: 艾西格亚 时间: 2012-10-3 16:48
标题: 【转载】NGUI示例2 - interaction - 讲解（二）
（浙江传媒学院-新媒体学院-数字游戏设计专业-张sir）

以上几步就实现了官网上的Interaction中窗口位置的平滑变换效果。关键是UIButtonTween和其他的Tween类型之间的连接。最后，把摄像机调整到其他的角度，如图所示：

现在，来制作NUI按钮与场景中的对象的交互。首先，在场景中创建一个立方体，并为它赋予brick材质（在Project窗口中，NGUI->Example->Materials->brick）,为该立方体添加一个Spin组件（Component->Examples->Spin）,该脚本可以实现物体的旋转。再为其添加一个UIButtonScale组件（Component->Interaction->ButtonScale），该组件可以实现当鼠标位于该物体上面时，对该物体进行缩放。最后为其添加一个TweenPosition组件（Component->Tween->position）,设置其Method为EaseInOut，Duration为0.5，From为起始位置，To为最终位置，这两个位置根据你需要制作的位置不同而不同，你可以通过在编辑器中拖动该物体，然后确定该位置，并记录下来，输入到From和To中。最终效果如下:

复制出另外一个立方体，并重新设置其他的From和To值。创建一个名称为Cubes的空对象，并把这两个Cube作为它的子物体。并把Cubes放置到3D UI对象下，这步虽然没什么作用，不过可以方便管理，让Hierarchy好看点。最后把Cubes的enable关掉，如图所示：

接着，来完成当点击show按钮时，立方体出现，并平滑平移到设置的位置。选择show按钮，为其添加一个UIButtonTween，方法与第19步相同，接着，把Cubes赋值给Tween Target，Trigger为OnClick，PlayDirection为Forward，If Disable On Play为EnableThenPlay。再同样设置Hide按钮，过程与第20步相同，只是把TweenTarget改成Cubes而已，并把Disable When Finished设置成DisableAfterReverse，呵呵，一看就知道什么意思，就是当播放完成之后，把TweenTarget中的对象关掉，并把IncludeChildren勾选上，不然只会作用到父物体上，而子物体的动画就播不了了。

这样，就差不多大功告成了。现在，为摄像机添加一个鼠标摆动动画，选择摄像机之后，给它添加一个PanWithMouse（Component->NGUI->Example->

an with Camera）。添加完之后，点击播放试试，摄像机就活起来了。

最后再为该场景添加一个平行光，不然那两个立方体看起来就太无趣了。最终效果如下：

还有最后一个东西，就是窗口左边的小图标，使用Create a new Widget工具创建一个Sprite，并把它放置到窗口的左上角，调整位置和角度，最后效果如下：

作者: may 时间: 2012-11-30 21:43
支持楼主的帖子

作者: forlio 时间: 2013-7-30 14:43
认真研读过了，学习NGUI中~

作者: 幸福小猪 时间: 2013-10-28 10:27
感谢楼主分享~

作者: orokborokhulu 时间: 2013-10-28 23:06
thanks for sharing

欢迎光临纳金网 (http://rs.narkii.com/club/)