【转载】NGUI官网示例6 – Draggable Window讲解（一）

艾西格亚

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



看了以上几个教程，估计大家对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，放置在合适的位置。最终效果如图所示：

may

支持楼主的帖子

xueshong

咋个没得多少人支持呢！捧个场

omgomg2014

Thanks for sharing!

omgomg2014

Thanks for sharing!