




版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
1、Unity3d从入门到精通 UGUI 孙肖雨 2015/12/06第1页,共22页。目录UGUI简介UGUI组件效果展示谢谢第2页,共22页。UGUI简介NGUIEzGUI、其他UGUI第3页,共22页。NGUINGUI是严格遵循KISS原则并用C#编写的Unity插件,提供强大的UI系统和事件通知框架。相当长的一段时间内,NGUI是Unity UI的第一解决方案。当需要编写代码让控件移动时,可以选择简单的例子代码,可以把你的控件转变为按钮、输入框、基于事件改变颜色、播放声音、触发动画等等。KISS原则是啥?KISS原则源于David Mamet(大卫马梅)的电影理论。KISS原则是英语 Ke
2、ep It Simple, Stupid。KISS原则是指在设计当中应当注重简约的原则。简单的理解这句话就是,要把一个系统做的连白痴都会用。第4页,共22页。UGUI ?!UGUI即UnityGUI是官方的UI的实现方式,后来因为效率和可视化程度低,逐渐被NGUI和EzGUI等第三方插件替代。但是,Unity4.6之后呢,又推出了新的uGUI系统(据说是把NGUI的作者挖过去了),包括后面的Unity5.x都采用了这一新的系统。uGUI还在不断完善,应该会超越NGUI第5页,共22页。Unity视图1Hierarchy视图显示的是当前场景Scene里的游戏对象。为什么提?uGUI可以直接在Hi
3、erarchy面板中上下拖拽来对渲染进行排序,越上面的UI会越先被渲染。(见例子)第6页,共22页。Unity视图2Scene视图是对场景中游戏对象进行可视化操作。Game视图显示的是游戏运行时的图像。Inspector视图显示当前选中游戏对象的所有组件及组件的属性。第7页,共22页。Canvas所有的UI元素必须是canvas的子元素。Canvas参数Render Mode的渲染模式:Screen Space-Overlay画布铺满整个屏幕空间,ui元素置于屏幕的最上层,简单来说看到的就是一个2D的样子。Pixel Perfect,使UI像素对应,UI的边缘清晰,不模糊。Sort Order
4、,不同画布深度,即不同画布的前后显示顺序。Canvas Scaler,用来处理缩放的,pc或移动端分辨率不同,采用不同的设置Constant Pixel Size:像素大小始终不变第8页,共22页。Canvas所有的UI元素必须是canvas的子元素。Canvas参数Render Mode的渲染模式:Screen Space-Camera和之前的渲染模式类似,画布填满整个屏幕空间,尺寸改变,画布也会自动改变尺寸来匹配屏幕。不同:多了一个UIcamera,所有的UI元素由这个相机渲染。Plane Distance 画布平面到相机的距离Sorting Layer和Order in Layer与之前
5、的Sort Order功能有些相似,设置画布的深度的。第9页,共22页。Canvas所有的UI元素必须是canvas的子元素。Canvas参数Render Mode的渲染模式:World Space世界空间模式。canvas被视为一个类似Plane的游戏对象。这个模式下,画布的大小可以在Rec Transform里进行设置。这个时候是3d的,UI元素可以位于普通3d物体的前面或后面显示。特别:有一个Event Camera,用来指定接受事件的摄像机,可以通过画布上的Graphic Raycaster组件发射射线产生事件。注:EventSystem,是创建UI元素时,自动生成的,UI元素响应,不
6、能缺少它。第10页,共22页。Rect TransformRect Transform是继承自Transform(包括position、Rotation、Scale)。锚点(anchor):这里有一个锚点的概念。左中右、上中下,有9中锚点;用锚点来确定或者固定UI元素的位置。伸展(stretch):也是用来确定位置和形变的。如果选择stretch的某一种拉伸效果,那么UI元素就会相对于canvas进行相应变化。这个变化是相对的变化,这样就可以很好的处理形变的问题。第11页,共22页。Imageimage组件,加入图片,要求图片的类型是sprite什么是sprite?图片精灵是用来绘制图集的控件
7、,精灵可以在一张大图中去截取一部分(大图就是整体图像集合(Atlas),而截取的小图就是一个精灵),然后给精灵命名,使用时通过精灵的名称就能直接绘制,并且精灵还可以用来制作动画。sprite有两种single & multiple(可切)第12页,共22页。RawImageImage元素用的是sprite格式的文本,RawImage使用普通的Texture2D贴图。UV Rect属性X、Y是指图片的偏移X在水平方向的偏移,值改变,会使图片重复出现Y是在垂直方向上的偏移。W、H可以改变图片的显示图片,即w=2时,图片会显示2个,宽度会被压缩。同样若是h=2,那么高度就会被压缩一半,用来显示2个图
8、片。Mask遮罩,可以遮挡图片多余的部分,可以和scrollBar结合使用。第13页,共22页。Text&ButtonText文本Line Spacing 是设置行间距的Rich Text 富态字Best fit 忽略字体大小,将文本全部显示在元素区域。所有的UI元素可以添加轮廓和阴影效果。Shadow 和 Outline修改Effect Color和Effect Distance可以看到明显的变化。第14页,共22页。Text&Button&InputFieldButton首先,button中,也包括一个Text,设置和之前的是一样的。Transition,响应用户的可视化操作方式。None
9、无ColorTint,颜色SpriteSwap,精灵替换Animation,动画On Click 点击事件第15页,共22页。Text&Button&InputFieldInputField是组合image和text产生的。具体操作:首先新建一个image组件,设定图片大小;新建一个text,将text里的Rich text 取消勾选,调整大小(小于image);在Hierarchy窗口中,将text拖动,使之成为image的子对象。为image添加Input Field组件,为该组件中的Text Component属性添加Text组件,即将之前新建的Text拖动到这里。当然也可以设置Inpu
10、tField组件的其他的属性第16页,共22页。Toggle &ToggleGroupToggle类似复选框可以实现对选项进行勾选或者不勾选的操作,可用于音乐的开启、关闭等界面功能。Is On,Toggle开关是否为开启状态,开始运行时,开关是否开启,在运行过程中,随开关勾选变换而变化。Group,Toggle所处的组,后面的Toggle Group相关。On Value Changed, 值变换响应,事件相应。第17页,共22页。Toggle &ToggleGroupToggle Group,属于一个开关组的Toggle,就只能有一个勾选。怎么实现?首先,在canvas下新建一个Create
11、 Empty,创建一个空的组件,命名为Toggle Group;然后为这个空的组件添加 Toggle Group组件;将三个Toggle拖到Toggle Group下,成为子对象,为三个toggle选择所属的组;将后两个Is on 勾选取消。运行之后,Toggle只有一个勾选。第18页,共22页。Slider &滚动区域 &Scroll barSlider滑动条可以设定参数为预定取值范围里的数。值由滑动柄在滑动条的相对位置决定,可以用来实现音量控制、发兵数量等功能。Direction,方向:从左到右,从右到左,从上到下,从下到上Min/Max Value,最小/最大值Whole Numbers
12、,是否限定为整数Value 值On Value Changed,响应事件第19页,共22页。Slider &滚动区域 &Scroll bar滚动区域,Scroll Rect组件滚动区域怎么?新建新的游戏对象,Create Empty;,命名为SrollRect,再然后加上Scroll Rect组件;可以新建image,使之成为ScrollRect的子对象,图片就可以有拖动效果。Content,被拖拽的内容H、V,分别代表是否可水平、垂直拽Movement Type:Unrestricted,不限制,可以移出去Elastic,限制,移出后弹回Clamped,限制,不可移出Inertia,惯性,rate,拖拽后减速度H、V Scroll Bar,水平垂直滚动条第20页,共22页。Slider &滚动区域 &Scroll barScroll Bar滚动条可以为Scroll Rect添加滚动条,以显示当前滚动的位置,滚动条也可以拖拽。Mask,遮罩的使用
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 《扩展现实(XR)沉浸式LED显示屏》征求意见稿
- 人教河南 九年级 下册 语文 期末专题训练《 专题九 古诗词鉴赏》习题课 课件
- 买卖猪仔笼子合同范例
- 农村粉刷墙体合同范例
- 加油站充电桩安装合同范例
- 劳动合同聘用合同范本
- 借贷利息合同范例
- 中考语文复习热点题型专项训练:衔接与排序、标点与修辞(原卷版)
- 重庆市丰都县某中学2024-2025学年七年级上学期第二次月考地理试题(含答案)
- 中考英语一轮复习:句型转换(讲义)(解析版)
- GB/T 4706.28-2024家用和类似用途电器的安全第28部分:吸油烟机及其他烹饪烟气吸排装置的特殊要求
- 2024江苏苏州市浒墅关经开区招聘村(社区)人员笔试历年典型考题及考点剖析附答案带详解
- 中医医疗技术手册2013普及版
- 华东政法大学2017-2018学年期末测试《国际经济法概论》试卷
- 文化创意与策划实训报告总结
- 江城镇矛盾纠纷排查调处考核奖惩办法(试行)
- 2024年江西农业工程职业学院单招职业适应性测试题库含答案
- 工程文化概论机械工程与文化
- 2024年中华全国总工会文工团用人员招聘笔试冲刺题(带答案解析)
- 精神科出院康复指导与随访制度
- 机械维修类设备采购 投标文件(技术方案)
评论
0/150
提交评论