<aside> 📌

• C++과 UMG (Widget Blueprint)를 활용하여 게임 HUD를 설계하고, 점수, 시간 등 실시간 게임 데이터를 UI에 연동하는 방법을 학습합니다.
• 게임 시작과 재시작 같은 게임 흐름에 맞는 메뉴 UI를 구현하고, 로직을 구성해 사용자 경험을 개선합니다.
• UI 애니메이션 효과와 3D 위젯 UI를 설계하여 직관적이고 인터랙티브한 사용자 인터페이스를 구현합니다.
• 파티클 효과와 사운드를 추가하여 시청각적으로 몰입감 있는 게임 연출을 완성합니다. </aside>

<aside> 💡 목차

</aside>

<aside>

1. UMG (User Widget) 위젯 기초 디자인 이해하기

1️⃣ HUD (Heads-Up Dispaly)란?

• HUD는 게임 내에서 플레이어에게 정보를 제공하기 위한 화면을 말합니다. 일반적으로 게임 중 화면의 일부에 배치되며, 플레이어가 현재 게임 상황을 이해하는 데 필요한 체력, 미니맵, 퀘스트 업데이트와 같은 데이터를 제공합니다.
• 언리얼 엔진에서는 다음과 같은 HUD 시스템이 있습니다.
  1. Canvas 기반 HUD:
     • AHUD 클래스를 상속하여 구현
     • 기본적인 2D 그리기 작업(텍스트, 이미지 등) 가능
     • 레거시 방식으로 간주되며, 간단한 HUD에 적합
  2. UMG (Unreal Motion Graphics):
     • 언리얼 엔진의 Widget Blueprint를 이용한 UI 시스템
     • 더 직관적이고 강력한 HUD 디자인 가능
     • 다양한 위젯(Text, Button, Image 등)을 사용하여 HUD를 제작
• 우리는 여기서 UMG 방식을 따르도록 합니다.

2️⃣ **위젯 블루프린트 (**Widget Blueprint)란?

• Widget Blueprint란?

  • 언리얼 엔진에서 UI (User Interface)를 시각적으로 설계할 수 있도록 제공되는 에디터용 블루프린트입니다.
  • 개발자는 이 블루프린트 안에서 Text Block, Button, Image 등 다양한 UI 요소를 드래그 앤 드롭으로 간편하게 배치할 수 있습니다.
  • 이렇게 만든 Widget Blueprint는 게임 화면에 표시되는 UI가 됩니다.

• Widget Blueprint 생성 경로

  • Content Browser에서 Contents 하위에 UI 폴더를 만들고, 그 하위에 또 Widget 폴더를 만듭니다.

  • Widget 폴더에서 우클릭하고 User Interface - Widget Blueprint를 선택하고 부모 클래스로 User Widget을 선택해줍니다. 그리고 WBP_HUD 라는 이름으로 생성합니다.

    

• Widget Blueprint 열기

  • 생성된 위젯을 더블 클릭하면, 오른쪽 상단에 Designer 탭과 Graph 탭이 있는 것을 확인할 수 있습니다.
    • Designer 탭: UI를 배치하는 공간입니다.
    • Graph 탭: 블루프린트 이벤트 그래프(로직)을 작성하는 공간입니다.

3️⃣ UI 요소 (UI Elements)란?

• UI Elements (UI 요소)란?
  • 언리얼 엔진에서 제공하는 다양한 UI 구성 요소를 말합니다. 왼쪽 상단에 보면 Palette 탭이 있으며, 여기에는 다양한 UI 요소들을 제공합니다.
  • 예를 들어, Text Block (텍스트 표시용), Button (버튼), Progress Bar (게이지 표시) 등이 있습니다.
    • Text Block: 캐릭터 체력, Score(점수), Time(남은 시간) 등 텍스트를 보여줄 때
    • Button: “Start Game”, “Quit Game” 등 클릭 이벤트가 필요한 메뉴 버튼
    • Progress Bar: 체력 게이지나 로딩 게이지 등을 시각적으로 표시할 때

4️⃣ 점수, 시간, 레벨 표시를 위한 UI Widget 디자인하기

