《虚拟仿真实验脚本与策划》课件-项目4.4：UI系统开发

矿井灾害应急救援（火灾）虚拟仿真实验UI面板制作目录01UI基本组件UI组件概述02工作任务验收检查本节内容的掌握程度Part1UI基本组件01UI基本组件Canvas■选中XROrigin下的MainCamera若想实现UI与镜头相对静止的状态保持UI始终在画面的中央，则需要将UI对象设置为相机的子物体镜头前方面板的制作01UI基本组件Canvas■同样，新建UI元素，引擎会自动生成Canvas和EventSystem，并将UI元素设置为Canvas的子物体，也可以完成画布新建新建UI元素添加Canvas01UI基本组件Canvas■设置Canvas的RenderMode为

WorldSpace当前项目是VR项目，为了保证UI正常显示，需要将Canvas的渲染模式设置为世界空间设置渲染模式01UI基本组件Canvas■RectTransform和Transform组件不同RectTransform矩形变换组件是专门用来控制UI元素的变化的。包括锚点、位置等参数RectTransform面板01UI基本组件Canvas■本项目中分为三层节点分别是：Normal、Popup、Fixed，分别代表UI中的普通类型，漂浮类型，固定位置三种类型UI设置渲染模式01UI基本组件EventSystem■搜索EventSystem，该对象是UI响应功能的一部分EventSystem是事件总管理器，VR里负责手柄射线交互、UI事件分发、焦点判定、点击拖拽悬停UI事件系统触发的基础01UI基本组件CanvasScaler■包括Dynamic和ReferencePixelsPerUnit两条参数，负责控制当前面板显示的清晰度CanvasScaler参数01UI基本组件CanvasGroup■点击Inspector面板底部的AddComponent添加组件，搜索输入“canvas”添加CanvasGroup在AddComponent中添加组件01UI基本组件CanvasGroup■CanvasGroup面板参数，其中包括Alpha等参数，可以控制该组面板透明度的变化。CanvasGroup参数面板01UI基本组件RectTransform■找到场景上的3D物体和2D物体。任意3D物体的Transform上的参数有Position、Rotation、Scale参数Transform参数面板01UI基本组件RectTransform■首页的RectTransform。首页为一张Image底图，铺满Canvas，作为面板，上添加一张Image作为背景图。Image的Source参数中的图片选择上图的内容首页组件01UI基本组件RectTransform■通过按下Alt和Shift键，设置UI元素的对齐方式。可以根据元素来信选择不同的位置和锚点位置对齐内容的九宫格Part2工作任务验收02工作任务验收工作内容1■在MainCamera下新建Canvas，并设置为WorldSpace。调整CanvasScaler等组件画布组件是显示UI元素的前提不同层级新建对应的空面板Panel，保证结构合理工作内容2■新建面板的三层节点Normal、Popup、Fixed并设置RectTransform参数感谢观看安全第一·预防为主矿井灾害应急救援（火灾）虚拟仿真实验UI逻辑制作目录01UIManager的使用管理器单例类02工作任务验收检查本节内容的掌握程度Part1UIManager的使用01UIManager的使用UI层管理字典■打开UIManager，该面板控制不同层级的面板存储、显示、隐藏等，是UI系统管理代码的核心类UIManager管理类01UIManager的使用UI层管理字典■将UI层级中的面板Add层级字典中，声明字典存储面板对象，使用Add方法添加到字典中。方便后续取用不同的面板将对象存储在数据结构中01UIManager的使用UI层管理字典■将Fixed层级下面板的使用，以“提示”面板为例，可以使用ShowTiShi方法对面板进行激活，从而显示该面板显示提示面板的方法01UIManager的使用UI层管理字典■将关闭Fixed弹窗，通过foreach循环遍历面板字典，关闭所有在Fixed层级下的面板。通过该方法关闭面板避免多个面板重复，出现堆叠关闭面板的方法01UIManager的使用UI层管理字典■找到代码中提示的名称，在UIManager代码中搜索fixedDic找到提示面板使用相关的内容，在380行前后提示内容添加方法01UIManager的使用UI层管理字典■在场景中搜索“提示面板”位于MainCamera-Canvas-Fixed-提示下，场景中的位置在面板的右下角提示面板内容01UIManager的使用UI层管理字典■在激活提示面板，点击Inspector窗口上的名称左侧小正方形，出现对勾则面板激活成功，无对勾时对象失活激活提示面板01UIManager的使用UI层管理字典■提示内容填充，位于UIManager脚本第387行使用GetComponent方法获取Image-Tip对象，使“=”对提示内容进行赋值提示内容赋值01UIManager的使用核心脚本中使用UIManager■关闭Popup窗口，在UIManager脚本中使用CloseAllPopWindow方法对面板进行控制，使用foreach对pop层级的面板进行遍历设置为失活状态如何关闭面板01UIManager的使用核心脚本中使用UIManager■打开普通界面，在UIManager脚本中定位到434行，使用OpenNormalWindow方法激活普通层级下的面板对象。在激活前调用关闭方法关闭全部该层级下的面板，然后根据面板名称开启对应的面板如何关闭面板01UIManager的使用核心脚本中使用UIManager■通过UIManager显示面板，为了保证程序健壮性，所有面板都会在开启前将对应层级下的面板全部关闭然后再打开指定面板HuoZaiController中的使用01UIManager的使用核心脚本中使用UIManager■在实验步骤中实验UIManager调用面板，在HuoZaiController中搜索“UIManager”定位到脚本200行左右，找到ClickHuozaiBtn。在该方法中，使用Ui管理的单例类获取对象实例。通过字典获取面板，赋予内容显示在面板上HuoZaiController中的使用Part2工作任务验收02工作任务验收工作内容1■调用UIManager中不同层级面板，学会如何使用UIManager控制面板的显示/隐藏显示和隐藏是通过控制面板的激活和失活状态实现的管理类在获取面板的时候是通过字符串获取的，所以需要注意面板名称是否修改完成工作内容2■修改面板名称，根据实际的名称完成面板管理感谢观看安全第一·预防为主矿井灾害应急救援（火灾）虚拟仿真实验UI自动布局组件目录01自动布局组件布局功能介绍02工作任务验收检查本节内容的掌握程度Part1自动布局组件01自动布局组件布局功能介绍■Normal下新建面板，右键点击Normal-UI-Panel新建面板Panel类似于3D物体中的空物体功能，方便管理面板元素新建面板的方式01自动布局组件布局功能介绍■新建Image元素，右键点击Panel-UI-ImagePanel本质上也是Image，只不过是半透明的白色图片添加面板的位置01自动布局组件布局功能介绍■复制两个Image元素，复制元素可以选择Ctrl+C粘贴使用Ctrl+V也可以使用Ctrl+D直接完成复制粘贴工作快速添加面板元素01自动布局组件添加布局组件■面板上添加布局组件。选中Panel点击Inspector上的AddComponent组件，在搜索框中搜索Layout添加布局组件01自动布局组件添加布局组件■添加HorizontalLayoutGroup，该组件是布局组件中的水平布局组件，可将元素均匀排布在当前的Panel中布局组件参数调整01自动布局组件添加布局组件■调整参数ChildAlignment，控制元素的对齐方式当前面板参数选择为MiddleCenter，可以将元素上下左右都居中的方式进行排列布局组件参数调整01自动布局组件添加布局组件■调整参数Padding调整间隔。可以从上下左右多个方向对元素进行间隔调整Padding参数面板01自动布局组件其他布局组件■VerticalLayoutGroup，该组件可以将对应的元素垂直方向上均匀进行排列。Vertical组件参数内容类似于Horizontal垂直布局组件面板参数内容01自动布局组件其他布局组件■GridLayoutGroup按照固定行列布局，可以将元素在面板上从单个角度，如左上，对元素进行排列，可以完成背包等情况下的功能Grid的排列方式01自动布局组件其他布局组件■CellSize和Padding参数调整，分别调整元素的大小和各个元素之间的间隔。参数面板与水平/垂直布局组件的内容类似元素大小和间隔的参数01自动布局组件其他布局组件■StartCorner，该参数可以设置元素排列的顺序，如这里选择为UpperLeft可以理解为从上到下从左到右进行对齐StartCorner的参数选择01自动布局组件其他布局组件■StartAxis，该参数可以设置元素初始的排列方式，这里设置为水平，则元素首先以水平的方式进行排布排列轴向的调整01自动布局组件其他布局组件■Constraint，该参数修改元素布局的不同约束方式，可以限制元素尺寸上下限，同时填充空白间隔排列元素的调整01自动布局组件其他布局组件■ContentSizeFitter，内容尺寸适配器。挂载在带文本/图片/子布局的UI物体上，让物体宽高自动跟随内部内容大小变化，不用手动改RectTransform尺寸。Horizontal/VerticalFit这两个参数可以控制从水平和垂直方向分别自适应调整元素大小元素大小自适应Part2工作任务验收02工作任务验收工作内容1■检查是否使用自动布局组件结合演示视频中面板内容制作相关的面板，如：敲帮问顶、气体检测、生命探测等环节时的面板图文配合的面板大都使用了水平自动布局组件，来显示面板上的内容根据面板效果分析面板的制作方式可以通过需求分析来进行拆解工作内容2■检查是否熟练分析需求，使用该组件调整和分析AI数字人面板的结构感谢观看安全第一·预防为主矿井灾害应急救援（火灾）虚拟仿真实验UI元素使用目录01UI元素组件组件介绍02工作任务验收检查本节内容的掌握程度Part1UI元素组件01UI元素组件静态展示组件■协Text，是文本展示组件。负责展示文字内容。该组件中可以调整文字的字号、字体、格式等。通过在Canvas上右键-UI-Legacy-Text(Legacy)即可新建Text组件参数内容01UI元素组件静态展示组件■Image，是图片展示组件。需要和RawImage区分用途，负责展示图片内容。该组件可以调整图片的大小、图片内容等。通过在Canvas上右键-UI-Image即可新建Image组件参数内容01UI元素组件静态展示组件■Panel是面板组件。新建Panel，面板是承载某个环节UI元素的容器，可以方便地控制面板元素的显隐，本质上是一张图片Panel的新建方式01UI元素组件静态展示组件■新建Image，通过在Canvas上右键-UI-Panel即可新建Panel的新建方式01UI元素组件静态展示组件■选中Image，点击SourceImage，选择源图片即可完成图片内容的替换。在替换图片的时候需要注意原图比例和添加后Image的长宽比，避免过度拉伸导致图片变形Image组件中参数的修改方式01UI元素组件静态展示组件■找到背景图片，点击SourceImage后，在图片文件中可以找到名为“背景”的图片，作为首页的背景图片图片内容修改01UI元素组件静态展示组件■新建Text，使用Text组件编写实验名称。注意与TextMeshPro进行区分，TMP不兼容中文字符，需要准备中文字符集Text内容添加01UI元素组件静态展示组件■修改Text内容，根据面板效果，调整文字内容“煤矿灾害应急救援（火灾）虚拟仿真实验”，字体颜色为白色，斜体首页文字内容添加01UI元素组件静态展示组件■修改字体，找到参数中的“Font”修改字体，点击小圆点，找到“优设标题黑”字体，进行更改字体修改01UI元素组件Text组件和TMP的区别■Text是基本的文本组件，TMP是官方推荐的文本制作方式，视觉效果更好注意：TMP原生不支持中文，需要打中文字体包效果对比01UI元素组件动态交互组件■首页面板底部“开始实验按钮”：新建首页按钮，通过Canvas右键-UI-Legacy-Button(Legacy)即可完成按钮新建，同样不选择TMP类型的按钮首页按钮制作01UI元素组件动态交互组件■更换首页按钮样式，按钮的Image组件上找到参数SourceImage，选择如图中的开始按钮美术素材，选择常态状态按钮，更换按钮图标按钮样式替换01UI元素组件动态交互组件■调整切换状态按钮图标找到Button组件下的Transition，修改ColorSwap为SpriteSwap，在Selected状态下拖入按下以后的按钮图片按钮样式替换01UI元素组件动态交互组件■按照图片比例设置按钮，需要根据Sprite图片的比例来进行设置注意：这里图片比例为272*97，需要设置width和length为272和97，然后再等比例进行缩放。开始按钮美术图片的比例01UI元素组件动态交互组件■按照图片比例设置按钮，需要根据Sprite图片的比例来进行设置注意：这里图片比例为272*97，需要设置width和length为272和97，然后再等比例进行缩放。开始按钮美术图片的比例Part2工作任务验收02工作任务验收工作内容1■检查首页面板是否制作完成，对应的图片、字体资源已更换。制作后续面板中的静态组成部分，如图片文字等根据预览效果对项目中所用到的面板展示部分进行制作实验中的按钮为了避免图片变形要先设置比例再进行缩放工作内容2■检查添加的按钮是否符合美术资源提供的素材，替换完毕后再对UI元素等比例放大缩小进行制作感谢观看安全第一·预防为主矿井灾害应急救援（火灾）虚拟仿真实验UI小地图渲染目录01小地图功能制作制作原理02工作任务验收检查本节内容的掌握程度Part1小地图功能制作01小地图功能制作逃生路线选择■搜索逃生路线选择。在Hierarchy窗口中搜索“路线”快速定位到逃生路线选择，通过该面板分析小地图制作的方式定位逃生路线选择01小地图功能制作逃生路线选择■激活该对象点击Inspector窗口中对象名称左侧的小对勾，激活对应的物体。可在Game窗口中预览该物体效果预览路线选择面板01小地图功能制作路线规划内容■搜索路线规划对象同样的方式搜索“路线规划”找到该物体并在激活后双击定位到该物体上定位路线规划01小地图功能制作路线规划内容■查看路线规划面板，激活后可以在3D空间中看到当前巷道的规模以及红蓝色的路线3D场景中俯瞰巷道路线01小地图功能制作路线规划内容■路线规划物体上新建Canvas设置为WorldSpace。在VR项目中，由于Canvas是在3D空间中进行摆放的，所以这里的RenderMode需要设置为WorldSpace模式Canvas的渲染模式01小地图功能制作路线规划内容■画布上添加红/蓝的Image作为不同的路线。这里的路线显示是使用的对应颜色的图片，再由多个图片进行拼接，组成地图的路线内容地图内容01小地图功能制作小地图摄影机■找到MiniMapCamera该摄影机是专门用来渲染小地图的摄影机，过滤掉其他物体