纳金网

标题: 【转载】NGUI官网示例6 – Draggable Window讲解(一) [打印本页]

作者: 艾西格亚    时间: 2012-10-9 12:37
标题: 【转载】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    时间: 2012-11-30 21:26
支持楼主的帖子
作者: xueshong    时间: 2014-4-23 17:12
咋个没得多少人支持呢!捧个场
作者: omgomg2014    时间: 2014-4-23 23:06

Thanks for sharing!
作者: omgomg2014    时间: 2014-4-23 23:14

Thanks for sharing!




欢迎光临 纳金网 (http://course.narkii.com/club/) Powered by Discuz! X2.5