第五章：构建用户界面（UMG） - 游戏内HUD

本章概述

在第四章中，我们实现了游戏的交互系统，现在需要为玩家提供清晰的信息反馈。本章将使用UE5的UMG（Unreal Motion Graphics）系统创建完整的用户界面，包括游戏HUD、开始菜单和结束界面。

本章学习目标：

• 掌握UMG控件蓝图的基本创建和使用方法
• 学习使用Canvas Panel进行UI布局管理
• 理解数据绑定的原理和应用
• 实现完整的游戏界面流程管理
• 掌握UI动画和交互效果的制作

5.1 理解UMG和游戏UI架构

UMG基础概念

UMG是虚幻引擎的视觉UI创作工具，允许开发者通过拖放方式设计用户界面。在打地鼠游戏中，我们需要创建三种主要界面：

1. HUD（平视显示器）：游戏进行时显示的实时信息
2. 开始菜单：游戏启动时的主界面
3. 结束界面：游戏结束时的结果展示

UI系统架构设计

UI管理系统：
PlayerController（UI管理器）
├── 开始菜单（WBP_MainMenu）
├── 游戏HUD（WBP_HUD）  
└── 结束界面（WBP_GameOver）

5.2 创建游戏HUD界面

步骤1：创建HUD控件蓝图

1. 新建控件蓝图

   - 在内容浏览器中右键 → 用户界面 → 控件蓝图→ 用户控件
   - 命名为WBP_HUD
   - 保存到UI文件夹

   

2. 设计HUD布局

   使用画布面板（Canvas Panel）作为根容器
   添加以下UI元素：
   - 分数文本（ScoreText）：左上角
   - 时间文本（TimeText）：右上角  

步骤2：设置HUD视觉样式

1. 配置文本属性

   分数文本（ScoreText）：
   - 内容："分数: 0"
   - 字体大小：32
   - 颜色：白色带黑色描边
   - 锚点：左上角（Top Left）
   
   时间文本（TimeText）：
   - 内容："时间: 60"  
   - 字体大小：28
   - 颜色：黄色（时间不足时变红）
   - 锚点：右上角（Top Right）

2. 使用锚点实现自适应布局

   设置正确的锚点确保在不同分辨率下UI元素位置正确：
   - 分数文本：左上锚点，偏移(50, 50)
   - 时间文本：右上锚点，偏移(-50, 50)

步骤3：实现数据绑定

1. 创建绑定函数

   为分数文本创建绑定：
   - 选择ScoreText → 点击文本后面的链条按钮 → 创建绑定
   - 函数名：GetScoreText
   - 逻辑：返回"分数: " + 游戏模式中的CurrentScore

为时间文本创建绑定：

• 函数名：GetTimeText
• 逻辑：返回"时间: " + 游戏模式中的TimeRemaining
  

5.3 创建开始菜单

步骤4：设计开始菜单界面

1. 创建WBP_MainMenu控件蓝图

   UI元素组成：
   - 背景图片（覆盖全屏）
   - 游戏标题文本（"打地鼠大冒险"）
   - 开始游戏按钮
   - 退出游戏按钮

步骤5：实现按钮功能

1. 修改GameMode

   • 添加StartGame函数
   • 将BeginPlay后面的节点移动到StartGame里
     
     

2. 按钮事件绑定

   开始游戏按钮（OnClicked事件）：
   - 移除开始菜单（Remove From Parent）
   - 创建并显示HUD界面
   - 调用GameMode的StartGame函数

退出游戏按钮（OnClicked事件）：

• 调用Quit Game节点退出游戏

  

  5.4 创建结束界面

  步骤6：设计游戏结束界面

  1. 创建WBP_GameOver控件蓝图

UI元素组成：

• 半透明黑色背景

• "游戏结束"标题

• 最终分数显示

• 最高分记录（如果破纪录）

• 重新开始按钮

• 返回主菜单按钮

  2. 实现数据展示

最终分数绑定：

• 绑定到GameMode的CurrentScore
• 显示格式："最终分数: {Score}"

最高分显示：

• 与本地存储的最高分比较

• 如果破纪录，显示"新纪录!"提示

  
  

  5.5 高级UI功能实现

  步骤7：实现暂停菜单

  1. 暂停菜单设计

添加暂停菜单（WBP_PauseMenu）：

• 半透明背景

• 继续游戏按钮

• 退出游戏按钮
  

  2. 暂停逻辑实现

暂停功能：

• 在WBP_HUD时间显示控件下面添加暂停按钮
• 设置游戏时间膨胀为0（暂停游戏逻辑）
• 显示暂停菜单
• 设置UI输入模式
  