• Widget Blueprint의 Designer 탭에서 배치

  • 마우스로 드래그 앤 드롭하여 원하는 위치에 배치할 수 있습니다. Details 패널에서 해당 요소의 크기, 색상, 폰트, 정렬 방식 등을 원하는 대로 수정할 수 있습니다.

  • 우선, Palette에서 Panel 중 Canvas Panel을 찾아서 클릭합니다. Canvas Panel은 모든 UI 요소를 포함할 수 있는 “큰 도화지” 같은 역할을 합니다. UI 요소들을 자유롭게 배치할 수 있는 가장 기본적인 레이아웃 패널이기도 합니다.

  • Canvas Panel을 드래그 앤 드랍하여 Designer Tab에 끌어다 놓습니다. 그러면 왼쪽 아래 Hierarchy 탭을 보면 Canvas Panel이 가장 루트로 생성된 것을 확인할 수 있습니다.

    

  • 오른쪽 상단에 보면, Screen Size를 결정할 수 있는 부분이 있는데 여기서 가장 대중적인 화면 크기인 1920 x 1080 (16:9) 사이즈로 설정하기 위해서 21.5-24” monitor를 선택해줍니다.

    

  • 다음으로 Palette에서 Common 리스트 중에서 Text를 선택 → Canvas Panel 위로 드래그 앤 드롭합니다. 각각 하나는 왼쪽과 오른쪽 양 여페 배치합니다. 저는 Size X는 300, Size Y는 100으로 설정하였습니다만, 위치나 크기는 여러분들이 원하는 위치에 놓기를 바랍니다.

    

  • 폰트 스타일은 Details 창에서 수정할 수 있습니다.

    

  • 텍스트는 언제든지 바뀔 수 있도록, 기본 예시로 “Score: 60”, “Level 1”, “Time: 60” 처럼 초기 값을 넣어 두세요. 이후 C++에서 점수나 시간이 바뀔 때마다 실시간 반영할 수 있습니다. 지금은 글씨가 화면상에 출력이 안될 수도 있으니, 일단 이렇게 컴파일하고 저장합니다.

• 원하는 Font 에셋 만들기
  • 우리는 폰트 스타일을 적용하기 위해서는 콘텐츠 폴더에 Font를 import 해야합니다. 미리 .ttf나 .otf 확장자를 가진 폰트 파일을 다운로드 받습니다.
  • Contents - UI - Fonts 폴더를 미리 만들어둡니다.
  • 마우스 우클릭 → Import to ‘/Game/UI/Fonts’를 클릭하면 파일 선택 창에서 .ttf나 .otf 폰트 파일을 선택하면, 언리얼 엔진 내로 임포트가 진행됩니다.
  • 임포트가 완료되면, 콘텐츠 브라우저에 새로운 폰트 에셋이 생깁니다.
  • 이렇게 생성된 Font Asset을 Font Family를 지정할 때 이 에셋을 적용할 수 있습니다. 언리얼엔진에서는 기본적으로 Roboto 폰트 스타일만은 제공합니다. </aside>

<aside>

2. HUD Widget을 생성해 화면에 표시하기

1️⃣ PlayerController에서 HUD 생성 로직 추가하기

• Widget (HUD나 UI 요소)은 보통 PlayerController에서 구현하게 됩니다. 그 이유는 Widget이 플레이어의 입력과 상호작용하며 화면에 표시되는 요소이기 때문입니다.

#pragma once

#include "CoreMinimal.h"
#include "GameFramework/PlayerController.h"
#include "SpartaPlayerController.generated.h"

class UInputMappingContext;
class UInputAction;

UCLASS()
class SPARTAPROJECT_API ASpartaPlayerController : public APlayerController
{
    GENERATED_BODY()

public:
    UPROPERTY(EditAnywhere, BlueprintReadWrite, Category = "Input")
    UInputMappingContext* SpartaInputMappingContext;
    UPROPERTY(EditAnywhere, BlueprintReadWrite, Category = "Input")
    UInputAction* SpartaMoveAction;
    UPROPERTY(EditAnywhere, BlueprintReadWrite, Category = "Input")
    UInputAction* SpartaJumpAction;
    UPROPERTY(EditAnywhere, BlueprintReadWrite, Category = "Input")
    UInputAction* SpartaLookAction;
    UPROPERTY(EditAnywhere, BlueprintReadWrite, Category = "Input")
    UInputAction* SpartaSprintAction;
    UPROPERTY(EditAnywhere, BlueprintReadWrite, Category = "Input")
    UInputAction* SpartaPickUpAction;

