《虚拟现实脚本与策划》教案-项目4.4：UI系统开发

任务4主要UI面板制作任务描述适配岗位与职责使用Unity中的UI功能，制作项目中的各种面板，包括：提示面板、信息面板、小地图。使用代码制作不同面板之间的跳转逻辑，使用UI组件制作自动布局。UI界面是项目交互组成中重要的一环。岗位：VR开发工程师职责：VR项目开发学习目标知识目标：熟练Canvas、RectTransform等组件的作用和参数的调整。了解EventSystem事件系统在响应面板过程中的作用。了解面板分类，将面板合理分类划分层级进行管理。认识布局组件和自适应组件的参数并能熟练调整。能力目标：能熟练使用UI控件制作可交互的UI面板。能熟练编写UI逻辑，控制面板显示和隐藏，控制新面板加载。能熟练使用水平/垂直布局组件分配元素位置。素质目标：具备审美素养，能选择合理的UI元素，保持项目整体UI的协调性和UI风格一致性。了解其他加载资源的方式，如AB包等提升项目性能。学习重难点重点：Canvas和EventSystem等静态组件的使用。Button、Image、ScrollView等核心控件的使用。面板布局组件如Horizontal/VerticalLayoutGroup的使用。难点：ContentSizeFilter组件的使用。控制面板逻辑的数据结构的设计和使用。操作步骤职业知识UI基本组件Canvas步骤1：新建Canvas(1)选中XROrigin下的MainCamera，若想实现UI与镜头相对静止的状态保持UI始终在画面的中央，则需要将UI对象设置为相机的子物体。(2)或新建UI元素，引擎会自动生成Canvas和EventSystem，并将UI元素设置为Canvas的子物体。步骤2：RenderMode参数设置Canvas的RenderMode为WorldSpace。当前项目是VR项目，为了保证UI正常显示，需要将Canvas的渲染模式设置为世界空间。RectTransform，和Transform组件不同，RectTransform矩形变换组件是专门用来控制UI元素的变化的。包括锚点、位置等参数。UI层级本项目中分为三层节点分别是：Normal、Popup、Fixed，分别代表UI中的普通类型，漂浮类型，固定位置三种类型UI。这是UnityUI开发中最经典、最常用的分层方案，核心目的是管理UI显示的层级、渲染顺序等，避免UI混乱、遮挡错误、点击穿透等问题。Fixed层的UI是固定在特定位置的，不会被遮挡的。如本项目中的机器人和机器人显示/隐藏的按钮。Popup层的UI是弹出的，如提示和详细信息面板。Normal层的UI是主要业务界面，是普通的界面层。EventSystem(1)搜索EventSystem，该对象是UI响应功能的一部分，若没有EventSystem，则用户无法与UI产生交互。在新建UI元素时自动创建。(2)EventSystem的作用EventSystem是UGUI事件总管理器，VR里负责手柄射线交互、UI事件分发、焦点判定、点击拖拽悬停。CanvasScaler包括Dynamic和ReferencePixelsPerUnit两条参数，负责控制当前面板显示的清晰度。CanvasGroup点击Inspector面板底部的AddComponent添加组件，搜索输入“canvas”添加CanvasGroupCanvasGroup面板参数，其中包括Alpha等参数，可以控制该组面板透明度的变化。(3)删除该组件RectTransform和Transform的区别步骤1：找到场景中3D物体和2D物体该物体Transform上的参数有Position、Rotation、Scale(2)找到首页的RectTransform，首页为一张Image底图，铺满Canvas，作为面板，上添加一张Image作为背景图。Image的Source参数中的图片选择上图的内容。RectTransform参数步骤1：Pivot和Position可以通过按下Alt和Shift键，设置UI元素的对齐方式。可以根据元素来信选择不同的位置和锚点位置。工作任务验收步骤1：在MainCamera下新建Canvas，并设置为WorldSpace。调整CanvasScaler等组件。步骤2：新建面板的三层节点Normal、Popup、Fixed并设置合理的RectTransform参数。步骤3：在不同层级新建对应的空面板Panel，保证结构合理。知识点1：Canvas和EventSystem若UI元素不在Canvas上，则看不到UI元素。若没有添加EventSystem则无法进行事件响应。知识点2：RenderModeVR项目中人物面前的UI都是使用WorldSpace知识点3：CanvasGroup中的Alpha该参数是作为调整面板渐入渐出使用的知识点4：UI分层分层管理是UI系统中常用的管理策略

