NGUI官网示例2-interaction-讲解（一）

NGUI 例子制作过程，由笔者参照 NGUI 的例子重新自己做了一遍，以加深对 NGUI 用法的理解。（建议先看下官网的基础教程，对 NGUI 有初步了解之后，再看这个帖子。）
二、 Example2 – Interaction
其最终效果如图所示 , 当点击 Show 按钮时，窗口会过度到平躺位置，并出现两个立方体，这两个立方体当鼠标位于上面时，会出现按钮的 onHover 效果：


1.           新建一个场景，并把该场景中的 MainCamera 删除掉，并通过菜单中的 NGUI->Create a new UI 新建一个 UI 结构，如图所示：

删除Anchor和UIRoot（3D），只留下Panel，并把Panel命名为Message Root，如图所示：

在 MessageRoot 下，创建一个空游戏对象，并命名为 3D UI ，并 reset 它的所有变换， reset 这一步很重要，不然以后的 GUI 元素可能位置就不对了。如图所示：

首先先使用 Create a widget 工具创建一个 Sprite ，并命名为 UISprite-Background ，并在编辑窗口中调整它的大小，设置其深度为 -5 ，该 Sprite 用于作为背景，其参数如图所示：

在3D UI层级中，新建一个空游戏对象，并命名为Window，该对象用于整体调整下面GUI的移动和旋转等。如图所示：

下面来制作 Window 中的各个元素。首先创建背景。使用 Create a widget ，使用 UITiledSprite ，该元素可以等你放大它的范围时，它会以平铺的方式显示，这样可以大大节省资源的体积。该其参数如下：


使用 Create a Widget 中的 Sliced Sprite ，创建标题栏，该元素可以在放大范围时，拉伸其背景。创建好之后在编辑窗口中改变它的位置和大小，使其在窗口的顶端，其参数和效果如下：

再为背景添加一个半透明的 SlicedSprite ，其参数和效果如下：

创建一个Label，作为该窗口的标题，其参数和效果如下:

  创建一个 Label ，作为窗口中的文字说明，其参数和效果如下：

   创建一个按钮，命名为： button-show ，设置该按钮的 Label 文字描述为 Show ，设置 Background 的颜色为深蓝色，调整它的位置和大小，最终效果如图所示：

为该 Button 创建一个空的子物体，并命名为 Animation ，最后对该空物体添加一个 Animation 组件（ Component->Miscellaneous->Animation ），并在 project 窗口中找到 NGUI->Examples->Animations->Button ，把该脚本添加到 Animation 组件中的 Animation 中。（这个 Button 的动画可以用于实现按钮在某种状态下的动画效果）接着把 Button 下面的 Label 和 Background 拖到 Animation 对象上，成为其子对象，如图所示：

为 Show 按钮添加三个装饰图标，这三个图标都是 Sprite 元素，可以制作一个之后，使用 Ctrl+D 复制出另外两个，并设置它的位置和颜色，最后可以添加一个空的游戏对象，并命名为 ICON ，把这三个图标拖到 ICON 中，这样可以方便管理，其最终结果如图所示：

复制该 Button ，并把该 Button 的 Label 文本设置成 HIDE ，命名为 button-hide 再把 ICON 删除掉，调整它的位置，最终效果如图所示：

现在，来完成当鼠标放置在按钮上面时，即 onHover 状态时，它的动画效果。我们以 Show 按钮为例子， Hide 的设置类同。选择 Button-show ，为该按钮添加一个 UIButtonPlayAnimation 组件（菜单中 Component->NGUI->Interaction->Button Play Animation ）。添加之后，把该按钮下的 Animation 赋值给该组件中的 Target 变量，设置 Trigger 为 OnHover ，点击播放，当把鼠标放置在该按钮上时，可以看到已经有动画效果了，此时可以对比未对 Hide 按钮添加 UIButtonPlayAnimation 组件时的效果。参数如图所示：

对 Button-hide 按钮进行相同的操作。
接下来，完成窗口的变换（移动和旋转），使其当点击 show 按钮时，窗口平躺下来。新建两个空游戏对象，并命名为 WindowActive 和 WindowInactive ，这两个对象只包含了对象的变换信息（平移、旋转和缩放）。我们将用这个两个空游戏对象的变换信息来制作窗口在这两个位置间的平滑过渡。首先把该两个游戏对象放置到 3D UI 对象下，成为它的子物体，然后把这两个对象 reset 一下，接着，调整 WindowInactive 的旋转角度和位置。而 WindowActive 保持变换不变。注意，此时当中的 scale 参数最好跟 Window 中的缩放一样，除非你要实现缩放效果，如图所示：

  选择 Window 对象，为其添加一个 TweenTransform 组件（ Compoent->NGUI->Tween-> Transform ），该组件可以根据两个 Transform 对象来在它们之间进行平滑过渡。添加组件之后，把 WindowActive 和 WindowInactive 对象赋值给该组件下的 From 和 To 下，同时把给组件的 Enable 关掉，我们将使用 Show 按钮来控制它的打开，具体参数如下，如图所示：

  为 Show 按钮添加 UIButtonTween 组件（ Component->NGUI->Interaction->Button Tween ），该组件可以使得 Target 中的 Tween 类型的动画进行开关。把 Window 对象赋值给该组件下的 Target ，并设置 PlayDirection 为 Forward ， Trigger 为 OnClick ， If Disabled On Play  为 EnableThenPlay ，表示当播放该动画时，启动 Target 中的 Tween 类型动画。这个组件是关键。点击播放，可以看到最终的效果，你可以在播放时，在没按下 show 按钮之前选择 Window 组件，可以看到此时的 TweenTransform 组件是关闭的，当你按下 show 按钮之后，该组件被打开了，播放完之后，又被关闭。
 
现在来完成当点击 Hide 按钮时，窗口回到原来的位置，同样给该按钮添加一个 UIButtonTween 组件，把 Window 对象赋值给该组件下的 Target ， Trigger 设置为 OnClick ， Play Direction 设置为 Reverse ， If Disabled On Play 设置为 DoNothing 。完成之后，点击播放，查看效果，如图所示：


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