当前位置：首页 > article >正文

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

article 2025/2/22 19:44:58

🎯 目标

✅ 使用 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 变量

#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. 备份当前游戏场景

在 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 点击后退出游戏

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

查看全文

http://www.kler.cn/a/549560.html