NGUI层.docx
- 文档编号:16432546
- 上传时间:2023-07-13
- 格式:DOCX
- 页数:17
- 大小:333.92KB
NGUI层.docx
《NGUI层.docx》由会员分享,可在线阅读,更多相关《NGUI层.docx(17页珍藏版)》请在冰点文库上搜索。
NGUI层
5.1.4 UI层简介
前面的章节讲解了NGUI菜单中各个选项的功能,本小节将对创建UI层,以及UI向导中的内容进行详细介绍。
创建一个新的UI向导,即单击NGUI→CreateanewUI→CreateYourUI选项,即可在Hierarchy面板中创建一个新的UI,如图5-9所示。
新建的UI中包括UIRoot(2D)、Camera、Anchor和Panel,接下来将为读者介绍UI组件所包括的内容。
2D的根对象(UIRoot(2D))包括基本的Transform属性及UIRoot(Script),如图5-15所示。
这个脚本会重新调整界面对象使其符合测试设备的屏幕的高度(Automatic表示自动调整,ManualHeight表示手动调整);
Camera对象包括Transform、Camera和UICamera(Script)组件,如图5-16所示。
UICamera脚本是所有功能性UI的关键组件。
其功能是向其所在摄像机渲染出来的所有碰撞体对象发送NGUI事件。
Camera参数介绍如下:
UseMouse--选择摄像机是否响应鼠标事件;
UseTouch--选择摄像机是否响应触摸事件;
UseKeyboard--选择是否允许发送键盘事件;
UseController--选择是否允许发送游戏手柄事件;
EventReceiverMasDefault--选择哪一层接收NGUI事件;
TooltipDelay--控制鼠标光标在对象上停留多久发送鼠标事件;
MouseClickThresh--控制鼠标光标在对象上停留多少秒发生触摸事件;
RangeDistance--选择摄像机与对象接收消息的距离;
ScrollAxisName--选择控制滚动事件中的轴。
Anchor(锚点)对象包括Transform和UIAnchor(Script)组件,如图5-17所示。
其主要影响UI的显示位置。
其参数介绍如下:
UiCamera--渲染对象的摄像机,一般自动选择场景中的摄像机;
Side--设置锚点,包括4个角,4个边以及中心点;
HalfPixelOffset--选择是否让对象在Windows系统上显示时,存在半个像素的偏移;
DepthOffset--用于透视摄像机,调整UIAnchor计算的位置深度;
RelativeOffset--相对偏移量,即物体以屏幕半分比为单位的偏移量。
Panel对象包括Transform和UIPanel(Script)组件,如图5-18所示。
UIPanel是一个容器,包含了所有UI小控件,负责创建实际的界面集合图形,并且可以将UI渲染拆分到不同的DrawCall中。
其参数介绍如下:
PanelTool--选择当前Panel是否会显示在PanelTool(见图5-11)中。
动态创建的临时Panel可以不勾选此选项;
Normals--选择UI中图形是否会受到法线和切线的影响;
DepthPass--选择添加一个额外的DrawCall。
勾选此选项后,不透明空间后的物体都不会渲染,因此节省了部分填充率;
Static--检测UI中控件是否移动;
Widgets--显示当前Panel一共渲染了多少个控件,若为0,则表示此Panel无用,可以删除;
DrawCalls--显示当前Panel消耗的DrawCall个数,数值越低,效率越高;
DebugInfo--选择调试信息的显示方式;
Clipping--选择裁剪功能,使用Shader来实现,NGUI会尝试自动获取一个裁剪版本的Shader并更新材质,默认选择None。
5.2 控件工具的使用
本节将介绍NGUI组件中非常重要的控件工具,其主要包括Label、Sprite、Button、Checkbox、Slider、Input、PopupList等,这些控件都可以在使用的时候随时创建,十分方便。
NGUI就是用这些小控件堆积成大工程的方式来搭建绚丽的界面的,所以,掌握这些控件十分重要。
5.2.1 文本标签--Label
(1)
NGUI下的Label控件是用来绘制字体的标签控件,本小节将对其内容进行详细讲解,使读者对Label有一个全面的认识,在今后的开发中能够熟练运用,以满足开发的需求。
Label控件具有一些属性参数,其中包括Transform和UILabel(挂载在Label控件上的脚本,以实现Label的特定功能),基本情况如图5-19所示。
从图5-19中可以看出,与普通的Unity游戏对象相同,开发人员可以通过在属性查看器中调整Transform各项数值来改变Label控件的大小和位置。
而挂载到Label控件的UILabel脚本中则包含了与此控件特有功能相关的所有参数,具体情况如表5-1所示。
表5-1 UILabel脚本参数
参 数 名 称
含 义
Font
选择用于当前标签的字体格式,可以拖曳预设或者按下Font按钮选择最近使用的字体
LineWidth
指定一行的最大宽度,如果是单行文本则自动删去超出的部分,如果是多行文本则自动换行
Multi-Line
选择此项后,文本标签达到最大宽度后会自动换行
Password
选择此项后,文本中字符自动转换成星号,一般用于密码框
Encoding
选择此项后,关闭对特殊字符的处理,一般用于输入框
Effect
选择字体的效果(阴影、轮廓)
Depth
当前文本标签的层级
续表
参 数 名 称
含 义
ColorTint
选择当前文本标签内文字的颜色
Correction
快速调整控件的尺寸到实际像素尺寸
Pivot
选择当前文本标签的坐标原点在场景中的位置
前面已经介绍了文本标签Label的用途及各种参数属性,下面将详细讲解创建及使用Label控件的操作步骤。
(1)单击NGUI→CreateaNewUI菜单,在弹出的UITool对话框中单击CreateYourUI创建一个新的UI向导,如图5-20所示。
(2)单击NGUI→CreateaWidget菜单,弹出WidgetTool对话框,选择需要的Atlas和Font,并且选择Template为Label,单击Addto完成创建,如图5-21所示。
提示 Atlas和Font会自动选择最近一个使用过的图集和字体,在本案例中将使用NGUI自带的图集和字体(稍后的章节中将会讲解如何制作图集和字体),在Project面板中找到NGUI文件下的Atlases\Fantasy文件夹下的相应的预设,将Atlas和Font预设直接拖曳到WidgetTool中的相应位置即可。
5.2.1 文本标签--Label
(2)
(3)选中Label在Inspector面板中可以看到其参数,调整Transform的数值,在UILabel(Script)的Font下的输入框内输入FirstLabel,如图5-22所示。
(4)重复步骤
(2)再新建一个Label控件,选中后在Inspector面板中调整Transfrom数值,并在UILable(Script)的Font下的输入框内输入SecondLabel,如图5-23所示。
单击Unity的游戏播放按钮,在Game窗口可以看到出现了刚才创建的两个Label控件,如图5-24所示。
读者在开发中可以根据需要添加调整Label控件,以达到预期的效果。
5.2.2 图片精灵--Sprite
NGUI下的Sprite(精灵)是用来绘制图集的控件,本小节将对其内容进行详细讲解,使读者对Sprite有一个全面的认识,在今后的开发中能够熟练运用,以满足开发的需求。
精灵可以在一张大图中去截取一部分(大图就是整体图像集合(Atlas),而截取的小图就是一个精灵),然后给精灵命名,使用时通过精灵的名称就能直接绘制,并且精灵还可以用来制作动画。
提示 同一个Atlas中创建控件不会响应z轴变换,不过可以调整Depth参数来调整其前后次序。
如果用了多个Atlas或者多个UI面板,就必须要去调整z轴变换以达到调整其前后次序的目的。
Sprite控件具有一些属性参数,其中包括Transform和UISprite(挂载在Sprite上的脚本),如图5-25所示。
从图5-25中可以看出,与普通的Unity游戏对象相同,开发人员可以通过在属性查看器中调整Transform各项数值来改变Sprite控件的大小和位置。
而挂载到Sprite控件的UISprite脚本中则包含了与此控件特有功能相关的所有参数,具体情况如表5-2所示。
表5-2 UISprite脚本参数
参 数 名 称
含 义
Atlas
当前Sprite所选的图集
Sprite
当前Sprite所选的贴图
Depth
当前Sprite所在的层级
ColorTint
当前Sprite图层的颜色
Correction
快速调整Sprite的尺寸到实际像素尺寸
Pivot
选择当前Sprite的坐标原点在场景中的位置
Preview
是否在Inspector面板中预览当前Sprite
前面已经介绍了Sprite的用途及各种参数属性,下面将详细讲解创建及使用Sprite控件的操作步骤。
(1)单击NGUI→CreateaNewUI菜单,在弹出的UITool对话框中单击CreateYourUI创建一个新的UI向导,如图5-26所示。
(2)单击NGUI→CreateaWidget菜单,弹出WidgetTool对话框,选择需要的Atlas及Font(本案例选择NGUI自带的Fantasy),并且选择Template为Sprite,Sprite选择NGUI,单击Addto完成创建,如图5-27所示。
(3)选中Sprite在Inspector属性面板中可以看到其参数,调整Transform的数值,单击运行游戏按钮,在Game窗口中可以看到刚才创建的Sprite,如图5-28所示。
5.2.3 按钮--Button
(1)
NGUI下的Button是用来绘制按钮的控件,本小节将对其内容进行详细讲解,使读者对Button有一个全面的认识,在今后的开发中能够熟练运用,以满足开发的需求。
按钮控件包括两部分,分别是Background(背景)和Label(文本标签),如图5-29所示。
这就是NGUI的特性,多个小组件组合成强大的控件。
提示 其中Background表示按钮的背景图片及颜色设置,Lable则表示按钮上的文字设置,读者可以根据开发的需要自行修改。
Button控件具有一些属性参数,包括Transform、BoxCollider以及挂载在Button上的脚本,分别是UIButton、UIButtonScale、UIButtonOffset和UIButtonSound,如图5-30所示。
从图5-30中可以看出,与普通的Unity游戏对象相同,开发人员可以通过在属性查看器中调整Transform各项数值来改变Button控件的大小和位置。
而BoxCollider及挂载到Button控件的脚本中则包含了与此控件特有功能相关的所有参数。
碰撞器--BoxCollider
Button控件中的BoxCollider表示碰撞器,其作用是使Button控件具有碰撞属性。
NGUI中事件的触发都需要对象具有碰撞属性,BoxCollider的具体参数如表5-3所示。
表5-3 BoxCollider
参 数 名 称
含 义
IsTrigger
碰撞器是否用于触发事件,并且被物理引擎忽略
Material
引用何种物理材质
Center
当前碰撞器在坐标中的位置
Size
对象在x、y、z三维方向上的碰撞尺寸
按钮脚本--UIButton(Script)
挂载到Button控件上的脚本中,UIButton(Script)控制的是当鼠标光标悬浮在按钮上及按下按钮时,按钮的颜色变化及变化的时间长短,具体参数如表5-4所示。
表5-4 UIButton(Script)参数
参 数 名 称
含 义
TweenTarget
当前脚本作用的范围,选择不同的选项,脚本将作用在Button中不同的部位
Hover
当鼠标光标接触按钮时,按钮的颜色
Pressed
当用鼠标光标按下按钮时,按钮的颜色
Duration
按钮颜色变化的持续时间
按钮大小变化脚本--UIButtonScale(Script)
挂载到Button控件上的脚本中,UIButton(Script)控制的是当鼠标光标悬浮在按钮上及按下按钮时,按钮在形态大小上的变化,使其具有动态效果,具体参数如表5-5所示。
表5-5 UIButtonScale(Script)参数
参 数 名 称
含 义
TweenTarget
当前脚本作用的范围,选择不同的选项,脚本将作用在Button中不同的部位
Hover
当鼠标光标接触按钮时,按钮在x、y、z方向上的大小变化
Pressed
当用鼠标光标按下按钮时,按钮在x、y、z方向上的大小变化
Duration
按钮大小变化的持续时间
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- NGUI
![提示](https://static.bingdoc.com/images/bang_tan.gif)