任务4主要UI面板制作任务描述适配岗位与职责使用Unity中的UI功能，制作项目中的各种面板，包括：提示面板、信息面板、小地图。使用代码制作不同面板之间的跳转逻辑，使用UI组件制作自动布局。UI界面是项目交互组成中重要的一环。岗位：VR开发工程师职责：VR项目开发学习目标知识目标：熟练Canvas、RectTransform等组件的作用和参数的调整。了解EventSystem事件系统在响应面板过程中的作用。了解面板分类，将面板合理分类划分层级进行管理。认识布局组件和自适应组件的参数并能熟练调整。能力目标：能熟练使用UI控件制作可交互的UI面板。能熟练编写UI逻辑，控制面板显示和隐藏，控制新面板加载。能熟练使用水平/垂直布局组件分配元素位置。素质目标：具备审美素养，能选择合理的UI元素，保持项目整体UI的协调性和UI风格一致性。了解其他加载资源的方式，如AB包等提升项目性能。学习重难点重点：Canvas和EventSystem等静态组件的使用。Button、Image、ScrollView等核心控件的使用。面板布局组件如Horizontal/VerticalLayoutGroup的使用。难点：ContentSizeFilter组件的使用。控制面板逻辑的数据结构的设计和使用。操作步骤职业知识UIManager的使用UI层级管理字典步骤1：字典元素添加和使用(1)打开UIManager，该面板控制不同层级的面板存储、显示、隐藏等，是UI系统管理代码的核心类。(2)将UI层级中的面板Add层级字典中，声明字典存储面板对象，使用Add方法添加到字典中。方便后续取用不同的面板。(3)Fixed层级下面板的使用，以“提示”面板为例，可以使用ShowTiShi方法对面板进行激活，从而显示该面板。(4)关闭Fixed弹窗，通过foreach循环遍历面板字典，关闭所有在Fixed层级下的面板。通过该方法关闭面板避免多个面板重复，出现堆叠。步骤2：右下角提示的使用找到代码中提示的名称，在UIManager代码中搜索fixedDic找到提示面板使用相关的内容，在380行前后。在场景中搜索“提示面板”位于MainCamera-Canvas-Fixed-提示下，场景中的位置在面板的右下角。激活提示面板，点击Inspector窗口上的名称左侧小正方形，出现对勾则面板激活成功，无对勾时对象失活。提示内容填充，位于UIManager脚本第387行使用GetComponent方法获取Image-Tip对象，使“=”对提示内容进行赋值。在其他步骤中使用UIManager关闭Popup窗口，在UIManager脚本中使用CloseAllPopWindow方法对面板进行控制，使用foreach对pop层级的面板进行遍历设置为失活状态。打开普通界面，在UIManager脚本中定位到434行，使用OpenNormalWindow方法激活普通层级下的面板对象。在激活前调用关闭方法关闭全部该层级下的面板，然后根据面板名称开启对应的面板。通过UIManager显示面板，为了保证程序健壮性，所有面板都会在开启前将对应层级下的面板全部关闭然后再打开指定面板。在实验步骤中实验UIManager调用面板，在HuoZaiController中搜索“UIManager”定位到脚本200行左右，找到ClickHuozaiBtn。在该方法中，使用Ui管理的单例类获取对象实例。通过字典获取面板，赋予内容显示在面板上。工作任务验收步骤1：阅读UIManager脚本，理解脚本结构和方法内容。步骤2：学会调用UIManager中不同层级面板，学会如何使用UIManager控制面板的显示/隐藏。步骤3：修改面板名称，根据实际的名称完成面板管理。知识点1：思考如果涉及到面板回退功能，该使用什么数据结构来设计知识点2：不同面板控制不同层级的面板控制方式是类似的，可以使用方法重写或者泛型方法编写代码

