第 16 天：游戏 UI（UMG）开发，打造主菜单 & 血条！

🎯 目的

✅ 利用 UMG 创建 UI 并在游戏中表现
✅ 实现血条（HP Bar）体系，动态表现脚色生命值
✅ 创建主菜单 UI，并添加开始/退出按钮
✅ 生存当前场景，创建新场景作为主菜单
✅ 点击 StartGameButton 后，打开原来的游戏场景
1️⃣ 什么是 UMG（Unreal Motion Graphics）？

UMG 是 Unreal Engine 5 内置的 用户界面（UI）框架，可用于：

• 游戏 HUD（血条、得分）
  
• 菜单（主菜单、停息菜单）
  
• 交互界面（对话框、使命面板）
  

本节实现：

• 创建血条 UI，并在 C++ 里动态更新
  
• 生存当前游戏场景
  
• 创建一个新场景作为主菜单
  
• 创建 WBP_MainMenu UI
  
• 点击 StartGameButton 后加载原游戏场景
  

2️⃣ 创建 HP 血条 UI

🔹 1. 在 UMG 创建血条

• 在 Content Browser 里，右键 → User Interface → Widget Blueprint
  
• 定名为 WBP_HealthBar
  
• 双击打开 WBP_HealthBar
  
• 在 Designer 视图中：
  
  
  
  • 添加 Progress Bar（进度条）
    
  • 定名为 HealthProgressBar
    
  • 设置 Fill Color 为赤色
    
  
  
• 生存并关闭
  
  
  
  

✅ 现在 UI 已经预备好，接下来我们用 C++ 绑定血条！
🔹 2. 在 C++ 里绑定 UI

必要在 PlayerCharacter 里：

• 创建 UI 并在游戏中表现
  
• 根据脚色血量更新 HealthProgressBar
  

🔹 3. 修改 PlayerCharacter.h

📌 添加 UI 变量

1. #pragma once
3. #include "CoreMinimal.h"
4. #include "GameFramework/Character.h"
5. #include "Blueprint/UserWidget.h"
6. #include "PlayerCharacter.generated.h"
8. UCLASS()
9. class MYGAME_API APlayerCharacter : public ACharacter
10. {
11.     GENERATED_BODY()
13. public:
14.     APlayerCharacter();
16. protected:
17.     virtual void BeginPlay() override;
19. public:
20.     // 生命值
21.     UPROPERTY(EditAnywhere, BlueprintReadWrite, Category = "Character Stats")
22.     float Health;
24.     // 最大生命值
25.     UPROPERTY(EditAnywhere, BlueprintReadWrite, Category = "Character Stats")
26.     float MaxHealth;
28.     // **存储血条 UI 蓝图的变量**
29.     UPROPERTY(EditAnywhere, BlueprintReadWrite, Category = "UI")
30.     TSubclassOf<UUserWidget> HealthBarClass;
32.     // **实际显示在游戏中的血条 UI**
33.     UPROPERTY()
34.     UUserWidget* HealthBarWidget;
36.     // 更新血条
37.     UFUNCTION(BlueprintCallable, Category = "UI")
38.     void UpdateHealthBar();
39. };

复制代码

✅ 在 蓝图 里设置 HealthBarClass 为 WBP_HealthBar
🔹 4. 修改 PlayerCharacter.cpp

📌 在 BeginPlay() 里创建 UI 并表现

1. #include "PlayerCharacter.h"
2. #include "Blueprint/UserWidget.h"
3. #include "Components/ProgressBar.h"
5. APlayerCharacter::APlayerCharacter()
6. {
7.     Health = 100.0f;
8.     MaxHealth = 100.0f;
9. }
11. void APlayerCharacter::BeginPlay()
12. {
13.     Super::BeginPlay();
15.     // **创建 UI 并添加到视口**
16.     if (HealthBarClass)
17.     {
18.         HealthBarWidget = CreateWidget<UUserWidget>(GetWorld(), HealthBarClass);
19.         if (HealthBarWidget)
20.         {
21.             HealthBarWidget->AddToViewport();
22.             UpdateHealthBar();
23.         }
24.     }
25. }

复制代码

📌 更新血条

