【文档说明】Unity-3D增强现实开发-第4章-Unity3D-的用户界面基础课件.ppt，共(28)页，1.628 MB，由小橙橙上传

转载请保留链接：https://www.ichengzhen.cn/view-3236.html

以下为本文档部分文字说明：

Unity3D增强现实技术开发与实践教程第4章Unity3D的用户界面基础知识目标能力目标任务引入2022年11月13日第1页Unity3D增强现实技术开发与实践教程知识目标了解Canvas对象了解UGUI图形用户界面了解UGUI控件2

022年11月13日第2页Unity3D增强现实技术开发与实践教程能力目标掌握Unity3D的视图功能掌握Transform和RectTransform组件掌握UGUI基本控件的应用2022年11月13日第3页Unity3D增强现实技术开发与实践教程任务引入

软件的用户图形界面是认识和使用软件的基础，Unity3D软件具有强大的UGUI用户界面。与传统的GUI相比，它具有使用灵活、界面美观、支持个性化定制等特点，并且还支持多语言本地化；本章主要介绍Unity3D软件的用户界面，特别是UGUI的控件使用方法

，与大家一起敲开UGUI开发的大门。2022年11月13日第4页Unity3D增强现实技术开发与实践教程4.1UnityUGUI简介GUI（GraphicUserInterface）图形用户界面是一种通图形方式显示的用户操作界面；

NGUI是一个老牌的UnityUI插件解决方案，NGUI是严格遵循KISS（KeepItSimple,Stupid.）原则并采用C#语言编写的Unity插件，提供强大的UI系统和时间通知框架。在Unity4.6以后，Un

ity推出了新的UGUI，包括后面的Unity5.x都采用了这一新的系统。2022年11月13日第5页Unity3D增强现实技术开发与实践教程4.2Canvas和RectTransform2022年11月13

日第6页Canvas（画布）是UGUI最基本的部分，所有的UGUI对象都依赖于Canvas，Canvas是所有UI对象的根元素。图4-1新建一个场景并保存Unity3D增强现实技术开发与实践教程图4-2新建并保存一个名为Canvas的场景2022年11月13日命名为Canvas，保存在Asset

s/Scenes目录下。第7页Unity3D增强现实技术开发与实践教程选择GameObject菜单下的UI->Canvas，在Scene视图中单击2D按钮切换为平面视图。图4-3切换为2D视图2022年11月13日第8页Unity3D增强现实技术开发与实践教程双击Hierar

chy视图下的Canvas，使画布居中显示。选中Canvas后观察Inspector面板。图4-4Canvas组件的属性面板2022年11月13日第9页Unity3D增强现实技术开发与实践教程可以看到Canvas在场景中是一个矩形，在Scene视图中选中Canvas可以看到

矩形周围有四个点表示可以拖动。图4-5Canvas的渲染2022年11月13日Canvas组件的第一个属性为RenderMode（渲染模式），它的值为ScreenSpace–Overlay，表示画布的大小是由屏幕尺寸决定的，

运行时画布将充满整个屏幕，并且当设备的分辨率变化时，Canvas的大小也会相应变化。如果把RenderMode调整为WorldSpace，就会发现Canvas的大小可调了。但ScreenSpace-Overlay是比较常用的渲染模式，所以还是将RenderMode设置为ScreenSpace-O

verlay。第10页Unity3D增强现实技术开发与实践教程通常情况下UI由设计师给出。UI图的分辨率是固定的，如果设备的分辨率不一样，可能会导致UI错乱、重叠等问题。图4-6canvas的缩放2022年11月13日在CanvasScaler组件中，将UIScaleMode

调整为ScaleWithScreenSize。ReferenceResolution调整为UI图的分辨率，如1366像素x768，ScreenMatchMode设置为Expand，如图4-6所示第11页Unity3D增强现实技术开发与实践教程2022年11月13日RectT

ransform是一种用于所有UI元素的新Transform组件；RectTransform拥有常规的Transform组件位置、旋转和缩放，也具有宽度和高度用于指定矩形的尺寸；RectTransform有Anchors（锚点）和P

ivot（中心点）的概念，旋转和缩放将围绕Pivot中心点发生变化；锚点在场景视图中显示为4个小三角形手柄，如果一个RectTransform的父项也是一个RectTransform，那么可以将子RectTransform锚定到父RectTransfor

m上。RectTransform与Transform的区别第12页Unity3D增强现实技术开发与实践教程2022年11月13日如果UI元素锚定到父中心，元素保持与中心的固定偏移；如果UI元素锚定到父级右下角，元素保持与右下角固定偏移；在Inspector中，可以在RectTransform组