任务4主要UI面板制作任务描述适配岗位与职责使用Unity中的UI功能，制作项目中的各种面板，包括：提示面板、信息面板、小地图。使用代码制作不同面板之间的跳转逻辑，使用UI组件制作自动布局。UI界面是项目交互组成中重要的一环。岗位：VR开发工程师职责：VR项目开发学习目标知识目标：熟练Canvas、RectTransform等组件的作用和参数的调整。了解EventSystem事件系统在响应面板过程中的作用。了解面板分类，将面板合理分类划分层级进行管理。认识布局组件和自适应组件的参数并能熟练调整。能力目标：能熟练使用UI控件制作可交互的UI面板。能熟练编写UI逻辑，控制面板显示和隐藏，控制新面板加载。能熟练使用水平/垂直布局组件分配元素位置。素质目标：具备审美素养，能选择合理的UI元素，保持项目整体UI的协调性和UI风格一致性。了解其他加载资源的方式，如AB包等提升项目性能。学习重难点重点：Canvas和EventSystem等静态组件的使用。Button、Image、ScrollView等核心控件的使用。面板布局组件如Horizontal/VerticalLayoutGroup的使用。难点：ContentSizeFilter组件的使用。控制面板逻辑的数据结构的设计和使用。操作步骤职业知识布局功能介绍布局组件使用步骤1：新建面板找到Normal下新建面板，右键点击Normal-UI-Panel，新建面板Panel类似于3D物体中的空物体功能，方便管理面板元素。新建Image元素，右键点击Panel-UI-Image，Panel本质上也是Image。再复制两个Image元素，复制元素可以选择Ctrl+C粘贴使用Ctrl+V，同时也可以使用Ctrl+D直接完成复制粘贴工作。步骤2：添加布局组件面板上添加布局组件。选中Panel点击Inspector上的AddComponent组件，在搜索框中搜索Layout步骤3：调整布局组件参数添加HorizontalLayoutGroup，该组件是布局组件中的水平布局组件，可将元素均匀排布在当前的Panel中。调整参数ChildAlignment，控制元素的对齐方式，当前面板参数选择为MiddleCenter，可以将元素上下左右都居中的方式进行排列。调整参数Padding调整间隔。可以从上下左右多个方向对元素进行间隔调整。垂直布局和元素布局VerticalLayoutGroup，该组件可以将对应的元素垂直方向上均匀进行排列。Vertical组件参数类似于Horizontal。GridLayoutGroup按照固定行列布局，可以将元素在面板上从单个角度，如左上，对元素进行排列，可以完成背包等情况下的功能。CellSize和Padding参数调整，分别调整元素的大小和各个元素之间的间隔。参数面板与水平/垂直布局组件的内容类似。StartCorner，该参数可以设置元素排列的顺序，如这里选择为UpperLeft可以理解为从上到下从左到右进行对齐。StartAxis，该参数可以设置元素初始的排列方式，这里设置为水平，则元素首先以水平的方式进行排布。Constraint，该参数修改元素布局的不同约束方式，可以限制元素尺寸上下限，同时填充空白间隔。ContentSizeFitter，内容尺寸适配器，挂载在带文本/图片/子布局的UI物体上，让物体宽高自动跟随内部内容大小变化，不用手动改RectTransform尺寸。Horizontal/VerticalFit这两个参数可以控制从水平和垂直方向分别自适应调整元素大小。工作任务验收步骤1：利用使用自动布局组件结合演示视频中面板内容制作相关的面板，如：敲帮问顶、气体检测、生命探测等环节时的面板。步骤2：能熟练分析需求，使用该组件调整和分析AI数字人面板的结构。知识点1：自动布局组件的使用场景在制作类背包系统时会使用知识点2：水平自动布局在制作类似场景选择中会使用知识点3：垂直自动布局在制作类似对话框时会使用知识点4：ElementLayout常常结合ContentSizeFilter实现自动布局

任务4主要UI面板制作任务描述适配岗位与职责使用Unity中的UI功能，制作项目中的各种面板，包括：提示面板、信息面板、小地图。使用代码制作不同面板之间的跳转逻辑，使用UI组件制作自动布局。UI界面是项目交互组成中重要的一环。岗位：VR开发工程师职责：VR项目开发学习目标知识目标：熟练Canvas、RectTransform等组件的作用和参数的调整。了解EventSystem事件系统在响应面板过程中的作用。了解面板分类，将面板合理分类划分层级进行管理。认识布局组件和自适应组件的参数并能熟练调整。能力目标：能熟练使用UI控件制作可交互的UI面板。能熟练编写UI逻辑，控制面板显示和隐藏，控制新面板加载。能熟练使用水平/垂直布局组件分配元素位置。素质目标：具备审美素养，能选择合理的UI元素，保持项目整体UI的协调性和UI风格一致性。了解其他加载资源的方式，如AB包等提升项目性能。学习重难点重点：Canvas和EventSystem等静态组件的使用。Button、Image、ScrollView等核心控件的使用。面板布局组件如Horizontal/VerticalLayoutGroup的使用。难点：ContentSizeFilter组件的使用。控制面板逻辑的数据结构的设计和使用。操作步骤职业知识UI元素组件静态展示组件——首页制作步骤1：首页面板内容(1)Text，是文本展示组件，负责展示文字内容。该组件中可以调整文字的字号、字体、格式等。通过在Canvas上右键-UI-Legacy-Text(Legacy)即可新建。(2)Image，是图片展示组件，需要和RawImage区分用途，负责展示图片内容。该组件可以调整图片的大小、图片内容等。通过在Canvas上右键-UI-Image即可新建。步骤2：新建Panel演示新建Panel，面板是承载某个环节UI元素的容器，可以方便地控制面板元素的显隐，本质上是一张图片。新建Image，通过在Canvas上右键-UI-Panel即可新建。选中Image，点击SourceImage，选择源图片即可完成图片内容的替换。在替换图片的时候需要注意原图比例和添加后Image的长宽比，避免过度拉伸导致图片变形。找到背景图片，点击SourceImage后，在图片文件中可以找到名为“背景”的图片，作为首页的背景图片。步骤3：补充面板元素新建Text，使用Text组件编写实验名称。这里注意与TextMeshPro进行区分，TMP不兼容中文字符，需要准备中文字符集。修改Text内容，根据面板效果，调整文字内容“煤矿灾害应急救援（火灾）虚拟仿真实验”，字体颜色为白色，斜体。修改字体，找到参数中的“Font”修改字体，点击小圆点，找到“优设标题黑”字体，进行更改。Text和TextMeshPro的区别Text是基本的文本组件，TMP是官方推荐的，效果更好些，但是原生不支持中文，需要打中文字体包。首页按钮制作首页面板底部“开始实验按钮”：新建首页按钮，通过Canvas右键-UI-Legacy-Button(Legacy)即可完成按钮新建，同样不选择TMP类型的按钮。更换首页按钮样式，按钮的Image组件上找到参数SourceImage，选择如图中的开始按钮美术素材，选择常态状态按钮，更换按钮图标。调整切换状态按钮图标，找到Button组件下的Transition，修改ColorSwap为SpriteSwap，在Selected状态下拖入按下以后的按钮图片。按照图片比例设置按钮，需要根据Sprite图片的比例来进行设置，这里图片比例为272*97，需要设置width和length为272和97，然后再等比例进行缩放。工作任务验收步骤1：检查首页面板是否制作完成，对应的图片、字体资源已更换。步骤2：制作后续面板中的静态组成部分，如图片文字等。步骤3：检查添加的按钮是否符合美术资源提供的素材，替换完毕后再对UI元素等比例放大缩小进行制作。知识点1：静态组件是Unity中最常用的组件知识点2：Image和RawImage应用场景不同，RawImage相对来说性能较好知识点3：首页面板添加UI元素可以让面板内容更丰富知识点3：TMPTMP是高清字体组件，需要用到高质量UI的项目中首先考虑。知识点4：按钮比例一般按照美术给的图来进行设置比例

