【转载】NGUI官网示例6 – Draggable Window讲解(二)

艾西格亚

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



制作鼠标停留在按钮上时的按钮动态效果。创建一个空游戏对象，命名为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/f***m/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设置成OnHover***e。点解播放，ok，完成！如图所示：







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

狂风大尉

支持张老师教程。请多提供这方面技术学习

may

支持楼主的帖子

xueshong

继续深入的学习！感谢楼主

omgomg2014

Thanks for sharing!