(搬运工)NGUI官网示例2-interaction-讲解(二)

  以上几步就实现了官网上的 Interaction 中窗口位置的平滑变换效果。关键是 UIButtonTween 和其他的 Tween 类型之间的连接。最后,把摄像机调整到其他的角度,(没有怎么去考虑美术上面的东西,有点难看,呵呵)如图所示:
(搬运工)NGUI官网示例2-interaction-讲解(二)_第1张图片
现在,来制作 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 中。最终效果如下,
(搬运工)NGUI官网示例2-interaction-讲解(二)_第2张图片
复制出另外一个立方体,并重新设置其他的From和To值。创建一个名称为Cubes的空对象,并把这两个Cube作为它的子物体。并把Cubes放置到3D UI对象下,这步虽然没什么作用,不过可以方便管理,让Hierarchy好看点。最后把Cubes的enable关掉,如图所示:
(搬运工)NGUI官网示例2-interaction-讲解(二)_第3张图片
接着,来完成当点击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->Pan with Camera)。添加完之后,点击播放试试,摄像机就活起来了。
最后再为该场景添加一个平行光,不然那两个立方体看起来就太无趣了。最终效果如下:
(搬运工)NGUI官网示例2-interaction-讲解(二)_第4张图片
 
还有最后一个东西,就是窗口左边的小图标,使用 Create a new Widget 工具创建一个 Sprite ,并把它放置到窗口的左上角,调整位置和角度,最后效果如下:
(搬运工)NGUI官网示例2-interaction-讲解(二)_第5张图片
ok。大功告成,天哪。论坛里面发图片真的很麻烦。。。格式可能有点乱了。请见谅。

你可能感兴趣的:((搬运工)NGUI官网示例2-interaction-讲解(二))