任务4主要UI面板制作任务描述适配岗位与职责使用Unity中的UI功能，制作项目中的各种面板，包括：提示面板、信息面板、小地图。使用代码制作不同面板之间的跳转逻辑，使用UI组件制作自动布局。UI界面是项目交互组成中重要的一环。岗位：VR开发工程师职责：VR项目开发学习目标知识目标：熟练Canvas、RectTransform等组件的作用和参数的调整。了解EventSystem事件系统在响应面板过程中的作用。了解面板分类，将面板合理分类划分层级进行管理。认识布局组件和自适应组件的参数并能熟练调整。能力目标：能熟练使用UI控件制作可交互的UI面板。能熟练编写UI逻辑，控制面板显示和隐藏，控制新面板加载。能熟练使用水平/垂直布局组件分配元素位置。素质目标：具备审美素养，能选择合理的UI元素，保持项目整体UI的协调性和UI风格一致性。了解其他加载资源的方式，如AB包等提升项目性能。学习重难点重点：Canvas和EventSystem等静态组件的使用。Button、Image、ScrollView等核心控件的使用。面板布局组件如Horizontal/VerticalLayoutGroup的使用。难点：ContentSizeFilter组件的使用。控制面板逻辑的数据结构的设计和使用。操作步骤职业知识小地图功能制作查看路线规划面板步骤1：激活逃生路线选择搜索逃生路线选择，在Hierarchy窗口中搜索“路线”快速定位到逃生路线选择，通过该面板分析小地图制作的方式。激活该对象，点击Inspector窗口中对象名称左侧的小对勾，激活对应的物体。可在Game窗口中预览该物体效果。步骤2：找到路线规划搜索路线规划对象，同样的方式搜索“路线规划”找到该物体并在激活后双击定位到该物体上。查看路线规划面板，激活后可以在3D空间中看到当前巷道的规模以及红蓝色的路线。制作路线规划面板步骤1：添加画布路线规划物体上新建Canvas设置为WorldSpace。在VR项目中由于Canvas是在3D空间中进行摆放的，所以这里的RenderMode需要设置为WorldSpace模式。画布上添加红/蓝的Image作为不同的路线。这里的路线显示是使用的对应颜色的图片，再由多个图片进行拼接，组成地图的路线内容。步骤2：小地图摄影机找到MiniMapCamera，该摄影机是专门用来渲染小地图的摄影机，过滤掉其他物体不显示。在类似项目中也可以采用相同的制作方式。设置参数为图中内容。需要注意，小地图的背景为黑色纯色背景，相机的观看模式为正交模式，避免近大远小。在遮罩参数中选择只渲染小地图层级的物体。注意：需要在小地图上渲染的物体Layer设置为该参数步骤3：小地图相机和普通相机对比MainCamera的参数相比小地图，背景是天空盒，观看的方式为透视模式，可以观测到的内容为正常实验流程中可以看到的物体。MiniMapCamera的