件的左上角找到AnchorPresets按钮，从这里可以快速选择一些最常见的锚定选项。可以将UI元素锚定到父项的边或中间，或者与父大小一起展开，水平和垂直锚定是独立的。图4-7预设的中心点第13页Unity3D增强现实技术开发与实践教程2022年11月13日第14页4.3Event

Syste在创建Canvas的时候，在Hierarchy视图中会自动添加一个EventSystem。图4-8EventSystem（事件系统）Unity3D增强现实技术开发与实践教程2022年11月1

3日EventSystem的Inspector面板中有两个重要的组件，第一个是EventSystem，第二个是StandaloneInputModule。图4-9EventSystem的属性面板EventSystem（事件系统）是用来操作输入、射线

以及发送事件的。事件系统的责任就是在一个Unity场景中处理事件。一个场景中只能有一个EventSystem。StandaloneInputModule组件是系统提供的标准输入模块，继承自BaseInputMo

dule。BaseInputModule是一个基类模块，负责发送输入事件（单击、拖曳、选中等）到具体对象。第15页Unity3D增强现实技术开发与实践教程2022年11月13日4.4UGUI控件的简单介绍创建一个文本，在Hierarchy视图中的Canvas，选择UI->text。图4-10UI

Text（文本组件）第16页Unity3D增强现实技术开发与实践教程2022年11月13日在Hierarchy视图中的Canvas下出现了名为Text的子物体，如图4-11。查看Text的Inspector面

板，可以看到里面有一个Text组件，如图4-12。图4-11Text（文本对象）图4-12Text（文本组件）第17页Unity3D增强现实技术开发与实践教程2022年11月13日第一个属性为Text，如图4-13所示通过修改其中的值就可以修改文

本的内容。Character属性段中可以修改字体格式，Paragraph中可以设置段落格式，如图4-14所示。图4-13在Text组件中定义文本样式图4-14文本在Canvas上的效果第18页Unity3D增强现实技术开发与实践教程2022年11月13日通过Image

组件来创建一个图片。右键Hierarchy视图中的Canvas，选择UI->Image。创建完成以后为一个白色矩形，这个矩形为图片的容器，决定了图片的大小和位置。图片的内容需要在Inspector面板中的SourceImage中填写。图4-15Image第1

9页Unity3D增强现实技术开发与实践教程2022年11月13日在项目中导入一张图片，如图4-16所示。选中图片，在Inspector界面中将TextureType修改为Sprite（2DandUI），然后单击A

pply，如图4-17。图4-16导入图片图4-17编辑图片的贴图类型第20页Unity3D增强现实技术开发与实践教程2022年11月13日再次选中Hierarchy视图中的Image，在Inspector中单击So

urceImage后的圆圈，选择刚导入的图片资源，如图4-18所示。图4-18将贴图应用到Image组件中第21页Unity3D增强现实技术开发与实践教程2022年11月13日调整Image的尺寸在图4-18的左下角导入的图片上

提示中，可以看到原图片的大小为535像素x300像素，因此将Image容器图片的宽高也调节为同样大小，如图4-19所示。图4-19设置Image对象的宽高第22页Unity3D增强现实技术开发与实践教程2022年11月

13日右键Hierarchy视图中的Canvas，选择UI->Button。可以看到在Hierarchy下的button中还有一个Text子物体。图4-20Hierarchy层级关系和Button下的T

ext子物体第23页Unity3D增强现实技术开发与实践教程2022年11月13日Image组件用来修改Button的贴图，Button组件用来调节按钮动画和按钮事件。Interactable控制按钮是否可用；transition

控制按钮的过渡方式；ColorTint是颜色变化；SpriteSwap是贴图变化；Animation是动画过渡。OnClick()为单击事件。图4-22Button组件的各项设置在Scene中让Image的中心和Button的中心对齐，如图4-2

3所示。图4-23中心对齐第24页Unity3D增强现实技术开发与实践教程2022年11月13日在Image的Inspector界面中将Image无效化，如图4-24中所示。图4-24设置一个对象为非活跃状态选择Button，

单击OnClick()下的“+”号，如图4-25所示。图4-25添加事件处理函数第25页Unity3D增强现实技术开发与实践教程2022年11月13日如4-26中单击GameObject右侧的圆圈，选择Image。图4-26选择操作对象第26页Unity3D

增强现实技术开发与实践教程2022年11月13日选择Function为GameObject->SetActive（bool），如图4-27。图4-27选择设置活跃性的方法单击新产生的方框，如图4-28。

图4-28设置参数为True第27页Unity3D增强现实技术开发与实践教程2022年11月13日4.5本章小结图4-29本章知识结构第28页