虚幻引擎（Unreal Engine 5）技术与应用 课件 第七章游戏UI用户界面设计

游戏UI用户界面设计用户界面（UI）是连接玩家与虚拟世界的核心交互系统，直接影响游戏的可玩性、沉浸感和用户体验。本章将深入探讨虚幻引擎UMG工具的使用方法。第7章UI系统的核心价值信息传达通过视觉元素如菜单、图标、血条等向玩家传递游戏状态信息操作控制提供按键反馈和操作流程，实现玩家与游戏的双向交互动态反馈通过音效、动效等机制增强沉浸感，构建完整的交互体验虚幻引擎UMG工具UMG核心功能虚幻界面设计器（UMG）是虚幻引擎内置的UI创建工具，允许通过拖拽组件构建界面，并使用蓝图驱动UI行为逻辑。所有用户界面元素（HUD、菜单等）都放置在控件蓝图中，实现可视化设计与脚本化功能的完美结合。主要特点可视化拖拽式界面设计蓝图驱动的交互逻辑控件蓝图统一管理实时预览与调试跨平台适配支持UMG界面构成UMG由多个窗口面板组成，每个面板都有其特定功能。理解这些面板的作用是掌握UMG的基础。工具栏提供快速运行关卡的播放按钮，以及设计器和图表模式的切换功能控制板提供各种UI组件供开发者使用，包括按钮、文本框、图像等常用元素层级面板以树状结构显示所有UI元素及其嵌套关系，便于管理复杂布局UMG核心面板详解1设计器面板可视化设计UI布局的核心区域，支持实时预览和多设备分辨率调适2细节面板显示当前选择模块的所有可设置项目，用于精确调整UI组件属性3动画面板通过时间轴和关键帧控制UI元素的动画效果，如移动、缩放、透明度变化4事件图表面板基于蓝图系统定义UI交互逻辑，实现动态交互与数据绑定工具栏与模式切换工具栏功能工具栏提供常用操作按钮，其中最常用的是播放按钮，用于快速运行关卡测试UI效果。右侧的"设计器"和"图表"切换按钮是UMG工作流程的核心控制。双模式工作流设计器模式：添加删除UI组件，调整细节和动画，进行可视化设计图表模式：添加蓝图事件，控制控件触发逻辑和使用途径控制板组件分类控制板将UI组件按功能分类，方便开发者快速查找和使用。只需将组件拖入设计器即可进行可视化设计。通用组件按钮、文本框、图像等基础UI元素面板组件画布面板、垂直框等布局容器输入组件文本输入框、滑块等交互元素特殊效果背景模糊、边界等视觉效果组件用户创建自定义控件蓝图和复用组件层级面板与控件树层级面板以树状结构显示UI元素的嵌套关系。UI的最终尺寸和布局由自身尺寸和父子关系决定。1SPanel多个子控件2SComponentWidget一个子控件3SLeafWidget无子控件常用UMG控件概览画布面板以绝对坐标位置放置UI组件，提供灵活的布局方式按钮响应用户点击事件，可自定义外观和不同状态样式图像显示静态图像，可调整大小、缩放和对齐方式进度条显示数值型进度，如生命值、法力值或任务完成度更多UI控件类型插槽定义UI组件在容器中的布局属性，控制定位、大小和对齐文本框允许用户输入和编辑文本信息，支持多种属性自定义用户创建自定义UI小组件，实现模块化设计和组件复用实践案例创建主菜单界面01新建控件蓝图在资源浏览器右键选择"用户界面→控件蓝图"，命名为"UI"02添加画布面板将画布面板拖入层级面板作为根部件，所有组件都放置于其下03放置UI组件添加图像、垂直框和文本组件到画布面板下方04设置背景图片选择图像组件，在细节面板中导入背景图片并调整属性锚点系统详解锚点工具定义UI控件在画布面板上的预期位置，并能在不同屏幕尺寸下维持这一位置。全屏填充选择右下角锚点，将偏移值归零，实现完全填充居中对齐选择中心锚点，通过位置XY值控制相对位置角落固定选择四角锚点，保持UI元素在特定角落位置创建按钮交互效果按钮父类设计新建控件蓝图"主界面按钮"，设置宽度170、高度70。添加画布面板、按钮和文本组件，构建基础结构。设置按钮样式：普通状态透明度为0，悬停和按压状态显示白色纹理。音效配置悬停音效：鼠标移入时播放按压音效：点击时播放字体设置：尺寸20，保持族系不变制作按钮动画在动画面板创建"交互"动画，为按钮添加缩放效果增强用户反馈。0秒关键帧缩放XY值设为1.0，初始状态0.35秒关键帧缩放XY值设为1.1，放大效果绑定事件连接悬停时和未悬停时事件地图选择界面设计界面结构新建"地图选择界面"控件蓝图，添加画布面板作为根部件。放置背景模糊组件和文本组件，构建基础框架。选择按钮创建"地图选择按钮"控件，包含边界、按钮和图像组件。设置锚点居中，配置尺寸和位置参数。位置与对齐系统XY位置坐标控件对锚点的相对位置，基于默认对齐方式的偏移量0-1对齐比例控件相对自身左上角的偏移比例，归一化值域WH尺寸大小控件框的宽度和高度，决定组件的显示区域边界组件示例：位置X=-275，位置Y=-325，尺寸X=550，尺寸Y=650，对齐XY=0.5实现居中效果。地图按钮交互动画最终（颜色1.0）中间（0.35s）初始（0s）创建"地图选择按钮交互"动画，包含三个关键属性的变化：渲染不透明度从0到1.0的淡入效果，时长0.35秒缩放变换从1.0放大到1.2，增强视觉反馈颜色变化RGB值从0.35提升到1.0，图像变亮事件绑定与蓝图逻辑在图表模式下，将交互动画绑定到按钮的悬停事件，实现动态响应。1悬停时事件播放交互动画，播放模式为正向2未悬停时事件播放交互动画，播放模式设为翻转3点击事件触发自定义事件，执行界面切换逻辑界面过渡动画设计隐藏机制将地图选择界面添加到主界面画布面板下，设置锚点为全屏，偏移值归零。可视性设为"非可命中测试（仅自身）"，渲染不透明度设为0，实现完全隐藏。动画切换创建"点击地图选择交互"动画，包含两个界面的缩放和不透明度变化。主界面从1缩放到0，地图界面从0缩放到1，时长0.5秒，实现平滑过渡。按钮事件绑定流程01EventConstruct在关卡激活时启动，相当于蓝图中的EventBeginPlay节点02BindEventtoOnClicked将事件绑定到按钮的点击事件上，建立触发关系03自定义事件创建"退出游戏"或"地图选择"等自定义事件节点04执行逻辑连接QuitGame或PlayAnimation节点，实现具体功能完整交互逻辑实现通过蓝图节点连接，实现按钮点击后的完整交互流程。退出按钮关闭游戏，地图选择按钮播放过渡动画并切换界面。垂直框布局与按钮排列在主界面中使用垂直框组件排列按钮，实现整齐的菜单布局。1设置锚点垂直框锚点设为居中，位置X=-880，位置Y=802调整尺寸尺寸X=170，尺寸Y=390，容纳多个按钮3添加按钮将地图选择按钮和退出按钮拖入垂直框下课后练习概念题与操作题概念理解锚点在适配不同屏幕分辨率时的作用层级面板控件树结构对UI布局的影响动画面板关键帧实现按钮缩放的方法实践操作创建带交互动画的主菜单界面添加背景与自定义按钮控件设计按钮悬停和点击动画效果调整布局并测试多分辨率适配锚点在适配不同屏幕分辨率时的作用层级面板控件树结构对UI布局的影响动画面板关键帧实现按钮缩放的方法实践项目要求添加背景与按钮拖入图像组件作为背景，设置锚点，导入背景纹理并调整不透明度。创建自定义按钮控件"MenuButton"，包含文本标签和悬停/按压音效。设计按钮动画在动画面板中新建"ButtonHover"动画，为按钮添加缩放效果。绑定动画到按钮的"悬停时"和"未悬停时"事件。调整布局与适配使用垂直框组件排列按钮