《虚拟仿真实验脚本与策划》课件-四-4-知识点4：UI元素使用

矿井灾害应急救援（火灾）虚拟仿真实验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■检查首页面板是否制作完成，对应的图片、字体资源已更换。制作后续面板中的静态组成部分，如图片文字等根据预览效果对项目中所用到的面板展示部分进行制作实验中的