继续游戏：

• 恢复游戏时间膨胀

• 隐藏暂停菜单

• 恢复游戏输入模式

  

  5.7 UI优化和最佳实践

  步骤8：性能优化技巧

  1. UI渲染优化

优化建议：

• 使用适当的UI元素可见性设置（Visible/Hidden/Collapsed）

• 避免不必要的Tick事件

• 使用材质实例代替动态材质

• 合理设置UI更新频率

  2. 内存管理

良好的UI内存管理：

• 及时销毁不再需要的UI实例

• 使用对象池管理频繁创建的UI元素

• 避免内存泄漏：确保UI移除时清理所有引用

  步骤9：多分辨率适配

  1. 响应式布局设计

适配不同屏幕比例：

• 使用锚点（Anchors）而非绝对位置

• 设置安全区域边界

• 测试常见分辨率：1920x1080、2560x1440、3840x2160等

  2. 字体和缩放设置

确保可读性：

• 使用矢量字体避免锯齿

• 设置合适的DPI缩放规则

• 测试小屏幕下的可读性

  5.8 完整集成测试

  步骤10：全面测试UI系统

  1. 功能测试清单

✅ 开始菜单正常显示，按钮功能正常

✅ 游戏HUD实时更新分数和时间

✅ 结束界面正确显示最终分数

✅ 界面切换流畅，无闪烁或延迟

✅ 输入模式切换正确（游戏/UI模式）

✅ 多分辨率下UI布局正常

2. **用户体验测试**

重点测试项：

• 界面切换动画是否流畅

• 按钮反馈是否及时明确

• 文本可读性（颜色、大小、对比度）

• 操作流程是否符合直觉

  5.9 常见问题解决方案

  问题1：UI绑定不更新

  • 检查绑定函数是否正确实现
  • 确认事件分发器已正确绑定和触发
  • 验证变量同步机制

  问题2：UI元素位置错乱

  • 检查锚点设置是否正确
  • 确认不同分辨率下的布局表现
  • 验证Canvas Panel的尺寸设置

  问题3：输入响应异常

  • 检查输入模式设置（GameOnly/UIOnly/GameAndUI）
  • 确认鼠标可见性设置
  • 验证焦点管理逻辑

  问题4：内存泄漏

  • 确保UI移除时清理所有事件绑定
  • 使用引用检查工具验证内存释放
  • 测试长时间游戏的稳定性

  5.10 本章完整UI结构

  控件蓝图架构：

WBP_MainMenu（开始菜单）

├── 背景图片

├── 标题文本

├── 开始按钮

└── 退出按钮

WBP_HUD（游戏HUD）

├── 分数文本（数据绑定）

├── 时间文本（数据绑定）

└── 连击提示（动画控制）

WBP_GameOver（结束界面）

├── 结果标题

├── 分数显示（动画效果）

├── 重新开始按钮

└── 主菜单按钮

### PlayerController中的UI管理逻辑：
```plaintext
事件BeginPlay → 显示开始菜单 → 设置UI输入模式

开始游戏事件 → 隐藏开始菜单 → 显示HUD → 设置游戏输入模式

游戏结束事件 → 隐藏HUD → 显示结束界面 → 设置UI输入模式

5.11 本章总结

已完成的核心功能：

• ✅ 创建了完整的游戏HUD界面，实时显示分数和时间
• ✅ 实现了开始菜单和结束界面
• ✅ 建立了完整的UI管理系统和流程控制
• ✅ 添加了UI动画和交互效果
• ✅ 实现了多分辨率适配和性能优化

技术要点回顾：

• UMG控件蓝图是创建UI的主要工具
• 数据绑定确保UI与游戏状态的实时同步
• 锚点系统是实现响应式布局的关键
• 合理的UI架构设计便于维护和扩展

5.12 下一步预览

在第六章中，我们将：

• 为游戏添加完整的音效系统
• 实现背景音乐和场景音效
• 添加地鼠音效和击打反馈音效
• 学习音效资源管理和优化

作业：

1. 完善HUD的视觉效果，添加图标和进度条等元素
2. 测试不同分辨率下的UI表现，确保布局正确
3. 尝试添加更多的UI动画效果，提升用户体验

---

当前项目状态：

现在你的打地鼠游戏已经拥有了完整的用户界面系统！玩家可以通过清晰的UI了解游戏状态，体验完整的游戏流程。

在下一章中，我们将为游戏添加音效，让游戏体验更加沉浸和完整。

如果在实现UI过程中遇到任何布局或绑定的问题，欢迎在评论区讨论具体现象！