虚幻引擎UE5游戏技术基础课件 模块8 UI基础

08模块8｜MODULE08UI基础UI系统概述·控件系统·UMG动画·综合实践案例本模块涵盖：UI系统概述·控件系统详解·UMG动画·综合实践案例虚幻引擎5（UE5）数字内容创作基础教程学前导读·学习目标本模块学什么、学到什么程度模块8·UI基础虚幻引擎5（UE5）数字内容创作基础教程02学前导读用户界面（UI）作为连接用户与虚拟世界的视觉桥梁，不仅承载着信息传递与交互引导的核心功能，更是塑造用户体验与产品气质的关键载体。本模块系统学习UE5中的UMG界面系统，从控件基础、布局原理到交互逻辑与动态设计，逐步掌握构建功能完善、视觉美观的用户界面的完整流程。作为虚拟世界的“交互窗口”，UI设计需秉持“功能为先、体验为本”的理念，既熟练掌握控件使用、界面布局、事件绑定等技术基础，又理解信息层级、交互反馈与视觉引导的设计原则，打造更具沉浸感与人性化的交互体验。知识目标知道·理解▪理解UI在交互应用中的核心作用与分层结构，掌握UMG基本概念及其与HUD的区别▪熟悉UMG编辑器的界面布局与核心功能区划分▪掌握控件工具箱中基础控件与容器控件的分类及功能特点▪理解UMG动画系统的基本原理与工作流程，掌握动画创建与驱动方法素质目标态度·价值▪树立“以用户为中心”的UI设计思维，关注体验的流畅性与直观性▪养成严谨规范的开发习惯，建立统一的命名、层级与资产管理规范▪培养运用动态效果与即时反馈增强界面表现力的意识▪建立跨平台适配与性能优化的前瞻性思维技能目标能做·会做▪熟练使用UMG编辑器进行界面布局，运用容器控件实现元素排列组合▪为按钮、滑块等交互控件配置事件响应逻辑，实现典型交互功能▪运用UMG动画系统创建动态效果，通过蓝图逻辑控制播放与状态驱动▪独立完成开始、加载、登录等典型游戏UI及多界面切换与数据传递单元8.1｜UI系统概述UI、HUD与UMG：概念厘清模块8·UI基础虚幻引擎5（UE5）数字内容创作基础教程03UI（用户界面）是用户与数字产品进行信息交换和操作控制的可视化媒介，核心解决两大问题：“用户如何理解产品功能”和“产品如何响应用户操作”。其本质包含视觉呈现层与交互逻辑层两个层面。UI最上层概念，泛指游戏中所有与用户交互的界面元素的总和HUDUI的特定类型：游戏过程中持续显示于屏幕的信息（血量、弹药量、小地图），通常不中断游戏进程UMGUE5中用于创建和实现UI（包括HUD）的具体工具和框架UMG（UnrealMotionGraphics）是基于节点的可视化UI创作工具：支持丰富的控件库与布局系统、数据绑定、动画特效，且跨平台支持——一次开发即可部署到PC、主机、移动设备，广泛应用于游戏UI、应用工具及VR/AR界面。行业常用技巧◆性能优先：频繁更新的HUD元素设置更新阈值或定时器，避免每帧更新◆多平台适配：触控设备确保按钮尺寸与间距防误触；主机需构建清晰线性的焦点导航◆团队协作：建立统一的命名规范，提升沟通效率与项目维护性单元8.1｜UI系统概述UMG编辑器：八大功能区模块8·UI基础虚幻引擎5（UE5）数字内容创作基础教程04窗口功能描述菜单栏/工具栏常用菜单选项；编译、保存、浏览、播放等常用功能编辑器模式切换蓝图编辑器的设计器和图表模式控件列表包含全部可用控件，可拖放到视觉设计器中层级显示用户控件的层级结构，管理控件的父子关系视觉设计器显示布局的视觉呈现，直接操纵其中的控件属性栏显示并调整当前所选控件的属性动画UMG动画轨道，用于设置控件的关键帧动画工作流提示：设计器负责“摆界面”，图表模式负责“写逻辑”；动画面板建议点击“停靠在布局中”固定在工作区，便于制作关键帧动画。单元8.2｜控件系统详解控件工具箱：基础控件与容器控件模块8·UI基础虚幻引擎5（UE5）数字内容创作基础教程05构建UI就像搭积木：控件是积木块，属性决定形状、颜色和位置，事件定义交互时触发的行为。基础控件（显示信息、接收简单输入）▪文本：显示游戏标题、角色名称、说明文字；图像：显示背景图、图标、头像▪按钮：点击触发动作的最常用交互控件；进度条：图形化显示加载进度、血量▪勾选框：是/否状态选择；文本框：输入用户名、密码；组合框：下拉列表选择；滑条：拖拽调节音量、亮度容器控件（排列、分组和管理其他控件）▪画布面板：按X、Y坐标自由放置子控件，适合复杂固定界面（如开始菜单）▪垂直框/水平框：子控件从上到下或从左到右依次排列，布局整齐有序▪覆层：子控件层层叠加，适合弹窗、提示信息；滚动框：内容超出时自动出现滚动条▪控件切换器：可容纳多个“页面”但同时仅显示一个，适合标签页切换效果单元8.2｜控件系统详解控件核心属性：布局、外观与状态模块8·UI基础虚幻引擎5（UE5）数字内容创作基础教程06布局与适配属性——多分辨率适配的基石▪锚点（Anchors）：像图钉把控件“钉”在父容器相对位置，屏幕变化时保持相对位置不变；常用预设：左上角、居中、全屏拉伸（适合背景图）▪偏移（Offsets）：在锚点确定区域内用Left/Top/Right/Bottom精确控制大小和位置▪尺寸与缩放：Size直接设置宽高；Scale整体放大缩小而不改变布局尺寸▪可视性：Visible显示、Collapsed隐藏不占位、Hidden隐藏但占位外观与内容状态属性▪颜色与透明度、字体（文本控件）、笔刷（图像控件指定图片资源）▪内容（文本控件显示文字）、进度（进度条0~1控制填充比例）▪只读/密码模式（文本框）：勾选“为密码”后输入显示为圆点，保护隐私行业常用技巧◆布局进阶：不要局限于锚点预设，可手动拖拽锚点至父容器特定相对位置，实现精细的自适应布局单元8.2｜控件系统详解事件与交互逻辑：让控件“动”起来模块8·UI基础虚幻引擎5（UE5）数字内容创作基础教程07属性决定控件的静态表现，事件（Events）则使控件动态响应用户操作——可将事件理解为“触发器”：特定交互发生时，触发器被激活、信号随即发出。常用事件触发时机OnClicked控件被按下并释放（完成一次点击）时触发，最常用OnPressed/OnReleased鼠标按下（未释放）时/按下后释放时触发OnHovered/OnUnhovered鼠标进入/离开控件范围时触发，常用于高亮反馈OnTextChanged文本框内容每次改变时触发，适用实时搜索、输入验证OnValueChanged滑条、进度条数值改变时触发，适用实时调节音量亮度案例：为按钮添加点击事件01画布上放置按钮，细节面板“事件”栏找到OnClicked，点击“＋”创建事件节点02从OnClicked输出引脚拖出连线，搜索添加PrintString节点，InString输入“你好，世界！”03编译、保存、运行，点击按钮即可在视口看到输出文字单元8.3｜UMG动画UMG动画：时间轴＋关键帧的UI动效模块8·UI基础虚幻引擎5（UE5）数字内容创作基础教程08UMG动画系统基于时间轴和关键帧，在时间线上直接定义UI属性（位置、缩放、透明度）的变化过程，高效制作平滑的过渡、入场、出场和交互反馈动画，无需蓝图逐帧控制。动画创作三步（以缩放动画为例）01选中目标UI元素，动画面板点击“＋动画”创建并命名（如ScaleAnimation）02点击“轨道”选择“添加变换轨道”，获得平移、旋转、缩放等属性轨道03起始位置（0.0s）将缩放设为（0,0）并打关键帧；结束位置（0.5s）缩放恢复（1,1）再打关键帧动画驱动：蓝图控制播放▪基础播放：事件图表拖入动画变量→PlayAnimation节点，按钮OnClicked触发；控件初始缩放设为（0,0）确保起始状态一致▪正反向交替：OnClicked后接FlipFlop节点，A接正向播放、B接反向（PlayMode设Reverse），实现“开关”切换效果行业常用技巧◆动效要点：为关键帧设置缓动曲线模拟真实加速减速；变换和透明度动画开销低，材质参数与顶点变形动画开销大，需谨慎使用单元8.4｜综合实践案例案例一：开始界面的搭建模块8·UI基础虚幻引擎5（UE5）数字内容创作基础教程0901创建控件蓝图“Kaishijiemian”，新建素材文件夹并导入所需素材02添加画布面板；添加图像控件，锚点改为父节点、偏移全设为0，实现背景自适应屏幕03添加文本控件输入标题“草药寻踪”，居中、勾选“大小到内容”，设置字号并添加轮廓阴影04添加按钮并命名，锚点设为中心点，设置样式素材；按钮上添加文本“开始游戏”；调整悬停与按下状态提供视觉反馈；复制出“游戏结束”按钮05绑定事件：开始按钮OnClicked接PrintString；退出按钮接QuitGame节点06界面显示：EventBeginPlay→CreateWidget（选Kaishijiemian）→AddtoViewport；接GetPlayerController→SetShowMouseCursor（勾选True）显示鼠标07编译、保存、运行，预览完整开始界面单元8.4｜综合实践案例案例二：加载界面——进度条的自动更新模块8·UI基础虚幻引擎5（UE5）数字内容创作基础教程1001创建控件蓝图“Loading”并导入素材；添加画布面板、黑色背景图像与“loading......”文本02添加进度条：锚点设中心点，设置背景图与填充图样式、填充颜色为白色，百分比初始为003绑定变量：百分比“创建绑定”，新建浮点变量ProgressBarValue并连接ReturnNode——变量变化即驱动进度条04自动加载逻辑：EventTick接Branch判断ProgressBarValue＜1.0，为真则调用自定义事件05自定义事件中：ProgressBarValue＋0.005后写回变量；再判断是否≥1.0，为真则设为1.0并PrintString“加载完毕”06编译保存运行，进度条自动增长，完成后显示提示核心思路：通过“绑定”将控件属性与变量关联，再用蓝图逻辑驱动变量，是UMG数据驱动UI的基本范式。单元8.4｜综合实践案例案例三：登录界面与面板切换模块8·UI基础虚幻引擎5（UE5）数字内容创作基础教程11登录界面：收集并验证用户输入▪基础框架：画布面板＋背景图＋标题文本；用水平框构建“用户名：＋文本框”“密码：＋文本框”输入行，密码框勾选“为密码”隐藏输入▪创建结构体UserInfo（Username、Password两个文本变量），用于规整收集用户信息▪文本框绑定“文本提交时”事件写入对应变量；登录按钮点击时打包UserInfo、拆分验证并打印面板切换：带动画的多面板导航▪底部水平框放置“主页/背包/商店”三个导航按钮；中间用覆层承载三个内容面板▪制作三个切换动画：主页从下方滑入、背包从左侧、商店从右侧滑入中心▪切换控制：变量curAnmi记录当前动画，点击时用“不等于＋分支”判断——不同则反向播放当前动画再正向播放目标动画，实现平滑切换模块小结本模块核心内容回顾模块8·UI基础虚幻引擎5（UE5）数字内容创作基础教程12本模块系统讲解了UE5用户界面开发基础：明确UI的核心作用与UMG系统的价值，解析编辑器界面、基础控件、布局容器、属性事件与动画系统等核心模块，构建完整的UI知识体系。通过“开始界面”“加载界面”“登录界面”“面板切换”四个循序渐进的案例，完整掌握从界面布局、交互逻辑到动态效果的UI开发全流程。知识要点回顾▪概念体系：UI是总和、HUD是持续显示的信息层、UMG是实现工具▪控件系统：基础控件显示与输入，容器控件排列管理，画布面板与控件切换器最常用▪核心属性：锚点与偏移实现多分辨率自适应；外观、内容与状态属性控制表现▪事件驱动：OnClicked等事件让控件响应操作；绑定机制实现数据驱动UI▪UMG动画：时间轴＋关键帧制作动效，蓝图PlayAnimation驱动播放▪四大案例：开始、加载、登录、面板切换，覆盖游戏UI的典型场景巩固测练检验与迁移：课后练习模块8·UI基础虚幻引擎5（UE5）数字内容创作基础教程13一、简答题▪简述UI系统中“视