Unity-3D增强现实开发实战第4章-Unity3D-的用户界面基础课件.ppt

1、第第4 4章章 Unity3D Unity3D 的用户界面基础的用户界面基础知识目标能力目标任务引入2022年8月9日第1页知识目标知识目标了解了解 Canvas 对象对象了解了解 UGUI 图形用户界面图形用户界面 了解了解 UGUI 控件控件2022年8月9日第2页掌握掌握 Unity3D Unity3D 的视图功能的视图功能掌握掌握 Transform Transform 和和 Rect Transform Rect Transform 组件组件掌握掌握 UGUI UGUI 基本控件的应用基本控件的应用2022年8月9日第3页l软件的用户图形界面是认识和使用软件的基础，Unity3D 软

2、件具有强大的UGUI用户界面。与传统的GUI相比，它具有使用灵活、界面美观、支持个性化定制等特点，并且还支持多语言本地化；l本章主要介绍Unity3D软件的用户界面，特别是UGUI 的控件使用方法，与大家一起敲开UGUI开发的大门。2022年8月9日第4页4.1 Unity UGUI 简介 GUI（Graphic User Interface）图形用户界面是一种通图形方式显示的用户操作界面；NGUI 是一个老牌的 Unity UI 插件解决方案，NGUI 是严格遵循 KISS（Keep It Simple,Stupid.）原则并采用 C#语言编写的 Unity 插件，提供强大的 UI 系统和时

3、间通知框架。在 Unity4.6 以后，Unity 推出了新的 UGUI，包括后面的 Unity5.x都采用了这一新的系统。2022年8月9日第5页4.2 Canvas 和 Rect Transform 2022年8月9日第6页Canvas（画布）是 UGUI 最基本的部分，所有的 UGUI 对象都依赖于 Canvas，Canvas 是所有 UI 对象的根元素。图 4-1 新建一个场景并保存图 4-2 新建并保存一个名为 Canvas 的场景2022年8月9日命名为 Canvas，保存在 Assets/Scenes 目录下。第7页选择 Game Object 菜单下的 UI-Canvas，在

4、Scene 视图中单击 2D 按钮切换为平面视图。图 4-3 切换为 2D 视图2022年8月9日第8页双击 Hierarchy 视图下的 Canvas，使画布居中显示。选中 Canvas 后观察Inspector 面板。图 4-4 Canvas 组件的属性面板2022年8月9日第9页可以看到 Canvas 在场景中是一个矩形，在 Scene 视图中选中 Canvas 可以看到矩形周围有四个点表示可以拖动。图 4-5 Canvas 的渲染2022年8月9日Canvas 组件的第一个属性为 Render Mode（渲染模式），它的值为 Screen Space Overlay，表示画布的大小是由

5、屏幕尺寸决定的，运行时画布将充满整个屏幕，并且当设备的分辨率变化时，Canvas 的大小也会相应变化。如果把 Render Mode 调整为 World Space，就会发现 Canvas 的大小可调了。但 Screen Space-Overlay 是比较常用的渲染模式，所以还是将 Render Mode设置为 Screen Space-Overlay。第10页通常情况下UI 由设计师给出。UI 图的分辨率是固定的，如果设备的分辨率不一样，可能会导致 UI 错乱、重叠等问题。图 4-6 canvas 的缩放2022年8月9日在 Canvas Scaler 组件中，将 UI Scale Mode

6、 调整为 Scale With Screen Size。Reference Resolution 调整为UI 图的分辨率，如 1366 像素 x768，Screen Match Mode 设置为 Expand，如图 4-6所示第11页2022年8月9日 Rect Transform 是一种用于所有 UI 元素的新 Transform 组件；Rect Transform 拥有常规的 Transform 组件位置、旋转和缩放，也具有宽度和高度用于指定矩形的尺寸；Rect Transform 有 Anchors（锚点）和 Pivot（中心点）的概念，旋转和缩放将围绕 Pivot 中心点发生变化；锚点

7、在场景视图中显示为 4 个小三角形手柄，如果一个 Rect Transform 的父项也是一个 Rect Transform，那么可以将子 Rect Transform锚定到父 Rect Transform 上。第12页2022年8月9日如果 UI 元素锚定到父中心，元素保持与中心的固定偏移；如果 UI 元素锚定到父级右下角，元素保持与右下角固定偏移；在 Inspector 中，可以在 Rect Transform 组件的左上角找到 Anchor Presets 按钮，从这里可以快速选择一些最常见的锚定选项。可以将 UI 元素锚定到父项的边或中间，或者与父大小一起展开，水平和垂直锚定是独立的。

