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

🎯 目标

✅ 使用 UMG 创建 UI 并在游戏中显示
✅ 实现血条（HP Bar）系统，动态显示角色生命值
✅ 创建主菜单 UI，并添加开始/退出按钮
✅ 保存当前场景，创建新场景作为主菜单
✅ 点击 StartGameButton 后，打开原来的游戏场景

1️⃣ 什么是 UMG（Unreal Motion Graphics）？

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

• 游戏 HUD（血条、得分）
• 菜单（主菜单、暂停菜单）
• 交互界面（对话框、任务面板）

本节实现：

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

2️⃣ 创建 HP 血条 UI

🔹 1. 在 UMG 创建血条

1. 在 Content Browser 里，右键 → User Interface → Widget Blueprint
2. 命名为 WBP_HealthBar
3. 双击打开 WBP_HealthBar
4. 在 Designer 视图中：
   • 添加 Progress Bar（进度条）
   • 命名为 HealthProgressBar
   • 设置 Fill Color 为红色
5. 保存并关闭
   

✅ 现在 UI 已经准备好，接下来我们用 C++ 绑定血条！

🔹 2. 在 C++ 里绑定 UI

需要在 PlayerCharacter 里：

1. 创建 UI 并在游戏中显示
2. 根据角色血量更新 HealthProgressBar

🔹 3. 修改 PlayerCharacter.h

📌 添加 UI 变量

#pragma once#include "CoreMinimal.h"
#include "GameFramework/Character.h"
#include "Blueprint/UserWidget.h"
#include "PlayerCharacter.generated.h"UCLASS()
class MYGAME_API APlayerCharacter : public ACharacter
{GENERATED_BODY()public:APlayerCharacter();protected:virtual void BeginPlay() override;public:// 生命值UPROPERTY(EditAnywhere, BlueprintReadWrite, Category = "Character Stats")float Health;// 最大生命值UPROPERTY(EditAnywhere, BlueprintReadWrite, Category = "Character Stats")float MaxHealth;// **存储血条 UI 蓝图的变量**UPROPERTY(EditAnywhere, BlueprintReadWrite, Category = "UI")TSubclassOf<UUserWidget> HealthBarClass;// **实际显示在游戏中的血条 UI**UPROPERTY()UUserWidget* HealthBarWidget;// 更新血条UFUNCTION(BlueprintCallable, Category = "UI")void UpdateHealthBar();
};

✅ 在 蓝图 里设置 HealthBarClass 为 WBP_HealthBar

🔹 4. 修改 PlayerCharacter.cpp

📌 在 BeginPlay() 里创建 UI 并显示

#include "PlayerCharacter.h"
#include "Blueprint/UserWidget.h"
#include "Components/ProgressBar.h"APlayerCharacter::APlayerCharacter()
{Health = 100.0f;MaxHealth = 100.0f;
}void APlayerCharacter::BeginPlay()
{Super::BeginPlay();// **创建 UI 并添加到视口**if (HealthBarClass){HealthBarWidget = CreateWidget<UUserWidget>(GetWorld(), HealthBarClass);if (HealthBarWidget){HealthBarWidget->AddToViewport();UpdateHealthBar();}}
}

📌 更新血条

void APlayerCharacter::UpdateHealthBar()
{if (HealthBarWidget){UProgressBar* HealthBar = Cast<UProgressBar>(HealthBarWidget->GetWidgetFromName(TEXT("HealthProgressBar")));if (HealthBar){HealthBar->SetPercent(Health / MaxHealth);}}
}

✅ 血条 UI 会根据 Health 变化自动更新！

3️⃣ 备份当前场景，并创建新场景

🔹 1. 备份当前游戏场景

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

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

1. 在 File → New Level
2. 选择 Empty Level
3. 在 World Outliner 里添加
   • Directional Light
   • Sky Sphere
   • Player Start
4. 保存场景，命名为 MainMenuLevel

✅ 现在有两个场景：

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

4️⃣ 创建主菜单 UI

🔹 1. 在 UMG 创建 WBP_MainMenu

1. 在 Content Browser 里

   • 右键 → User Interface → Widget Blueprint
   • 命名为 WBP_MainMenu

2. 双击打开 WBP_MainMenu

3. 在 Designer 视图中

   • 添加Canvas

   • 添加 Text，设置 Main Menu
     

   • 添加 Button（按钮），命名为 StartGameButton

     • 添加Text，修改文本为退出
       

   • 添加 Button（按钮），命名为 ExitGameButton

     • 添加Text，修改文本为开始
       
       

4. 保存并关闭

🔹 2. 在蓝图 WBP_MainMenu 绑定按钮事件

1. 打开 WBP_MainMenu

2. 选中 StartGameButton

   • 在 Details 里，找到 OnClicked 事件

   • 绑定 On StartGameButton Clicked
     

   • 在蓝图中添加 Open Level 节点，输入 GameLevel
     

3. 选中 ExitGameButton

   • 绑定 On ExitGameButton Clicked
   • 在蓝图中添加 Quit Game 节点
     📌 最终蓝图逻辑
     

✅ 现在主菜单可以开始游戏 & 退出游戏！

5️⃣ 在 GameMode 里加载主菜单 UI

🔹 在 MainMenuLevel 里

1. 在 Content Browser 里

   • 右键 → Blueprints → GameModeBase
   • 命名为 MyGameMode

2. 双击打开MyGameMode，添加如下节点
   

3. 打开 World Settings

4. 在 GameMode Override 里选择 MyGameMode
   ✅ 现在 MainMenuLevel 运行时，会自动加载 WBP_MainMenu！

6️⃣ 运行测试

1. 运行 MainMenuLevel
   • StartGameButton → 加载 GameLevel
   • ExitGameButton → 退出游戏
2. 游戏运行后，显示 GameLevel
   • 血条 & 角色 UI 显示正常
     ✅ 成功实现主菜单 & 场景切换！

🎯 总结

✅ 使用 UMG 创建 血条 UI，并在 C++ 更新血量
✅ 绑定 WBP_HealthBar UI，动态显示角色生命值
✅ 备份 GameLevel，创建 MainMenuLevel 作为主菜单场景
✅ 在 MainMenuLevel 里加载 WBP_MainMenu UI
✅ 主菜单 StartGameButton 点击后加载 GameLevel
✅ ExitGameButton 点击后退出游戏

🎮 现在，你的游戏有了主菜单，并能切换到游戏场景，体验完整的游戏流程！🚀