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

第 17 天：HUD 世界 UI 显示！

article 2025/2/23 18:30:36

🎯 目标

✅ 理解 HUD（Head-Up Display）的概念
✅ 在 C++ 创建 HUD，在屏幕上显示信息
✅ 使用 UMG 创建世界 UI（World Space UI）
✅ 让 NPC 头顶显示名字 & 交互提示

1️⃣ 什么是 HUD？

HUD（Head-Up Display）是游戏中的用户界面（UI），用于在屏幕上显示关键信息，如：

血量、子弹、得分
任务目标
地图/雷达
HUD 是屏幕 UI（Screen Space UI），始终固定在屏幕上，不受 3D 场景影响。

🎯 本节内容

创建 HUD，在屏幕上绘制信息
创建 UMG 世界 UI
让 NPC 头顶显示名字
当玩家靠近 NPC 时，显示交互提示

2️⃣ 在 C++ 创建 HUD

🔹 1. 创建 MyHUD C++ 类

在 UE5，点击工具 → 新建 C++ 类
选择 HUD 作为父类
命名为 MyHUD
点击创建并等待编译完成

🔹 2. 修改 MyHUD.h

📌 在屏幕上绘制文本

#pragma once

#include "CoreMinimal.h"
#include "GameFramework/HUD.h"
#include "MyHUD.generated.h"

UCLASS()
class MYGAME_API AMyHUD : public AHUD
{
    GENERATED_BODY()

public:
    virtual void DrawHUD() override;

    UPROPERTY(EditAnywhere, BlueprintReadWrite, Category = "HUD")
    FString DisplayText;

    UPROPERTY(EditAnywhere, BlueprintReadWrite, Category = "HUD")
    FLinearColor TextColor;
};

✅ DisplayText 用于 HUD 显示，TextColor 控制文本颜色

🔹 3. 修改 MyHUD.cpp

📌 在屏幕上绘制文本

#include "MyHUD.h"
#include "Engine/Canvas.h"

void AMyHUD::DrawHUD()
{
    Super::DrawHUD();

    if (!DisplayText.IsEmpty())
    {
        float ScreenX = Canvas->SizeX * 0.5f;
        float ScreenY = Canvas->SizeY * 0.1f;

        FCanvasTextItem TextItem(FVector2D(ScreenX, ScreenY), FText::FromString(DisplayText), GEngine->GetSmallFont(), TextColor);
        TextItem.Scale = FVector2D(2.0f, 2.0f);

        Canvas->DrawItem(TextItem);
    }
}

✅ 此代码会在屏幕上方显示 DisplayText，可用于游戏信息（如任务提示）。

🔹 4. 让 GameMode 使用 MyHUD

打开 GameMode 蓝图（或 C++）
在 HUD Class 里选择 MyHUD
✅ 现在 MyHUD 会在游戏运行时自动显示！

3️⃣ 创建 UMG 世界 UI

UMG 世界 UI（World Space UI）是附着在 3D 物体上的 UI，如：

NPC 头顶名字
物品交互提示
任务标记

🔹 1. 创建 WBP_NPCName

在 Content Browser
- 右键 → User Interface → Widget Blueprint
- 命名为 WBP_NPCName
双击打开 WBP_NPCName
在 Designer 里
- 添加 TextBlock，命名 NPCNameText
- 默认文本：NPC 名字
- 对齐方式 → Centered
保存 & 关闭
✅ NPCNameText 会在 NPCCharacter 里被赋值，显示 NPC 头顶名字！

4️⃣ 在 C++ 创建 NPC 角色

🔹 1. 创建 NPCCharacter C++ 类

在 UE5，点击文件 → 新建 C++ 类
选择 Character 作为父类
命名为 NPCCharacter
点击创建并等待编译完成

🔹 2. 在 NPCCharacter.h 里添加头顶 UI

#pragma once

#include "CoreMinimal.h"
#include "GameFramework/Character.h"
#include "Components/WidgetComponent.h"
#include "NPCCharacter.generated.h"

UCLASS()
class MYGAME_API ANPCCharacter : public ACharacter
{
    GENERATED_BODY()

public:
    ANPCCharacter();

protected:
    virtual void BeginPlay() override;

public:
    UPROPERTY(VisibleAnywhere, BlueprintReadOnly, Category = "UI")
    UWidgetComponent* NPCNameWidget;
};

🔹 3. 在 NPCCharacter.cpp 里实现 UI

#include "NPCCharacter.h"
#include "Components/WidgetComponent.h"
#include "Blueprint/UserWidget.h"
#include "Components/TextBlock.h"

ANPCCharacter::ANPCCharacter()
{
    NPCNameWidget = CreateDefaultSubobject<UWidgetComponent>(TEXT("NPCNameWidget"));
    NPCNameWidget->SetupAttachment(RootComponent);

    NPCNameWidget->SetWidgetSpace(EWidgetSpace::World);
    NPCNameWidget->SetDrawSize(FVector2D(200, 50));

    static ConstructorHelpers::FClassFinder<UUserWidget> WidgetClass(TEXT("/Game/UI/WBP_NPCName"));
    if (WidgetClass.Succeeded())
    {
        NPCNameWidget->SetWidgetClass(WidgetClass.Class);
    }
}

✅ NPC 现在会在 BeginPlay() 时自动加载 WBP_NPCName UI！

5️⃣ 在 UE5 里添加 NPC

在 Content Browser
- 右键 NPCCharacter → Create Blueprint Class Based on NPCCharacter
- 命名为 BP_NPCCharacter
双击 BP_NPCCharacter
在 Details 里
- 找到 NPCNameWidget
- 确保 Widget Class 设为 WBP_NPCName
保存 & 关闭
在 GameLevel 里拖拽 BP_NPCCharacter

✅ NPC 现在会显示头顶名字 UI！🚀

6️⃣ 让玩家靠近 NPC 时显示交互提示

🔹 1. 在 WBP_NPCName 里添加交互提示

打开 WBP_NPCName
添加 TextBlock，命名 InteractionText
默认 Hidden（不可见）
文本内容：按 E 交互
保存 & 关闭

🔹 2. 修改 NPCCharacter.h

UFUNCTION(BlueprintCallable, Category = "UI")
void ShowInteractionUI(bool bShow);

🔹 3. 修改 NPCCharacter.cpp

void ANPCCharacter::ShowInteractionUI(bool bShow)
{
    if (NPCNameWidget)
    {
        UUserWidget* WidgetInstance = NPCNameWidget->GetUserWidgetObject();
        if (WidgetInstance)
        {
            UTextBlock* InteractionText = Cast<UTextBlock>(WidgetInstance->GetWidgetFromName(TEXT("InteractionText")));
            if (InteractionText)
            {
                InteractionText->SetVisibility(bShow ? ESlateVisibility::Visible : ESlateVisibility::Hidden);
            }
        }
    }
}

✅ 当玩家靠近 NPC 时，NPC 头顶会显示按 E 交互！🚀

🎯 总结

✅ 使用 HUD 在屏幕上绘制信息，显示游戏提示和重要 UI 元素
✅ 创建 UMG 世界 UI，并绑定到 NPC，实现 3D 世界中的 UI 交互
✅ NPC 头顶显示名字，让玩家更直观地识别游戏角色
✅ 玩家靠近 NPC 时，显示按 E 交互提示，增强游戏交互体验
✅ 修正 UWidgetComponent 崩溃问题，确保 UI 组件正确加载

🎮 现在，你的 NPC 角色支持头顶名字 & 交互 UI，HUD 也能正确显示，游戏界面更清晰直观！🚀

查看全文

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