(搬运工)NGUI官网示例6 – Draggable Window讲解(二)

制作鼠标停留在按钮上时的按钮动态效果。创建一个空游戏对象，命名为animation，把它拖到Button-hello上，成为其子物体，把该按钮下面的两个子对象拖到Animation空对象上，成为它的子物体。并为Animation空对象添加一个Animation组件（Component->Miscellaneous->animation）,添加完成之后，在该组件种的animation属性中的最右边小圆圈上点击，在弹出的对话框中选择button动画文件，该动画文件是在unity的animation曲线窗口中编辑保存的。把play automatically取消掉，最终如图所示：

选择Button-hello，为其添加一个button play animation组件（Component->Ngui ->interaction->button play animation）。把该按钮下的animation对象拖到该组件的Target上，设置Trigger为OnHover（当鼠标放置在该按钮上时，播放Target上的动画）。对Button-world进行同样的操作，最后点击播放，当鼠标放置在该按钮上时，就会播放按钮的动画了，如图所示：

使用同样的方法制作 checkbox 的鼠标停留在上面时的效果，其结构和设置如图所示：

OK。窗口中按钮和checkbox的鼠标停留效果就做好了。点击播放看看。
下面开始制作窗口的拖拽效果，其中还三个辅助功能，一个是摄像机跟随（CameraYaw）、移动延迟（LagPosition）以及窗口摇摆（DragTile）。首先来实现窗口的拖拽功能。因为我们希望当鼠标在窗口的标题栏按下左键之后不放才可以拖动该窗口，所以我们选择该窗口的标题栏（SlicedSprite），为它添加一个DragObject组件（component->NGUI->Interaction->Drag Object），接着把window游戏对象赋值给该组件下的Target变量，点击运行之后，发现并没有任何反应，后来找了大半天，终于知道，我忘了给这个元件加一个碰撞盒，选择SlicedSprite，然后选择菜单中的NGUI->attach a collider（NGUI就是通过碰撞盒中的触发器方式来进行输入监听的），结果如图所示：现在点击播放，可以发现，窗口可以被拖动了。

实现窗口拖动的三个辅助功能，也就是让它的运动更加灵活，而不死板。首先来实现它的延迟移动效果。创建一个空的游戏对象，并把它命名为LagPosition，把它拖到Window对象下，成为window的子物体，reset一下，再把Panel作为LagPosition子物体。接着为LagPosition添加一个LagPosition组件（Component->NGUI->Example ->Lag Position）。你现在点击播放，然后鼠标以较快的速度拖动窗口，会发现，窗口会以一种组件靠近目前鼠标位置的方式运动。如图所示：

实现摄像机的跟随变换。创建一个空的游戏对象，命名为Yaw，把他拖动到LagPosition下，reset一下，再把Panel作为它的子对象。接着为Yaw对象添加一个WindowAutoYaw组件（Component-> NGUI->Example->Window Auto Yaw）。现在点击播放，可以发现，摄像机会自动地进行Yaw操作。参数和结构如图所示：

  最后，实现窗口的摇摆效果。创建一个新的空游戏对象，命名为 DragTile ，并把它作为 LagPosition 的子物体， reset 一下，接着把 Panel 拖到 DragTile 成为它的子物体。接着，为 DragTile 对象添加一个 Window Drag Tile 组件（ Component->NGUI->Example ->Window Drag Tile ）。其参数和结构如图所示：

大家发现，现在三个辅助效果都是同时更新，现在我们按照一定的次序来安排更新效果，在 Lag Position 、 Window Auto Yaw 和 DragTile 中都有一个 Update Order 属性，用来控制其更新次序的，数字越大，更新排序越后。我们设置 Lag Position 为 1 ， Window Auto Yaw 为 2 ， DragTile 为 3 。这样重新播放，可以看起来，更加自然了。

  实现 Checkbox 控制 WindowAutoYaw 和 DragTile 的开关。选择 Checkbox-Yaw ，为其添加一个 Checkbox Controlled Component （ Component->NGUI->Interaction-> Check box Controlled Component ）。再把 Yaw 对象赋值给其中的 Target 中。这个组件可以控制 Target 对象中的组件的开关。接着，对 CheckBox-Tile 进行相同的操作，只是把 Target 赋值为 DragTile 。最后如图所示：

这样，窗口的拖动效果就大功告成了！

三、       制作灯光效果

最后就是为它添加效果，美化一下。
创建一个点光源，设置它的 Range 为 0.3 ， Color 为黑色， Intensity 为 8 。把 PointLight 成为 Button-Hello 按钮下 Background 的子物体，并 reset 一下位置，接着再把它的位置放在按钮前面。如图所示：

  为 Button-Hello 按钮添加一个 Button Color 组件（ Component->NGUI->Interaction-> Button Color ）。接着把 pointlight 赋值给 Target ，同时把 Press 后面的颜色换成黑色。其中 Target 用于确定需要控制的对象， Hover 表示该对象当鼠标放在该按钮上时被控制对象的最终颜色， Press 表示该对象被按下时该被控制对象最后的颜色。现在点击播放，可以看到其最后的效果。对 Button-World 按钮进行同样的操作，只是 pointlight 的位置放在 button-World 上面而已。如图所示：

  制作 Logo 的流光效果。创建一个空的游戏对象，并命名为 Logo ，拖到 Panel 下，成为其子对象，并调整到窗口中 logo 的中心位置，接着，把 Sprite （ NGUI ）拖到它的下面，成为 Logo 对象的子对象。接着创建一盏点光源，并把它放到 Logo 下，同样成为它的子对象，接着调整灯光的位置。

为灯光添加一个 Animation 组件（ Component->Miscellaneous->Animation ），并把该组件中的 Animation 属性设置为 Logo 动画文件（这个动画文件可以通过动画曲线编辑窗口进行创建，见 lights and Refraction 讲解  http://game.ceeger.com/forum/read.php?tid=4226 ），同时关闭该组件，接着为灯光添加一个 Active Animation 组件（ Component->Ngui->Internal->Active Animation ） , 同样把该组件关闭。把灯光的颜色和范围设置如下，如图所示：

选择 Logo 对象，在菜单栏中选择 NGUI -> Attach a Collider ，为其添加一个碰撞盒，接着为它添加一个 Button Play Animation 组件（ Component->NGUI->Interaction-> button play animation ）。把 target 属性设置成 point light ，也就是 logo 上面的那个点光源，接着 Trigger 设置成 OnHoverTrue 。点解播放， ok ，完成！如图所示：

  最后为它添加一个修饰作用的背景。选择 Create a new Widget 窗口，在 template 属性中选择 Simple Texture 。点击 Add to ，为其添加一个简单的材质元件。接着把该元件拖到 Camera 下面，成为其子物体，接着，把 backdrop 材质球赋值给该元件下面的 Material 中。最后调整这个元件的位置和缩放。最后效果如图所示：

图片：27.png

  http://game.ceeger.com/forum/read.php?tid=4244;ds=1