《虚拟现实脚本与策划》教案-四-4-知识点5：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组件的使用。控制面板逻辑的数据结构的设计和使用。操作步骤职业知识小地图功能制作查看路线规划面板步骤1：激活逃生路线选择搜索逃生路线选择，在Hierarchy窗口中搜索“路线”快速定位到逃生路线选择，通过该面板分析小地图制作的方式。激活该对象，点击Inspector窗口中对象名称左侧的小对勾，激活对应的物体。可在Game窗口中预览该物体效果。步骤2：找到路线规划搜索路线规划对象，同样的方式搜索“路线规划”找到该物体并在激活后双击定位到该物体上。查看路线规划面板，激活后可以在3D空间中看到当前巷道的规模以及红蓝色的路线。制作路线规划面板步骤1：添加画布路线规划物体上新建Canvas设置为WorldSpace。在VR项目中由于Canvas是在3D空间中进行摆放的，所以这里的RenderMode需要设置为WorldSpace模式。画布上添加红/蓝的Image作为不同的路线。这里的路线显示是使用的对应颜色的图片，再由多个图片进行拼接，组成地图的路线内容。步骤2：小地图摄影机找到MiniMapCamera，该摄影机是专门用来渲染小地图的摄影机，过滤掉其他物体不显示。在类似项目中也可以采用相同的制作方式。设置参数为图中内容。需要注意，小地图的背景为黑色纯色背景，相机的观看模式为正交模式，避免近大远小。在遮罩参数中选择只渲染小地图层级的物体。注意：需要在小地图上渲染的物体Layer设置为该参数步骤3：小地图相机和普通相机对比MainCamera的参数相比小地图，背景是天空盒，观看的方式为透视模式，可以观测到的内容为正常实验流程中可以看到的物体。MiniMapCamera的参数在修改为正交后，镜头渲染的范围由原来的锥体变更为长方体。步骤4：添加TargetTexture新增Texture。在当前文件夹中右键-Create-RenderTexture将该Texture关联到Camera，可以将Camera渲染的画面绘制在纹理上。使用MapGenSui调整渲染出来的画面的位置，通过Canvas2D的位置下的脚本MapGenSui，在生成画面之后将图片放置到画面中间。移动渲染出来的小地图的位置路线面片制作，本质上是在巷道顶部添加Image。找到地图的Canvas，在Tool-路线规划-Canvas下。若需要修改路线以及路线颜色，需要从这里修改Image的参数。工作任务验收步骤1：检查是否制作完成小地图渲染的摄影机，新增好对应的层级。步骤2：检查是否新建小地图的画布，并将对应的Canvas设置为WorldSpace，将画布上的元素设置为小地图摄影机对应的渲染层级。步骤3：新增Texture，将它关联到Camera上实现渲染，将Texture放置到画布上。知识点1：逃生路线选择面板该面板的呼出逻辑在HuoZaiController中知识点2：小地图的一般制作方式按照步骤设置Canvas-Camera-Texture-Image知识点3：渲染层级这个参数可以过滤掉不会被Camera渲染的对象任务4学习成果自测知识自测（可以是习题或其他，含答案/自测标准）自测内容：新建空场景，将本节任务中的几个面板独立制作完成，固定好锚点，画布尺寸变化时不影响其他UI的位置（调整前请注意备份）。自测标准：能够在给到的资源基础上对UI面板熟练进行制作即可。职业能力自测（可以是作业等，含自测标准）自测内容：可以在制作好的UI面板基础上，优化UIManager中的方法。自测标准：UI单例类代码编写无问题，面板通用方法使用泛型实现。职业素质自测（职业素质自测标准）自测内容：了解常用UI框架的代码，应用到本项目中。自测标准：代码编写无问题，