1. void APlayerCharacter::UpdateHealthBar()
2. {
3.     if (HealthBarWidget)
4.     {
5.         UProgressBar* HealthBar = Cast<UProgressBar>(HealthBarWidget->GetWidgetFromName(TEXT("HealthProgressBar")));
6.         if (HealthBar)
7.         {
8.             HealthBar->SetPercent(Health / MaxHealth);
9.         }
10.     }
11. }

复制代码

✅ 血条 UI 会根据 Health 厘革自动更新！
3️⃣ 备份当前场景，并创建新场景

🔹 1. 备份当前游戏场景

• 在 Content Browser 里，找到当前关卡（如 GameLevel）
  
• 右键 → Duplicate（复制）
  
• 定名为 GameLevel_Backup
  
• 确保 GameLevel_Backup 仍可正常运行
  

🔹 2. 创建新的主菜单场景

• 在 File → New Level
  
• 选择 Empty Level
  
• 在 World Outliner 里添加
  
  
  
  • Directional Light
    
  • Sky Sphere
    
  • Player Start
    
  
  
• 生存场景，定名为 MainMenuLevel
  

✅ 现在有两个场景：

• GameLevel（游戏主场景）
  
• MainMenuLevel（主菜单场景）
  

4️⃣ 创建主菜单 UI

🔹 1. 在 UMG 创建 WBP_MainMenu

• 在 Content Browser 里
  
  
  
  • 右键 → User Interface → Widget Blueprint
    
  • 定名为 WBP_MainMenu
    
  
  
• 双击打开 WBP_MainMenu
  
• 在 Designer 视图中
  
  
  
  • 添加Canvas
    
  • 添加 Text，设置 Main Menu
    
    
    
    
  • 添加 Button（按钮），定名为 StartGameButton
    
    
    
    • 添加Text，修改文本为退出
      
      
      
      
    
    
  • 添加 Button（按钮），定名为 ExitGameButton
    
    
    
    • 添加Text，修改文本为开始
      
      
      
      
      
      
      
    
    
  
  
• 生存并关闭
  

🔹 2. 在蓝图 WBP_MainMenu 绑定按钮变乱

• 打开 WBP_MainMenu
  
• 选中 StartGameButton
  
  
  
  • 在 Details 里，找到 OnClicked 变乱
    
  • 绑定 On StartGameButton Clicked
    
    
    
    
  • 在蓝图中添加 Open Level 节点，输入 GameLevel
    
    
    
    
  
  
• 选中 ExitGameButton
  
  
  
  • 绑定 On ExitGameButton Clicked
    
  • 在蓝图中添加 Quit Game 节点
    📌 终极蓝图逻辑
    
    
    
    
  
  

✅ 现在主菜单可以开始游戏 & 退出游戏！
5️⃣ 在 GameMode 里加载主菜单 UI

🔹 在 MainMenuLevel 里

• 在 Content Browser 里
  
  
  
  • 右键 → Blueprints → GameModeBase
    
  • 定名为 MyGameMode
    
  
  
• 双击打开MyGameMode，添加如下节点
  
  
  
  
• 打开 World Settings
  
• 在 GameMode Override 里选择 MyGameMode
  ✅ 现在 MainMenuLevel 运行时，会自动加载 WBP_MainMenu！
  

6️⃣ 运行测试

• 运行 MainMenuLevel
  
  
  
  • StartGameButton → 加载 GameLevel
    
  • ExitGameButton → 退出游戏
    
  
  
• 游戏运行后，表现 GameLevel
  
  
  
  • 血条 & 脚色 UI 表现正常
    ✅ 乐成实现主菜单 & 场景切换！
    
  
  

🎯 总结

✅ 利用 UMG 创建 血条 UI，并在 C++ 更新血量
✅ 绑定 WBP_HealthBar UI，动态表现脚色生命值
✅ 备份 GameLevel，创建 MainMenuLevel 作为主菜单场景
✅ 在 MainMenuLevel 里加载 WBP_MainMenu UI
✅ 主菜单 StartGameButton 点击后加载 GameLevel
✅ ExitGameButton 点击退却出游戏
🎮 现在，你的游戏有了主菜单，并能切换到游戏场景，体验完备的游戏流程！🚀