第 17 天：HUD & 世界 UI 显示！

🎯 目标

✅ 理解 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 场景影响。

🎯 本节内容

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

2️⃣ 在 C++ 创建 HUD

🔹 1. 创建 MyHUD C++ 类

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

🔹 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

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

3️⃣ 创建 UMG 世界 UI

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

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

🔹 1. 创建 WBP_NPCName

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

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

🔹 1. 创建 NPCCharacter C++ 类

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

🔹 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

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

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

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

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

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

🔹 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 也能正确显示，游戏界面更清晰直观！🚀