NGUI的特性
NGUI的入门
NGUI的入门(插件参数说明及使用)今天开始项目要转为课下任务,白天要继续停课,晚上要继续做项目,以后要过双重的煎熬啊,这是一个悲惨啊。
好了,发发牢骚,还是转为整体吧,今天讲了NGUI 的入门,我这里总结了一些NGUI的属性,给大家分享一下吧插件的导入:1、NGUI的导入,双击NGUI Next-Gen UI v3.5.4.unitypackage,导入全部资源2、当菜单栏出现NGUI后,表示当前导入完成3、点击NGUI-Create-Widget,会在当前视窗创建一个UI Root-Camera-Container,当中UI Root:2d UI容器,里面的选项特重要,如下图其中,Scaling Style(缩放类型,包含三种)1、PixelPerfect:像素优先,表示以图片原大小进行渲染2、FixedSize:修正尺寸,以相机的大小为基准进行缩放3、FixedSizeOnMobiles:在移动设备上修正尺寸,对当前图像进行缩放以适合所有移动设备Minimum Height - UI Root的最小高度Maximun Height - UI Root的最大高度Shrink Portrait UI - 缩放竖屏UI(当手机横屏转竖屏时,对UI进行缩放)Adjust by DPI - 通过像素来适应UI默认的为我们添加了一个Panel,同时也是一个静态刚体(为了响应事件)Camera:Clear Flags:相机投影的背景,有SkyBox, SoidColor, Depth Only, Don't Clear,选项对应不同的设置Culling Mask:相机遮罩Projection:相机投影,分为正交(Orthographic),固定可视区域,与透视(Perspective)Size:正交相机的大小Clipping Planes:相机剪切大小Viewport Rect:相机预视窗口的大小Depth:相机的深度,0表示在最顶层Rendering Path:渲染路径,影响图片的质量,一般跟平台有关系Target Texture:相机投影纹理Occlusion Culling:遮挡剔除(当物体没在相机可视范围内,不进行渲染)HDR:高光渲染UICamera(Script):Event Type:响应事件类型,UI(NGUI自己的事件,World是游戏中的事件,Unity2d是Unity GUi事件Event Mask:此处影响按钮点击时,只响应当前按钮的事件,不会影响到下层按钮Debug:Allow Multi Touch:是否支持多点触控,如果游戏不需要,可反选Sticky Tooltip:工具提示Tooltip Delay:提示延时Raycast Range:射线检测范围Event Sources:事件来源Thresholds(视差,表示执行的延时):Axes and Keys:轴向与按钮,封装了Xbox,PS3等手柄的使用Container:组件内器Alpha:透明度Povot:中心点Depth:渲染层次Dimensions:密度Aspect Ration:线切比例Anchor:锚点以上为参数的详细介绍,下面为使用,当遇到参数时,我还会进行介绍:点击NGUI-Open-Widget-Wizard打开一个组件选项面板Atlas:静态字体所要的纹理集Font:字体Template:模版,所有的Widget都在这里面选择Color:字体颜色Add To:添加到哪个容器里面想了解更多到狗刨学习网。
ngui用法
ngui用法
NGUI是一种强大的Unity UI系统,使用NGUI可以轻松地创建复杂的用户界面。
以下是NGUI的基本用法:
1.创建UI元素:在Unity编辑器中,通过拖拽NGUI的预设体(Prefab)到
场景中,可以创建UI元素。
预设体包含了UI元素的模板,包括布局、样式、交互等。
2.调整UI元素:选中场景中的UI元素,在Inspector面板中调整其属性。
例
如,可以设置文本框的文本内容、颜色、字体等,也可以设置滑动条的数值范围等。
3.布局UI元素:NGUI提供了多种布局方式,例如垂直布局、水平布局、网
格布局等。
通过设置布局组件的属性,可以将UI元素按照需要进行排列。
4.交互处理:通过编写代码或使用Event Trigger组件,可以实现UI元素的
交互处理。
例如,当用户点击按钮时,触发一个事件并执行相应的操作。
5.动画处理:NGUI支持对UI元素进行动画处理,包括颜色动画、位置动画、
缩放动画等。
通过编写代码或使用Animator组件,可以实现UI元素的动画效果。
6.样式定制:NGUI支持通过CSS样式表对UI元素进行样式定制,可以设置
字体、颜色、背景等样式属性。
7.事件系统:NGUI提供了一套事件系统,可以方便地处理UI元素的交互事
件。
例如,当用户点击按钮时,可以触发一个事件并执行相应的操作。
NGUI层
5.1.4 UI层简介前面的章节讲解了NGUI菜单中各个选项的功能,本小节将对创建UI层,以及UI向导中的内容进行详细介绍。
创建一个新的UI向导,即单击NGUI→Create a new UI→Create Your UI选项,即可在Hierarchy面板中创建一个新的UI,如图5-9所示。
新建的UI中包括UI Root(2D)、Camera、Anchor和Panel,接下来将为读者介绍UI组件所包括的内容。
2D的根对象(UI Root(2D))包括基本的Transform属性及UIRoot(Script),如图5-15所示。
这个脚本会重新调整界面对象使其符合测试设备的屏幕的高度(Automatic表示自动调整,Manual Height表示手动调整);Camera对象包括Transform、Camera和UICamera(Script)组件,如图5-16所示。
UICamera脚本是所有功能性UI的关键组件。
其功能是向其所在摄像机渲染出来的所有碰撞体对象发送NGUI事件。
Camera参数介绍如下:Use Mouse--选择摄像机是否响应鼠标事件;Use Touch--选择摄像机是否响应触摸事件;Use Keyboard--选择是否允许发送键盘事件;Use Controller--选择是否允许发送游戏手柄事件;Event Receiver Mas Default--选择哪一层接收NGUI事件;Tooltip Delay--控制鼠标光标在对象上停留多久发送鼠标事件;Mouse Click Thresh--控制鼠标光标在对象上停留多少秒发生触摸事件;Range Distance--选择摄像机与对象接收消息的距离;Scroll Axis Name--选择控制滚动事件中的轴。
Anchor(锚点)对象包括Transform和UIAnchor(Script)组件,如图5-17所示。
其主要影响UI的显示位置。
其参数介绍如下:Ui Camera--渲染对象的摄像机,一般自动选择场景中的摄像机;Side--设置锚点,包括4个角,4个边以及中心点;Half Pixel Offset--选择是否让对象在Windows系统上显示时,存在半个像素的偏移;Depth Offset--用于透视摄像机,调整UIAnchor计算的位置深度;Relative Offset--相对偏移量,即物体以屏幕半分比为单位的偏移量。
NGUI全面实践教程
NGU U I 全(内www.d 全面实内部资料大学霸daxueba 实践料)践教程程前 言NGUI是一款Unity插件,可以帮助开发者快速的为游戏添加功能强大的UI界面。
在Unity 4.6版本发布之前,Unity内置的UI系统异常难用,因此NGUI在开发者中广受追捧。
NGUI发布于2012年初,发布者从版本1.08开始持续不断的将NGUI插件更新到现在的3.8.1版本(2015年3月23日的数据),其中经历了3次大的变革!使得NGUI插件的功能越发强大,使用起来也异常便捷,即使Unity官方在Unity 4.6中集成了最新的UI系统,也未能掩盖NGUI的光芒!最新版本的NGUI,是从版本3.6.0开始演变过来的,所以这期间各更新版本的差异只是体现在小功能的添加、修复和完善上的。
但是目前市场上流传的大部分NGUI资料,都在介绍NGUI 3.6.0之前的版本,而NGUI 3.6.0版本的变革使得这些资料显得异常过时,给大部分学习NGUI的开发者造成了学习上的障碍,也严重影响到了NGUI使用者的工作效率!本书选择直接从版本3.8.0入手,全面系统的介绍了变革后的NGUI!全书是围绕下面的组件类继承图展开讲解的,同时也考虑到了内容的相关性,相信此书能让读者快速、高效、全面的掌握NGUI!1.学习所需的系统和软件❑Window 7操作系统;❑NGUI 3.8.0;❑Unity 4.5.5及以上版本;2.学习建议大家学习之前,可以致信到xxxxxxxx,获取相关的资料和软件。
如果大家在学习过程遇到问题,也可以将问题发送到该邮箱。
我们尽可能给大家解决。
3.更多新技术如果想了解与Unity相关的更多新技术,大家可以关注我们的大学霸官网:,也可以关注本教程老师的博客:/mr_ahao。
本书结构体系图目 录第1章学习NGUI前的准备 (1)1.1 NGUI的购买/下载和导入 (1)1.1.1 找到并了解NGUI的相关信息 (1)1.1.2 导入NGUI (4)1.2 NGUI资源概述 (6)1.2.1 NGUI的使用示例 (7)1.2.2 NGUI源码 (7)1.2.3 版本介绍 (8)1.3 NGUI菜单概述 (8)1.3.1 快速设置UI对象的Depth属性 (9)1.3.2 快速创建常用的基础UI (9)1.3.3 快速赋予常用的UI组件 (10)1.3.4 快速添加补间动画相关组件 (10)1.3.5 快速打开NGUI提供的各种工具 (11)1.4 NGUI快捷菜单概述 (11)1.5 各重要组件类的继承关系(图示) (11)1.6 更合理的界面环境布局 (12)1.6.1 默认的布局方式 (12)1.6.2 修改布局的方法 (13)1.6.3 推荐的布局方式 (15)1.6.4 存储自定义布局 (16)1.7 NGUI常见的鼠标快捷操作方式 (16)1.7.1 改变UI对象的位置 (16)1.7.2 改变UI对象的角度 (17)1.7.3 改变UI对象的大小 (17)第2章基础UI组件 (19)2.1 全局UI缩放方式控制(UIRoot) (19)2.1.1 概述 (19)2.1.2 像素大小固定(Flexible) (20)2.1.3 占用比例固定(Constrained) (22)2.1.4 依平台而定(Constrained On Mobiles) (25)2.1.5 分清游戏屏幕分辨率与游戏视图宽高比 (25)2.2 自动调节UI的大小(UIRect) (26)2.2.1 概述 (27)2.2.2 自定义UI的大小(None) (28)2.2.3 与另一个UI关联(Unified) (29)NGUI全面实践教程(内部资料)——版权所有·2·2.2.4 与多个UI关联(Advanced) (35)2.2.5 应用示例——滑块雏形 (37)2.3 容器(UIWidget) (39)2.3.1 概述 (40)2.3.2 改变容器里UI对象的透明度 (41)2.3.3 对齐UI对象 (42)2.3.4 旋转UI对象(Pivot) (43)2.3.5 设置UI对象绘制顺序/接收事件的顺序(Depth) (44)2.3.6 手动调节UI的大小以及宽高比(Size和Aspect) (46)2.4 画板(UIPanel) (47)2.4.1 更高的优先级 (48)2.4.2 决定全局的绘制顺序 (49)2.4.3 全局裁剪 (49)2.4.4 其它高级设置 (50)2.4.5 显示绘制调用 (51)2.5 事件系统(UICamera) (52)2.5.1 确保事件系统正常运行的要素 (52)2.5.2 筛选可接收事件的对象 (54)2.5.3 查看当前接收事件的对象 (55)2.5.4 辅助功能设置 (55)2.5.5 触发事件的源头 (56)2.5.6 触发事件的阀值 (56)2.5.7 匹配常见触发源的特定事件 (57)2.5.8 可发送的全部事件及其处理方法 (58)第3章 NGUI可视组件 (60)3.1 显示文字信息(UILable) (60)3.1.1 字体分类——动态/静态字体(Dynamic和Bitmap) (60)3.1.2 常见的处理方式 (62)3.1.3 溢出处理 (64)3.1.4 文字特效 (66)3.1.5 格式不再一致——文字编码(BBCode) (68)3.2 显示精灵图片(UISprite) (70)3.2.1 概述(Flip和Color Tint) (70)3.2.2 直接显示——简单类型(Simple) (74)3.2.3 拉伸显示——切片类型(Sliced) (76)3.2.4 平铺显示——平铺类型(Tiled) (77)3.2.5 填充显示——填充类型(Filled) (78)3.2.6 自定义显示——高级类型(Advanced) (80)3.3 显示纹理图片(UITexture) (81)3.3.1 显示纹理图片 (81)3.3.2 显示图片的一部分 (83)·3·NGUI全面实践教程(内部资料)——版权所有3.3.3 显示任意类型的图片 (85)3.4 显示2D Sprite(UI2DSprite) (85)第4章常见UI控件 (88)4.1 按钮(UIButton) (88)4.1.1 概述 (88)4.1.2 自制按钮 (90)4.1.3 响应按钮单击事件 (93)4.2 弹出列表(UIPopupList) (94)4.2.1 概述 (94)4.2.2 自制弹出列表 (98)4.2.3 响应列表项选择事件 (99)4.3 开关(UIToggle) (100)4.3.1 概述 (100)4.3.2 自制开关(复选按钮) (102)4.3.3 单选按钮 (104)4.3.4 响应开关状态变化的事件 (105)4.4 输入框(UIInput) (107)4.4.1 概述 (107)4.4.2 自制输入框 (110)4.4.3 单行输入框 (112)4.4.4 多行输入框 (113)4.4.5 响应文本输入事件 (113)4.5 进度条(UIProgressBar) (115)4.5.1 概述 (116)4.5.2 自制进度条 (117)4.5.3 响应进度条值变化事件 (119)4.6 滑动条(UISlider) (120)4.6.1 概述 (120)4.6.2 自制滑动条 (122)4.6.3 响应滑动条值变化事件 (123)4.7 滚动条(UIScrollBar) (124)4.7.1 概述 (124)4.7.2 自制滚动条 (126)4.7.3 响应滚动条值变化事件 (127)第5章更高级的交互效果 (129)5.1 滚动视图(Scroll View) (129)5.1.1 预置UI对象——Scroll View (129)5.1.2 视图范围与裁剪效果 (130)5.1.3 拖动滚动视图的子对象 (131)5.1.4 拖动滚动视图的任意位置 (133)5.1.5 视图滚动的规则 (135)NGUI全面实践教程(内部资料)——版权所有·4·5.1.6 视图滚动的特效 (136)5.1.7 绑定滚动条 (138)5.1.8 其它辅助属性 (140)5.2 网格(Grid) (141)5.2.1 预置UI对象——Grid (142)5.2.2 排列UI对象 (142)5.2.3 排列规则 (145)5.2.4 处理禁用的UI对象 (145)5.3 表格(Table) (146)5.4 拖放操作(Drag and Drop) (148)5.4.1 拖动UI对象(UIDragDropItem) (148)5.4.2 修改被拖动UI对象的父对象(UIDragDropRoot) (150)5.4.3 呈现拖放动画效果 (151)5.4.4 将UI对象拖放到网格任意位置 (152)5.4.5 放置被拖动UI对象的容器(UIDragDropContainer) (155)5.5 游戏应用 (157)第6章高级功能 (160)6.1 数据/属性绑定(Property Binding) (160)6.1.1 绑定UI对象的属性 (160)6.1.2 绑定3D对象的属性 (162)6.1.3 属性依赖规则 (163)6.2 补间动画(Tweens) (164)6.2.1 动画的起点和终点 (165)6.2.2 动画的播放规则 (166)6.2.3 处理播放结束事件 (168)6.2.4 更多的播放控制(UIPlayTween) (169)6.2.5 更专业的动画播放控制(UIPlayAnimation) (173)6.3 按键绑定(UIKeyBinding) (174)6.3.1 绑定单个按键 (175)6.3.2 绑定组合键 (175)6.3.3 应用示例 (175)6.4 按键导向(UIKeyNavigation) (177)6.4.1 按照方向导向 (177)6.4.2 明确指定导向 (178)6.4.3 视图焦点的传递 (179)6.5 本地化系统(UILocalize) (179)6.5.1 预先准备的文件(Localization) (179)6.5.2 本地化文字 (180)6.5.3 本地化图片 (181)6.5.4 本地化所有文字和图片——语言选择(Language Selection) (183)6.5.5 使用时的注意事项 (183)·5·NGUI全面实践教程(内部资料)——版权所有6.6 事件触发器(UIEventTrigger) (184)6.6.1 可检测的常见事件 (185)6.6.2 使用示例 (185)6.7 委托与参数(Delegates & Parameters) (187)6.7.1 不限制参数个数 (187)6.7.2 示例1:引用自定义组件的属性 (190)6.7.3 示例2:设置显示的图片 (191)6.7.4 示例3:调节透明度 (192)第7章自带的工具 (194)7.1 预置体工具(Prefab Toolbar) (194)7.1.1 展示模式 (194)7.1.2 添加/删除预置体 (195)7.1.3 设置缩略图/图标 (197)7.2 图集制作工具(Atlas Maker) (199)7.2.1 制作新图集 (199)7.2.2 为已有的图集添加子图 (201)7.2.3 删除图集中的特定子图 (202)7.2.4 编辑图集中的子图(UIAtlas) (203)7.2.5 为子图添加特效 (204)7.3 字体制作工具(Font Maker) (204)7.3.1 制作静态字体 (205)7.3.2 使用自己制作的字体 (207)7.3.3 为字符添加特效(UIFont) (207)7.3.4 使用表情(图文混排) (208)7.4 面板工具(Panel Tool) (210)7.5 绘制调用工具(Draw Call Tool) (211)7.6 摄像机工具(Camera Tool) (212)7.7 UI模版工具(Widget Tool)(已过时) (212)NGUI全面实践教程(内部资料)——版权所有·6·第1章 学习NGUI前的准备NGUI是Unity最重要的插件,在Unity资源商店(Asset Store)的付费排行榜中始终名列前茅,如图1-1所示。
龙图教育:NGUI的UILable详解
龙图教育:NGUI的UILable详解NGUI的UILable是用来设置UI的文本的,可以在显示各种特效文字,也包含设置一些简易表情图片,具体内容见下:1.Font Size属性:用来设置字体大小2.Text 属性:设置需要显示的文字内容如果需要设置BBCode内容,则把BBCode选项勾选上[b]Bold[/b] 粗体[i]italic[/i] 斜体[u]underline[/u]下划线[s]strikethrough[/s]删除线[sub]sub[/sub]下标[sup]sup[/sup]上标[url=/][u]百度[/u][/url] 链接[00ff00]设置颜色[-] 设置显示颜色备注:给Label加一个Collider(ALT+SHIFT+C),并附加下面代码,可以检索点击位置的链接脚本更改Text值:UILabel lbl = GetComponent<UILabel>();lbl.text = "Hello world!";自定义的几个可爱的表情符,直接给label的Text赋值,具体如下::) :D <_<>_< x_x -_- o.o(A) (B) (X) (Y):(就有下面的效果:3.OverFlow属性:设置如何处理label的text超出允许的空间大小Shrink Content :自动根据Dimensions设置的大小来压缩字体Clamp Content :根据设定裁剪文本Resize Freely:自动设置到合适大小Resize Height:自动调整高度,宽度不变4.Spacing 属性:设置字与字的间隙和行距大小X:设置字与字之间到间隔,可以为负数,设置得当可以反序Y:设置行与行之间的间隔。
5.Max Lines :设置最大行数6.Gradient :设置渐变字7.Effect选项中,可以设置特效字1)Shadow:阴影,2倍geometry2)OutLine:轮廓,5倍geometry3)OutLine:轮廓,8倍geometry想要学游戏开发的童鞋可以来龙图教育,龙图教育是一家专业做互联网教育品牌的教育机构,线上线下都有,想要学到更多有关游戏开发的知识可以直接访问龙图教育官网。
Unity3d NGUI控件知识
一、Panel更多精彩请关注:【狗刨学习网】1、Alpha属性影响所有在panel下面的widget。
所以可以用它来淡出整个窗口2、如果你的UI需要被灯光影响,需要勾选上Normals。
3、没有panel所有东西都不能够被渲染出来。
如果你对Unity熟悉,你可以把UIPanel当做Renderer4、Panel会根据dimensions自动Clip所有它的子节点。
使用这个功能需要选择Clipping 下拉列表中的任意选项,之后调整Scene View中紫色矩形的尺寸,就像调整widget的尺寸一样。
通过这样做你可以把一个panel放到Scroll View中,让他轻松的拖拽。
5、一个动力学Rigidbody会自动增加到你的panel上,因为对于Unity来说这样会提升性能。
移动静态的collider会有很多消耗性能的操作,但是移动rigidbody就不会。
二、Camera1、UICamera真正做的事情是发送NGUI事件给所有被当前camera渲染的object,camera 是UICamera脚本所在的那个。
其实这个脚本做的事情和UI无关。
事实上如果你想让游戏里面的object接收OnPress、OnClick、OnDrag等这类事件,你需要把UICamera挂在你的主相机上2、UICamera的选项Event Type用来决定脚本如何排序mouse或者touch触发的事件。
如果是UI模式,这些事件顺序基于widget的depth——和渲染顺序一样。
如果UICamera挂到了Main Camera上,那么就需要把这个选项修改成World模式。
这样就会根据与相机的距离来排序点击到的object。
3、Event Mask用来决定哪些层会接收事件。
大多数情况下你需要的就是“Everything”,这个值会与UnityEngine.Camera's Culling Mask进行逻辑与运算,有需要的话你可以微调这个值。
初学FairyGUI,对比NGUI
初学FairyGUI,对比NGUI一直在做Unity方面的游戏开发,经同事介绍了解到有这么一个GUI能提供跨平台的能力,有独立UI编辑器,而且功能强大,能够组合成复杂的UI界面,可以导出到Unity,Flash,Starling等,文档还说未来将支持UE4,Cocos2d-x,libgdx等。
做过Unity的同学都知道,Unity4.6以前的版本原生GUI运行效率是非常低的,在移动设备上基本被卡的嗷嗷的,4.6版本之后Unity 开发了一套新的GUI,据说运行效率大大提升,非常好用,大有取代NGUI的意思,而且听说Unity的新版UI系统曾经hire过NGUI的作者,很多观点都和NGUI类似。
在没有新版原生UI系统时大部分都用NGUI,可想而知NGUI的影响力。
NGUI提供了多种控件和灵活的UI 处理方式,但是NGUI也有明显缺点。
1.NGUI需要维护图集,做过项目的同学都知道,图集处理不好会造成资源的重复浪费,就是说要把UI图片预先打成包,以便界面使用,但是在实际项目中改动如果太过频繁,有些根本用不到的图片也不知道有没有用过,删了又担心造成资源丢失的情况,除非对这一块特别熟悉的人,一般人都不敢乱删图片资源。
就算图集里面都是有用的资源,但是也会出现这样一种情况:同学1在Atlas A里面增加了一个图片P1运用到某个界面中,同学2不知道Atlas A里面新增了P1,于是他在Atlas B里面又增加了P1运用到另一个界面中,这时Atlas A 和Atlas B里面就都包含有图P1,造成了浪费,不过这点浪费这时看可以忽略不计,但是假如图片P1需要更新,这时灾难来了,由于多个Atlas用到了P1,根本不知道要更新哪一个Atlas.而且只要增加图片或者更新图片都需要更新图集,维护起来比较麻烦。
2.NGUI的消息响应机制是利用sendmessage来实现,而sendmessage利用反射机制,本身NGUI组件的身上已经挂了很多默认组件,在运行时就需要先load这些映射关系,先缓存起来,调用的时候在通过安全检查,字符串匹配,参数匹配与转换,最后才去invoke方法。
Unity3D教程:界面插件NGUI地使用 (2)
Unity3D教程:界面插件NGUI的使用(一)Posted on 2013年06月08日 by U3d / Unity3D 基础教程/被围观 153 次步骤1-Scene1.创建一个新的场景(New Scene)。
2.选择并删除场景里的MainCamera。
3.在NGUI菜单下选择Create a New UI,会打开UI创建向导。
Unity3D教程:界面插件NGUI的使用4.在创建向导中你能更改UI的基本参数。
现在我们选Default layer,点击Create Your UI 按钮。
5.就这样,你的UI便创建好了。
Unity3D教程:界面插件NGUI的使用注意:如果在一个已存在NGUI的项目中你要跳过第二步,并且你要选择一个不同的UI层,你还要确保非GUI相机不渲染UI层。
在做具体UI控件之前,我们看看UI向导为我们做了什么。
1.在UI Root (2D)对象上有个UIRoot脚本。
这个脚本会重新调整游戏对象符合你的屏幕高度,有自动和手动选择高度。
让你制定小部件在像素中的坐标,并且和游戏世界中的剩余对象相比依旧相对来说较小。
2.Camera对象包含Camera和UICamera脚本。
UICamera脚本包含NGUI的事件系统(event system)。
3.Anchor包含UIAnchor脚本。
虽然这个脚本可以附加给控件,但在这里可以避免Windows机器上半个像素偏移的问题。
4.Panel对象有UIPanel脚本,UIPanel是一个容器,它将包含所有UI小部件,并负责将所包含的部件组合优化,以减少绘制命令的调用。
同时,你可能还注意Panel(仪表板)GameObject现在已经被选中了。
也就是说下面添加的所有部件都将在作为它的子对象。
对应的场景在插件中的Tutorial 1 - Scene中有:Unity3D教程:界面插件NGUI的使用步骤2-Spirit现在让我们添加一些控件,在NGUI菜单中选择NGUI menu -> Create a Widget。
(NGUI基础控件)_
NGUI介绍及导入:
在Unity官方商店(Unity Assets Store)可以搜索到最 新版的NGUI。 工程视图下将NGUI导入。
NGUI介绍及导入:
NGUI成功导入后。
UI创建:
导入NGUI之后,可以使用NGUI的Create菜单创建UI。如下。
以下,以2D UI为例。
UI创建:
创建2D UI之后,游戏场景中随即出现UI Root游戏对象 ,还有一个子对象Camera。 Camera设定为只能渲染[绘制]出UI层的游戏对象,并挂 载有UI Camera脚本,处理点击、拖拽等事件。 UI Root游戏对象上除了基本的Transform组件外,还有 UI Root脚本、UIPanel脚本、RigidBody组件。
可调节控件的尺寸、显示在场景中的前后顺 序、以及自身轴心点,以下控件此模块相同 ,不再赘述。
UISprite及帧动画:
精灵帧动画:通过脚本控制精灵轮播显示的图片。
为精灵添加 SpriteAnimatio n脚本
本节资源见code6/资源/FrameImg
UILabel及富文本:
UILabel(文字控件)ቤተ መጻሕፍቲ ባይዱ:用于显示文字
创建方式:Create->Label 具体操作:需要指定Font(字体),才能显示文字。 指定字体:选中UILabel控件,检视面版中 NGUI/Unity->Font
常用参数说明: Modifier:字母的大小写设置 Overflow:溢出处理方式 Alignment:字体的对齐方式 Spacing :调整字体的间距
NGUI基础控件
知识概要:
NGUI介绍及导入 UI创建 UISprite及帧动画 UILabel及富文本 UITexture
Unity3D常用插件介绍
Unity3D常用插件介绍1)NGUI(UI编辑器插件)是一款强大的UI系统框架,拥有内置定位系统,内置键盘等功能。
NGUI是由C#语言编写,代码简洁明了,不包含任何DLL和外部资源。
2)FairyGUI(独立Unity的UI系统,UI编辑器)FairyGUI 再推一套UI解决方案,跟上面的框架不一样,这套算是集大成体。
首先是分离了UI与逻辑的开发(有一套专门的Adobe like 编辑器,Mac/Win 都有),丰富的控件集成(基本涵盖国内手游大部分的ui需求),国人开发。
个人独立游戏开发可以试试上面MarkLight的或者是更简单的自定义框架,团队项目的开启可以尝试下FairyGUI。
3)FingerGestures(手势触摸插件)顾名思义,这个是支持移动设备所有触摸事件的插件,包括点击,滑动,还有自定义手势等等。
4)EasyTouch(摇杆控制插件)用于移动平台上的RPG类的游戏,主要为了基于触摸屏,鼠标和摇杆的游戏开发者提供便利,它支持所有主流手势:轻触、连击、重击等。
5)ShareSDK(第三方登录和分享插件)功能强大的分享插件,支持一键分享并且配置起来十分简单,目前绝大多数的社交软件都支持,并且他们官方的文档写得特别清楚而且如果注册用户的话,还会有技术支持。
6)NGUI_HUD_Text这个可以用于游戏里血条的变化。
7)2dToolKit是一款2D开发组件,它具有很强的灵活性,可以让开发者在Unity中进行2D开发。
8)PlayerMaker是一个可视化脚本工具,开发者可以使用它很快的完成游戏原型制作,能够大大的提高开发效率,让你的游戏更加完美。
9)PathologicalGames用于绝大多数的曲线操作。
10)FxMaker侧重于unity里的粒子特效系统,这款插件提供了众多特效资源和效果预览,玩家可以随意组装效果并最终合成一个预设自己使用。
11)Magical FX魔法特效包。
12)water.unitypackage这是一款用于水的插件,性能还比较高,用于移动设备也没问题,弥补了专业版的unity水特效资源在移动设备卡机的不足。
Unity3d5的UGUI简单介绍
Canvas
所有的UI元素必须是canvas的子元素。 Canvas参数Render Mode的渲染模式: Screen Space-Overlay 画布铺满整个屏幕空间,ui元素置于屏 幕的最上层,简单来说看到的就是一个 2D的样子。 Pixel Perfect,使UI像素对应,UI的边 缘清晰,不模糊。 Sort Order,不同画布深度,即不同画 布的前后显示顺序。
Image
image组件,加入图片,要求图片的类 型是sprite 什么是sprite? 图片精灵是用来绘制图集的控件,精灵 可以在一张大图中去截取一部分(大图 就是整体图像集合(Atlas),而截取 的小图就是一个精灵),然后给精灵命 名,使用时通过精灵的名称就能直接绘 制,并且精灵还可以用来制作动画。 sprite有两种single & multiple(可切)
当然也可以设置InputField组件的其他 的属性
Toggle & ToggleGroup
Toggle类似复选框 可以实现对选项进行勾选或者不勾选的 操作,可用于音乐的开启、关闭等界面 功能。
Is On,Toggle开关是否为开启状态, 开始运行时,开关是否开启,在运行过 程中,随开关勾选变换而变化。
Canvas Scaler,用来处理缩放的,pc 或移动端分辨率不同,采用不同的设置 Constant Pixel Size:像素大小始终不 变
Canvas
所有的UI元素必须是canvas的子元素。 Canvas参数Render Mode的渲染模式: Screen Space-Camera 和之前的渲染模式类似,画布填满整个 屏幕空间,尺寸改变,画布也会自动改 变尺寸来匹配屏幕。 不同:多了一个UIcamera,所有的UI 元素由这个相机渲染。 Plane Distance 画布平面到相机的距离 Sorting Layer和Order in Layer与之前 的Sort Order功能有些相似,设置画布 的深度的。
Unity3D游戏开发之初始NGUI
Unity3D游戏开发之初始NGUINGUI是Unity3D引擎上一个最常用的界面制作工具。
特性完全集成到Inspector面板中。
不需要点击Play按钮就能查看结果。
在场景视图中看到的就是在游戏视图中得到的(所见即所得)。
基于组件的、模块化的特性:要让你的界面控件做什么,只需为其附加相应的行为,而不需要编码。
全面支持iOS/Android和Flash。
灵活的事件系统。
可以让复杂的UIs只占用一个draw call。
可以直接在编辑器中创建、更新/修改纹理地图集,或从Texture Packer程序导入纹理地图集。
支持光照贴图、法线贴图、折射等特性,让你尽情发挥创造力!支持硬边或柔性的面板裁剪。
支持灵活尺寸的表格,能够自动对控件进行排列。
通过IME输入法支持东方语言(有Web版本的演示程序)内建本地化系统。
内建的键盘和摇杆支持。
提供大量有用的辅助脚本,从改变按钮颜色到拖拽对象。
简单的内建补间动画系统。
简洁和高度优化的C#代码。
没有DLL,也不依赖于其他外部资源NGUI的使用方式与Unity的使用方式一样。
使用Widget Tool可快速创建模板化的控件,或者从基本组件创建你自己的控件。
可以按照你的意愿拷贝/粘贴,把你的窗口保存为prefabs。
所有一切只需简单地点击操作即可完成。
当需要编写代码让控件移动时,可以选择简单的例子代码,可以把你的控件转变为按钮、输入框、基于事件改变颜色、播放声音、触发动画等等。
[1]文章出处(狗刨学习网)第一步:导入NGUI包这个大家都应该会的了。
我就不多说了(截止到2014年7月9日,最新版的NGUI版本是3.6.7,我现在教程用的是3.6.5,NGUI包后面会给大家送上下载链接);导入之后,随便点下那个文件夹,在unity上方的菜单栏就会出现NGUI的菜单了。
第二部:给场景加上root1、首先打开Widget Wizard2、open一个新的UI,出现右边的界面,AddLayer,命名为NGUI3、可以看到出现,选择Layer为NGUI,第二个camera选项,分simple2D,advanced3D。
移动互联应用技术《NGUI插件简介及导入》
内容总结
简介。NGUI是严格遵循ISS原那么并用C#编写的Unity插件,提供强大的UI系统和事件通知框架。对所有其他用户而言,这意 味着更高的性能、更低的学习难度和更加有趣。完全集成到Inspector面板中,不需要点击Play按钮就能查看结果,在场景视图中 看到的就是在游戏视图中得到的。基于组件的模块化的特性:要让你的界面控件做什么,只需为其附加相应的行为,而不需要编 码。Shrink Portrait UI
第三页,共六页。
UI层简介
属性 Scaling Style
Minimum Height Maximum Height Shrink Portrait UIh
Content Height
Fit
说明 比例模式 Flexible UI Root最小高度 UI Root最大高度 缩放竖屏UI(当手机横屏转竖屏时,对UI进行缩放) 通过像素来适应UI
• NGUI是严格遵循ISS原那么并用C#编写的Unity插件,提供强大的UI系统和事件通知框架。 其代码简洁,多数类少于200行代码。这意味着程序员可以很容易地扩展NGUI的功能或调 节已有功能。对所有其他用户而言,这意味着更高的性能、更低的学习难度和更加有趣。 完全集成到Inspector面板中,不需要点击Play按钮就能查看结果,在场景视图中看到的就 是在游戏视图中得到的。基于组件的模块化的特性:要让你的界面控件做什么,只需为其 附加相应的行为,而不需要编码。支持IOS和Android,灵活的事件系统,可以让复杂的UI 只占用一个DrawCall。
Constrained/Constrained On Mobiles
设置设备屏幕的宽度
设置设备屏幕的高度
勾选后进行优先适应(宽度或高度)
NGUI 3
NGUI 3.x 深度管理及渲染优化UIWidget的显示顺序我们在设置UISprite、UILabel等控件的深度时,都是在设置其Widget样式中的De pth值。
其实这些控件都是继承至UIWidget。
但是UIPanel不是继承至UIWidget,Depth是UIPanel自身的一个属性。
在NGUI 3.x中每一个UIWidget的显示顺序由Depth值决定,与z轴没关系。
但是,这个Depth值并不单纯的是我们设置的值,而是由两部分组成。
一个是UIWidget自身的Depth值(即我们设置的值),另一个是UIWidget所在的UIPanel(最内层)的Depth 值。
我们可以理解为是由UIWidget所在UIPanel的Depth和UIWidget自身的Depth进行加权计算得出来的。
并且,UIPanel的权重非常大。
举个例子:UIPanel A的Depth为x,其上面有一个Depth值为m的UIWideget AUIPanel B的Depth为y,其上面有一个Depth值为n的UIWideget B只要x>y,那么不管m和n的大小,UIWideget A一定显示在UIWideget B之上。
NGUI的Draw Call合并2.1.Draw Call定义每次引擎准备数据并通知GPU的过程称为一次Draw Call。
Unity(或者说基本所有图形引擎)生成一帧画面的处理过程大致可以这样简化描述:引擎首先经过简单的可见性测试,确定摄像机可以看到的物体,然后把这些物体的顶点(包括本地位置、法线、UV等),索引(顶点如何组成三角形),变换(就是物体的位置、旋转、缩放、以及摄像机位置等),相关光源,纹理,渲染方式(由材质/Shader决定)等数据准备好,然后通知图形API——或者就简单地看作是通知GPU——开始绘制,GPU基于这些数据,经过一系列运算,在屏幕上画出成千上万的三角形,最终构成一幅图像。
UGUI与NGUI的区别与优缺点
UGUI与NGUI的区别与优缺点
UGUI与NGUI的区别与优缺点在学习Unity3D培训过程中,甭管你是自学也好,参加Unity3D 培训学习也好,对UGUI和NGUI肯定需要知道的,随着Unity4.6内置了UGUI后,大家也把关注点投向了UGUI。
那我们来说说NGUI 与UGUI的区别:
区别:
1、uGUI的Canvas 有世界坐标和屏幕坐标
2、uGUI的Image可以使用material
3、UGUI通过Mask来裁剪,而NGUI通过Panel的Clip
4、NGUI的渲染前后顺序是通过Widget的Depth,而UGUI
渲染顺序根据Hierarchy的顺序,越下面渲染在顶层.
5、UGUI 不需要绑定Colliders,UI可以自动拦截事件
6、UGUI的Anchor是相对父对象,没有提供高级选项,个
人感觉uGUI的Anchor操作起来比NGUI更方便
7、UGUI没有Atlas一说,使用Sprite Packer
8、UGUI的Navgation在Scene中能可视化
9、UGUI的事件需要实现事件系统的接口,但写起来也算简单
当然他们有各自的优缺点
1、NGUI还保留着图集,需要进行图集的维护。
而UGUI没有
图集的概念,可以充分利用资源,避免重复资源。
2、UIGI出现了锚点的概念,更方便屏幕自适应。
3、NGUI支持图文混排,UGUI暂未发现支持此功能。
4、UGUI没有UIWrap 来循环scrollview 内容。
5、UGUI暂时没有Tween组件。
UGUI与NGUI各有千秋,我们等待着UGUI的完善。
原文出自蓝鸥Unity3D培训转载请注明。
NGUI三大基础机制
NGUI三⼤基础机制 本⽂介绍以NGUI的版本是3.6.0版本为,主要介绍NGUI的原理,这个都是本⼈阅读代码得出的结论,如有错误,欢迎指定 在NGUI有,有三⼤基础机制⽀撑整个NGUI的显⽰和交互,这三⼤基础机制分别是:渲染机制事件、消息机制、间格动画。
下⾯将分别介绍这三个机制。
1、渲染机制事件 基础介绍 NGUI的UIWidget, UIDrawCall,UIGeometry和 UIPanel等基础脚本。
Ø UIWidget是UI的基础组件(UILabel,UISprite)的基类,含有组件的基本信息(width,Height,color 锚点等)Ø UIGeometry是UIWidget的⼏何数据,记录了顶点坐标,贴图的UVs和颜⾊等信息Ø UIDrawCall是将多个UIWidget的UIGeometry组合起来⼀起绘制Ø UIPanel ⽤于管理UIWidget、UIDrawCall等,实现界⾯的渲染裁剪、更新。
Ø UIRoot UI界⾯的根⽬录,⽤于分辨率适配和事件⼴播。
MeshFilter 和Mesh介绍: MeshFilter⽹格过滤器⽤于从你的资源中获取⽹格信息(Mesh)并将其传递到⽤于将其渲染到屏幕的⽹格渲染器当中。
MeshFilter 与 Mesh 联合使⽤,使模型显⽰到屏幕上。
要想在场景中看到这个⽹格(mesh),还需要为游戏对象(GameObject)添加⼀个⽹格渲染器(MeshRenderer),它应该是⾃动被添加的。
但是如果你将它从你的对象中移除。
你必须⼿动重新添加它。
如果⽹格渲染器(MeshRenderer)不存在,这个⽹格仍将存在于你的场景中。
但是它将不会被绘制。
NGUI的渲染机制 要详细的了解NGUI渲染机制,⾸先需要打开NGUI隐藏的渲染节点,秘密就在在UIDrawCall.Create(string name) 中的HideFlags.HideAndDontSave, typeof(UIDrawCall));这⼀⾏代码。
NGUI所见即所得之UIGridUITable
NGUI所见即所得之UIGridUITableNGUI所见即所得之UIGrid & UITableBy D.S.Qiu 尊重他⼈的劳动,⽀持原创,转载请注明出处:你是不是对 UIGrid 和 UITable 定位计算⽅法还模糊不清,那么这篇⽂章就是你需要的。
NGUI 提供了 Grid 和 Table 组件,⽀持的参数很少,功能也很鸡肋,完全不能像 CSS 的 Box 模型那样随⼼所欲的布局,⽽且使⽤ UIGrid 和 UITable 的时候经常会相对 UIGrid 和 UITable 挂载的 Transform 出现偏移,之前使⽤的时候,都是根据经验来规避的。
今天打算把UIGrid 和 UITable 的排列规则看下,才形成此⽂。
UIGrid 和 UITable 的原理很简单,对⼦ Transform 的 List 进⾏排序,然后更加不同的规则进⾏定位排列(UIGrid 和UITable 还是有很⼤不同的)。
排序(Sort)UIGrid 和 UITable 定义了5种排列⽅式(其实是3种,None默认不排序即Transform的默认排序,Custom虽然提供virtual 可以重载):C#代码1. public enum Sorting2. {3. None,4. Alphabetic,5. Horizontal,6. Vertical,7. Custom,8. }对应的三种排序⽅法:集 Alphabetic 按照名字字符串排序,Horizontal 和 Vertical 按照localPosition 进⾏的排序C#代码1. static public int SortByName (Transform a, Transform b) { return pare(, ); }2. static public int SortHorizontal (Transform a, Transform b) { return pareTo(b.localPosition.x); }3. static public int SortVertical (Transform a, Transform b) { return pareTo(a.localPosition.y); }这⾥说下,虽然提供了Custom⽅式,第⼀感觉NGUI的developer考虑很周到,但是提供的确实重载 virtual 函数的⽅式,D.S.Qiu 觉得这种⽅式太不好了,为了⼀个⽅法就要写⼀个⼦类去重载,个⼈觉得指定⼀个委托,扩展起来会更直观,但这⼀要求开发者⼀开始就得指定这个 Custom Sort Delegate。
经验分享-NGUI渲染方式及常见性能问题
前言:由于水平有限,肯定有些地方不妥或者理解错误,诚盼大家批评指正,互相学习。
一、NGUI的基本结构及渲染方式在平时UI制作中,我们将一个个UISprite、UILabel等组件拼装好、放置在UIPanel中。
U IPanel作为总体控制,将组件显示出来。
那就开始吧,看看他们之间具有怎样的关系。
诸如UISprite、UILabel、UITexture等常用组件,继承于UIWidget基类。
组件的渲染依附于UIPanel,接下来就组件的渲染进行一些讨论,并引出后面的性能问题。
UIWidget提供了UI组件基本的框架结构(位置、深度等信息),UIWidget有一个非常重要的成员UIGeometry,这个类非常重要,UI组件的几何数据都用它来保存,让我们来深入看看它。
先看看UIGeometry的自我介绍吧:正如它自我介绍中描述的,牺牲内存带来性能提升,类比对象池,虽然二者不同,不过内存换性能的经典思想无处不在哈。
看完UIGemotetry的自我介绍,我们再来看看他提供了什么:1、成员:顶点、UV、颜色、法线、切线2、函数:Clear(自我清理)、ApplyTransform(自身坐标与panel下坐标的矩阵转换)、WriteToBuffers(将数据压入panel)哇哦,我们发现WriteToBuffers 这个函数把数据给了别人,给了谁?让我们继续追踪它,看看它把数据给了谁?发现UIWidget中有一个函数调用了它:,继续追踪,发现UIWidget中的该方法又被UIPanel调用,哦,原来一个个组件的数据,都被汇总到了UIPanel中(其实Panel是通过调用UIDrawCall对这些数据进行渲染的,其中还牵扯到了排序、UIDrawCall实例化等问题)。
小结一下:1、Geometry管理了UIWidget的几何数据,而UIWidget通过UpdateGeometry、OnFill方法更新geometry数据。
UGUI VS NGUI
UGUI VS NGUI注[1]:该比较是基于15年-16年期间使用NGUI(3.8.0版本)与UGUI(4.6.9版本)所得注[2]:仅对工作中经常接触到的功能做总结,如有疏漏,欢迎指正讨论渊源先来段小八卦,听说UGUI的主创人员是从NGUI招过去的,所以,UGUI中有很多概念,对于用过NGUI的童鞋来说,看起来都似曾相识。
先来个概念对比:再看下UI主要的通用几个组件:总体来说,对于基本的UI元素,NGUI与UGUI都有;在组件的丰富度上,UGUI略逊于NGUI。
例如,UGUI没有Localization、Play Sound组件;NGUI的Label是支持静态图文混排跟文字URL超链接的,而UGUI不支持。
所以使用UGUI的时候需要自行开发以上缺失的组件及功能。
差异化RectTransformUGUI采用RectTransform的概念,将NGUI中的Transform+Widget+Anchor的功能,封装了起来。
相对于NGUI的Anchor可以直接对某个GO进行锚点而言,UGUI新的锚点设计显然只能针对父节点来进行,是做不到跨层级锚点的,丧失了灵活性;但是也解决了NGUI多重锚点之间,由于时序问题,控件“锚飞了”的情况。
比较难理解的,应该是Anchor按比例锚点做相对布局的情况,普通的使用方法,可以参考Unity的官方文档[1],这里不展开。
要使用脚本来修改UI控件,情况就会变得比较复杂,需要理解绝对布局(anchor四个角都在一起)跟相对布局(anchor四个角分开,会按父控件的百分比来定义该控件)的情况。
同时,也要理解Transform与anchoredPosition的关系。
曾经碰到过一个问题,UI偶现消失。
后来发现是因为开始创建的时候没有对Localposition 做重置,UGUI会通过anchoredPosition来重置Transform的x跟y,但没有重置z值,所以z值是乱的,所以当Z值大于UICamera的Clip范围的时候,就会被裁剪掉,消失了。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
完全集成到Inspector面板中。
不需要点击Play按钮就能查看结果。
在场景视图中看到的就是在游戏视图中得到的(所见即所得)。
基于组件的、模块化的特性:要让你的界面控件做什么,只需为其附加相应的行为,而不需要编码。
全面支持iOS/Android和Flash。
灵活的事件系统。
可以让复杂的UIs只占用一个draw call。
可以直接在编辑器中创建、更新/修改纹理地图集,或从Texture Packer程序导入纹理地图集。
支持光照贴图、法线贴图、折射等特性,让你尽情发挥创造力!
支持硬边或柔性的面板裁剪。
支持灵活尺寸的表格,能够自动对控件进行排列。
通过IME输入法支持东方语言(有Web版本的演示程序)
内建本地化系统。
内建的键盘和摇杆支持。
提供大量有用的辅助脚本,从改变按钮颜色到拖拽对象。
简单的内建补间动画系统。
简洁和高度优化的C#代码。
没有DLL,也不依赖于其他外部资源NGUI的使用方式与Unity的使用方式一样。
使用Widget Tool可快速创建模板化的控件,或者从基本组件创建你自己的控件。
可以按照你的意愿拷贝/粘贴,把你的窗口保存为prefabs。
所有一切只需简单地点击操作即可完成。
当需要编写代码让控件移动时,可以选择简单的例子代码,可以把你的控件转变为按钮、输入框、基于事件改变颜色、播放声音、触发动画等等。