8、图 4-7 预设的中心点第13页2022年8月9日第14页4.3 EventSyste在创建 Canvas 的时候，在 Hierarchy 视图中会自动添加一个 EventSystem。图 4-8 EventSystem（事件系统）2022年8月9日EventSystem 的 Inspector 面板中有两个重要的组件，第一个是 Event System，第二个是 Standalone Input Module。图 4-9 EventSystem 的属性面板Event System（事件系统）是用来操作输入、射线以及发送事件的。事件系统的责任就是在一个 Unity 场景中处理事件。一 个 场

9、景 中 只 能 有 一 个EventSystem。Standalone Input Module 组件是系统提供的标准输入模块，继承自 Base Input Module。Base Input Module 是一个基类模块，负责发送输入事件（单击、拖曳、选中等）到具体对象。第15页2022年8月9日4.4 UGUI 控件的简单介绍创建一个文本，在 Hierarchy视图中的 Canvas，选择 UI-text。图 4-10 UI Text（文本组件）第16页2022年8月9日在 Hierarchy 视图中的 Canvas 下出现了名为 Text 的子物体，如图 4-11。查看 Text 的 I

10、nspector 面板，可以看到里面有一个 Text 组件，如图 4-12。图 4-11 Text（文本对象）图 4-12 Text（文本组件）第17页2022年8月9日第一个属性为 Text，如图 4-13 所示通过修改其中的值就可以修改文本的内容。Character 属性段中可以修改字体格式，Paragraph 中可以设置段落格式，如图 4-14 所示。图 4-13 在 Text 组件中定义文本样式图 4-14 文本在 Canvas 上的效果第18页2022年8月9日通过 Image 组件来创建一个图片。右键 Hierarchy 视图中的 Canvas，选择 UI-Image。创建完成以后

11、为一个白色矩形，这个矩形为图片的容器，决定了图片的大小和位置。图片的内容需要在 Inspector 面板中的 Source Image 中填写。图 4-15 Image 第19页2022年8月9日在项目中导入一张图片，如图4-16 所示。选中图片，在 Inspector 界面中将 Texture Type 修改为 Sprite（2D and UI），然后单击 Apply，如图 4-17。图 4-16 导入图片图 4-17 编辑图片的贴图类型第20页2022年8月9日再次选中 Hierarchy 视图中的 Image，在 Inspector 中单击 Source Image 后的圆圈，选择刚导入

12、的图片资源，如图 4-18 所示。图 4-18 将贴图应用到 Image 组件中第21页2022年8月9日调整Image 的尺寸在图 4-18 的左下角导入的图片上提示中，可以看到原图片的大小为 535 像素 x300 像素，因此将 Image 容器图片的宽高也调节为同样大小，如图4-19 所示。图 4-19 设置 Image 对象的宽高第22页2022年8月9日 右键 Hierarchy 视图中的 Canvas，选择 UI-Button。可以看到在 Hierarchy 下的 button 中还有一个 Text 子物体。图 4-20 Hierarchy 层级关系和 Button 下的 Text

13、 子物体第23页2022年8月9日Image 组件用来修改 Button 的贴图，Button 组件用来调节按钮动画和按钮事件。Interactable 控制按钮是否可用；transition 控制按钮的过渡方式；Color Tint 是颜色变化；Sprite Swap 是贴图变化；Animation 是动画过渡。On Click()为单击事件。图 4-22 Button 组件的各项设置在 Scene 中让 Image 的中心和 Button 的中心对齐，如图 4-23 所示。图 4-23 中心对齐第24页2022年8月9日在Image的Inspector界面中将Image无效化，如图 4-2

14、4 中所示。图 4-24 设置一个对象为非活跃状态选择 Button，单击 On Click()下的“+”号，如图 4-25 所示。图 4-25 添加事件处理函数第25页2022年8月9日如 4-26 中单击 Game Object 右侧的圆圈，选择 Image。图 4-26 选择操作对象第26页2022年8月9日选择 Function 为 Game Object-SetActive（bool），如图 4-27。图 4-27 选择设置活跃性的方法单击新产生的方框，如图 4-28。图 4-28 设置参数为 True第27页2022年8月9日4.5 本章小结本章小结 图 4-29 本章知识结构第28页