NGUI官网示例6 – Draggable Window讲解(一)
zf223669
zf223669 24564 18
精华热门加亮 NGUI 2012-10-05 14:52
NGUI官网示例--讲解:http://game.ceeger.com/forum/read.php?tid=4172;fpage=2
NGUI官网示例2-interaction-讲解(一)http://game.ceeger.com/forum/read.php?tid=4179
NGUI官网示例2-interaction-讲解(二)http://game.ceeger.com/forum/read.php?tid=4180
NGUI官网示例3--Menu讲解http://game.ceeger.com/forum/read.php?tid=4187
NUI官方实例—ControlIerInput讲解http://game.ceeger.com/forum/read.php?tid=4222
NUI 官方示例–lights and Refraction讲解 http://game.ceeger.com/forum/read.php?tid=4226
NGUI官网示例6 – Draggable Window讲解(一)

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

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

图片:1.png


调整该层次结果,使得CameraPanel脱离,并且CameraPanel也脱离UI Root3D)删除AnchorUIRoot3D),创建一个Scene空的游戏对象,reset一下,再创建一个3DUI空游戏对象,reset一下,再创建一个Window
游戏对象,reset一下,同时Panelreset一下,最后调整它们之间的层级结构,(不断地reset是为了更好地定位各个元件),Window3DUI等这些空物体只是为了方便管理场景中的元素而已,同时把Camerapostionz值设置为-1.7,这样可以使得GUI和摄像机之间有一定的距离,并设置摄像机的near0.01,其结果为:

图片:2.png


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

图片:3.png


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

图片:4.png


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

图片:5.png


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

图片:6.png


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

图片:7.png


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

图片:8.png


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

图片:9.png


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

图片:10.png


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

图片:11.png


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

图片:12.png


 
NGUI官网示例6 – Draggable Window讲解(二)
http://game.ceeger.com/forum/read.php?tid=4244;ds=1
 (浙江传媒学院-新媒体学院-数字游戏设计专业-张sir)
分享:
游客
要评论请先登录 或者 注册
18条回应 只看楼主 最新
emaxya 论坛版主 2012-10-05 16:36 1楼
感谢一系列的NGUI教程分享!
lanneret 学者 2012-10-06 12:27 2楼
   
ly774508966 论坛版主 2012-10-07 10:51 3楼
支持,给力。继续关注!
flycyr 学徒 2012-10-11 15:51 4楼
打扰一下0 0有个问题- -为啥你的相机距离那么近-1.7就可以把怎么GUI看的清楚0 0 我这得离开的很远才可以(),而且相机的裁切也得调的很大- -

图片:20121011155011.jpg


图片:20121011154948.jpg

木丝 学徒 2012-10-16 15:17 5楼
真的很不错,容易上手
0o_mu 学徒 2012-10-17 11:39 6楼
谢谢~~~~
wangyel1 大师 2012-10-27 20:46 7楼
回 flycyr 的帖子
flycyr:打扰一下0 0有个问题- -为啥你的相机距离那么近-1.7就可以把怎么GUI看的清楚0 0 我这得离开的很远才可以(),而且相机的裁切也得调的很大- -
[附件]
[附件] (2012-10-11 15:51)

这说明你的TiledSprite实际尺寸非常大,就是你图2中的精灵,估计缩放有500吧
这个平铺精灵是需要缩放500的,不过因为教程中的Panel是从Root拖出去的,所以就有了个0.0025的缩放,而它下面的精灵也就继承了这个缩放,所以500*0.0025也才1.25大小,这样摄像机只需设置-1.7就能包容精灵了
如果直接用菜单中的NGUI来创建Panel,最好在它的父物体上加一个UIRoot脚本,手动设置缩放的话就把Automatic取消

 
cqwzwlh0326 学徒 2012-10-28 22:10 8楼
谢谢您的教程
wangyel1 大师 2012-10-29 22:44 9楼
控制窗口不超出屏幕可以用父物体Panel的Clipping,不过Clipping数值不能自动根据窗口缩放,即使用一个子物体在UIRoot下添加Panel组件,并设置Panel的Clipping的Size为0,虽然能缩放但总是比实际屏幕要小,怎么解决呢?还是有其他组件可以做到?
1 2
返回顶部