NGUI官网示例6 – Draggable Window讲解

Admin

看了以上几个教程，估计大家对NGUI的前几个实例有所了解，建议自己做一遍，这样可以加深对它的理解。接下来，我将详细描述创作可拖拽窗口的制作过程。在这里我分四步来完成：一、制作和布局界面；二、制作gui的动态效果和拖拽功能；三、制作灯光效果；



一、制作和布局界面。



在NGUI菜单中，打开Create a new UI对话框,在对话框中设置Camera为Advanced3D,并点击Create your UI，此时在Hierarchy窗口中生成了对应的层次结果，如图所示：







调整该层次结果，使得Camera与Panel脱离，并且Camera和Panel也脱离UI Root（3D）删除Anchor和UIRoot（3D），创建一个Scene空的游戏对象，reset一下，再创建一个3DUI空游戏对象，reset一下，再创建一个Window游戏对象，reset一下，同时Panel也reset一下，最后调整它们之间的层级结构，（不断地reset是为了更好地定位各个元件），Window和3DUI等这些空物体只是为了方便管理场景中的元素而已，同时把Camera的postion中z值设置为-1.7，这样可以使得GUI和摄像机之间有一定的距离，并设置摄像机的near为0.01，其结果为：







选择Panel，为其添加一个带有法线贴图的背景，选择Create a new widget窗口，选择Template为TiledSprite模板，Sprite为HoneyComb作为背景，其参数如下，设置完成之后点击Add to，为该gui添加一个Tiled Sprite，作为景，保证该按钮后面的值为panel：







添加Tiled Sprite之后，把它缩放到x=490，y=510，颜色设置成黑色，如图所示：







为了看到法线贴图的效果，选择Panel，勾选Normals，并为场景添加一盏平行光，调整光线的角度，最终效果如图所示：







为该窗口添加一个窗口的边框，选择Create a new Widget对话框，选择Template为SlicedSprite模板，Sprite为Button作为背景，设置参数之后，点击Add To创建一个Sliced Sprite，创建完之后，选择该Sliced Sprite，设置其Dept为-1，Color Tint为绿色，大小为x=498，y=515，比背景稍微大一些，可以看到在窗口的边缘出现了绿色的边框，如图所示：







为窗口添加一个顶栏，选择Create a new Widget对话框，设置参数之后，点击Add To，创建一个Sliced Sprite。创建完之后，选择该Sliced Sprite，调整它的位置和大小，参数和效果如图所示：







创建窗口标题。选择Create a new Widget对话框，选择Template为Label，点击Add to，为窗口创建一个Label，在Label的文本输入框中输入Example Draggable Window，并在场景编辑窗口中调整它的位置，其参数和最终结如下图所示：







用同样的方法，为其添加另外一个Label，或者直接使用Ctrl+D复制出一个出来，修改它的文字内容，设置它的line width为460，调整它的位置，结果如图所示：







创建Logo图标。选择Create a new Widget对话框，选择template中的sprite，Sprite为NGUI，选择Add to，为窗口添加一个Logo图标，调整它的位置，最终效果如图所示：







创建两个Checkbox。同样选择Create a new Widget对话框，选择template中的checkbox，background设置为Dark，Checkmark为X，最后点击Add to，为窗口添加一个Checkbox。选择Checkbox中的Label，把文本修改为EnableAutoYaw。再选择Checkbox中的Background，把Color Tint选择为蓝色。调整该Checkbox的位置。接着，使用ctrl+D复制出另外一个Checkbox，把这个checkbox里面的文本修改为Enable DragTilt，放置在右边，最后效果如图示：







创建两个按钮。选择Create a new Widget对话框，选择template中的Button，background选择Button，最后点击Add to，为窗口添加一个按钮。选择该按钮下的label，修改文本为Hello，选择其下的background，设置Color Tin为蓝色，放置在合适的位置。接着使用Ctrl+D，复制出另外一个button，并把其下的label的文本设置为World，放置在合适的位置。最终效果如图所示：

Admin

制作鼠标停留在按钮上时的按钮动态效果。创建一个空游戏对象，命名为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中。最后调整这个元件的位置和缩放。最后效果如图所示：