    // UMG 위젯 클래스를 에디터에서 할당받을 변수
    **UPROPERTY(EditAnywhere, BlueprintReadWrite, Category = "UI")
    TSubclassOf<UUserWidget> HUDWidgetClass;**

protected:
    virtual void BeginPlay() override;
};

#include "SpartaPlayerController.h"
#include "EnhancedInputSubsystems.h"
#include "EnhancedInputComponent.h"
**#include "Blueprint/UserWidget.h"** // 헤더 추가

ASpartaPlayerController::ASpartaPlayerController()
	: InputMappingContext(nullptr),
	  MoveAction(nullptr),
	  JumpAction(nullptr),
	  LookAction(nullptr),
	  SprintAction(nullptr)
{
}

void ASpartaPlayerController::BeginPlay()
{
		Super::BeginPlay();
	
		if (ULocalPlayer* LocalPlayer = GetLocalPlayer())
		{
			if (UEnhancedInputLocalPlayerSubsystem* Subsystem =
				LocalPlayer->GetSubsystem<UEnhancedInputLocalPlayerSubsystem>())
			{
				if (InputMappingContext)
				{
					Subsystem->AddMappingContext(InputMappingContext, 0);
				}
			}
		}

    // HUD 위젯 생성 및 표시
    **if (HUDWidgetClass)
    {
        UUserWidget* HUDWidget = CreateWidget<UUserWidget>(this, HUDWidgetClass);
        if (HUDWidget)
        {
            HUDWidget->AddToViewport();
        }
    }**
}

• SpartaPlayerController에 HUD Widget 표시 로직을 넣어줍니다. 우선 ASpartaPlayerController.h에 TSubclassOf<UUserWidget> 변수를 선언해 둡니다.
• partaPlayerController.cpp의 BeginPlay()에, EnhancedInput 설정 직후 HUD 생성 로직을 이어서 작성합니다.

using UnrealBuildTool;

public class SpartaProject : ModuleRules
{
	public SpartaProject(ReadOnlyTargetRules Target) : base(Target)
	{
		PCHUsage = PCHUsageMode.UseExplicitOrSharedPCHs;
	
		PublicDependencyModuleNames.AddRange(
			new string[] { 
				"Core", 
				"CoreUObject", 
				"Engine", 
				"InputCore", 
				"EnhancedInput",
        "UMG" // UMG 모듈 추가
			}
		);

		PrivateDependencyModuleNames.AddRange(new string[] {  });
	}
}

• 이 코드를 빌드하려면, CreateWidget이 작동하려면 UMG 모듈이 빌드 설정에 추가되어 있어야 합니다. SpartaProject.Build.cs 라는 코드를 열어줍니다. 그리고 아래와 같이 “UMG” 모듈을 추가해봅니다.

2️⃣ HUD Widget 테스트하기

• 빌드하고 언리얼 에디터 상에서 HUDWidgetClass에는 우리가 생성한 Widget Bluprint인 WBP_HUD를 할당해야 합니다. 게임 실행 전에 BP_SpartaPlayerController의 디폴트 블루프린트 혹은 게임 모드 설정에서 HUDWidgetClass에 WBP_HUD를 지정해주세요.

  

• 뷰포트 크기 설정

  • 에디터 상단의 Play 드롭다운 메뉴를 클릭하고 Advanced Settings를 선택합니다.

    

  • 게임 뷰포트 세팅을 HUD와 동일하게 1920x1080 사이즈로 수정해줍니다.

    

  • Play 드롭다운 메뉴에서 Selected Viewport 대신 New Editor Window를 선택합니다. 이 옵션은 플레이 중에 새 창에서 지정된 크기로 뷰포트를 띄웁니다.

• 플레이를 눌러보면 다음과 같이 우리가 만든 UI가 보이는 것을 확인할 수 있습니다. </aside>

<aside>

</aside>

<aside>

</aside>

Copyright ⓒ TeamSparta All rights reserved.