《虚拟现实脚本与策划》教案-四-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元素组件静态展示组件——首页制作步骤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相对来说性