1. Epic GamesDeveloper
  3. 플레이어 HUD

플레이어 HUD

플레이어가 아이템을 주우면 업데이트되는 단순한 헤드업 디스플레이(HUD)를 만들어 봅니다.

플레이어 HUD

게임의 유저 인터페이스(User Interface, UI)는 메뉴, 일시정지 화면, 인벤토리, 대화 상자, 플레이어의 헤드업 디스플레이(Heads-Up Display, HUD) 등 플레이어가 시각적으로 상호작용하는 모든 것을 말합니다. HUD는 플레이어의 체력, 장비, 목표 표시기 등 게임플레이 중에 화면에 계속 표시되는 UI의 일부입니다.

이제 캐릭터가 아이템을 주울 수 있으므로 언리얼 엔진의 UMG(Unreal Motion Graphics) 시스템을 사용하여 플레이어가 주운 키를 보여주는 HUD를 제작하는 방법을 알아보겠습니다. UMG를 사용하면 비주얼 에디터에서 UI 엘리먼트를 드래그하고 배열하여 HUD를 디자인할 수 있으므로 플레이어가 게임에서 무엇을 보게 될지 정확히 알 수 있습니다.

시작하기 전에

퍼즐 어드벤처 디자인하기의 이전 섹션에서 다룬 다음 주제를 이해하고 있어야 합니다.

  • 변수, 함수, 이벤트 그래프, 노드 추가 등 블루프린트의 기초

키 만들기의 다음 에셋이 필요합니다.

  • BP_Key 블루프린트 클래스

  • BP_AdventureCharacter 블루프린트 클래스

  • Enum_KeyType 열거형

위젯 블루프린트 생성

UMG에는 다양한 UI 엘리먼트를 제작하는 데 사용할 위젯이라는 특수한 타입의 블루프린트가 포함되어 있습니다. HUD 제작을 시작하려면 새 위젯 블루프린트(Widget Blueprint) 에셋을 생성합니다. 

새 위젯 블루프린트를 생성하려면 다음 단계를 따릅니다.

  1. 콘텐츠 브라우저(Content Browser)에서 콘텐츠(Content) > AdventureGame > Designer > Blueprints로 이동하여 UI 에셋을 저장할 Widgets 폴더를 생성합니다.

  2. 새 Widgets 폴더에서 빈 영역을 우클릭하고 유저 인터페이스(User Interface) > 위젯 블루프린트를 선택하여 새 에셋을 생성합니다.

  3. 부모 클래스 선택(Pick Parent Class) 창에서 사용자 위젯(User Widget)을 클릭합니다.

  4. 위젯의 이름을 입력합니다. 이 튜토리얼에서는 WBP_PlayerHUD를 사용합니다.

  5. 블루프린트를 더블클릭하여 엽니다.

위젯 블루프린트 에디터 살펴보기

위젯 블루프린트는 디자이너(Designer)와 그래프(Graph) 두 가지 모드가 있는 특수 위젯 에디터에서 열립니다. 모드를 전환하려면 에디터 오른쪽 상단에 있는 버튼을 사용합니다. 

디자이너 모드에서는 UI의 개별 부분을 추가하고 편집할 수 있습니다. 

위젯 에디터 좌측의 팔레트(Palette)에는 UI에 추가할 수 있는 다양한 위젯 타입이 모두 포함되어 있습니다. 계층구조(Hierarchy) 패널은 UI 컴포넌트의 구조를 보여줍니다. 이 패널에서 위젯의 순서와 중첩은 UI의 레이아웃과 렌더링에 영향을 줍니다.

창 중앙의 그리드는 비주얼 디자이너입니다. 블루프린트 이벤트 그래프에서와 마찬가지로 마우스 휠을 사용하여 줌 인 및 줌 아웃하고, 오른쪽 마우스 버튼으로 디자인을 패닝할 수 있습니다.

줌 인 또는 줌 아웃에 따라 그리드 왼쪽 상단의 줌 레벨이 업데이트됩니다. 줌 1:1(Zoom 1:1)은 UI를 100% 스케일로 보는 것을 의미하며, 해당 해상도의 화면에서 UI 엘리먼트가 게임 내에서 어떻게 표시되는지 보여줍니다. 플레이어가 작은 화면에서 게임을 실행하는 경우, 언리얼 엔진은 DPI 스케일(DPI Scale)을 사용하여 해당 화면에 맞게 UI를 스케일 조절합니다.

그리드의 좌측 하단에는 현재 화면 크기 프리셋에 대한 정보가 포함되어 있습니다. 위젯 블루프린트가 프리뷰하는 화면 크기입니다. 기본적으로 720p TV 화면으로 설정되어 있습니다.

캔버스 패널로 시작하기

팔레트 탭에서 위젯은 타입별로 정렬되어 있습니다. 패널(Panel) 타입 위젯은 화면에 아무것도 표시하지 않습니다. 이 위젯은 그 안에 배치된 위젯의 레이아웃과 위치를 제어하는 컨테이너와 같습니다. 패널은 다양한 TV 화면 크기와 모니터 해상도에 맞게 UI를 자동으로 스케일 조절하는 데 유용합니다.

캔버스(Canvas) 패널은 가장 유연한 패널 위젯 타입으로, HUD에 적합합니다. 다른 패널은 위젯을 특정 레이아웃이나 방향으로 정렬하지만, 캔버스 패널은 앵커를 사용하여 위젯을 화면의 원하는 위치에 정확하게 배치하므로 화면 크기가 변경되더라도 모든 것이 제자리에 유지됩니다.

캔버스 패널을 생성하려면 다음 단계를 따릅니다.

  1. 팔레트 탭에서 캔버스(Canvas)를 검색하고 캔버스 패널을 [WBP_PlayerHUD] 상단의 계층구조 패널로 드래그하여 아래에 중첩되도록 합니다.

    창 중앙의 비주얼 디자이너 영역에 사각형이 나타납니다.

이 캔버스는 UI의 루트 위젯입니다. 모든 위젯 블루프린트에는 다른 모든 위젯을 포함하는 최상위 UI 엘리먼트인 하나의 루트 위젯이 있어야 합니다. 캔버스 안에 다른 위젯을 배치하면 캔버스가 부모이고 다른 위젯이 자손인 두 위젯 사이에 계층구조 관계가 형성됩니다.

기본적으로 캔버스 패널은 1920x1080 픽셀이며 전체 화면을 나타냅니다. 이는 일반적인 해상도로, 작업하기에 좋은 시작점이 되어 주므로 이 캔버스 크기를 유지하세요. 런타임에서 언리얼 엔진은 플레이어의 화면에 맞게 UI의 스케일을 조절합니다.

HUD 레이아웃 제작

이제 캔버스가 생겼으니 UI의 왼쪽 상단에 플레이어 체력 및 인벤토리 영역을 고정합니다. 

사람은 화면을 볼 때 왼쪽 상단을 먼저 보는 경향이 있으므로 플레이어 체력과 같은 중요한 정보를 얻기에는 가장 좋은 위치입니다.

캔버스에서 텍스트 영역을 정의하려면 다음 단계를 따릅니다.

  1. 팔레트에서 오버레이(Overlay)를 검색하고 오버레이 패널을 계층구조로 드래그하여 캔버스 패널 아래 자손 위젯으로 중첩되도록 합니다.

    오버레이는 동일한 공간에서 여러 위젯을 서로 레이어링하는 패널 타입입니다. UI 엘리먼트 뒤에 배경 이미지를 추가하거나 UI 엘리먼트 위에 스태틱 아이콘이나 텍스트 라벨을 추가하는 데 유용합니다. 이 HUD의 경우, 가독성을 높이기 위해 UI 텍스트 뒤에 블러 이펙트를 레이어링합니다.

  2. 새 오버레이를 선택합니다. 이 패널은 캔버스의 자손이므로 캔버스의 왼쪽 상단에 앵커 포인트가 생깁니다.

    이 튜토리얼에서는 앵커 포인트를 그대로 두지만, 디테일 패널에서 앵커(Anchors) 프로퍼티를 사용하여 앵커 포인트를 이동할 수 있습니다.

  3. 디테일(Details) 패널에서 X 위치(Position X)와 Y 위치(Position Y)를 20으로 설정합니다. 오버레이 패널이 앵커에서 떨어진 위치에 배치되는 픽셀 수입니다. 오프셋을 추가하면 UI의 룩이 향상되고 텍스트가 화면 가장자리에서 잘리는 것을 방지할 수 있습니다.

  4. UI 텍스트를 그릴 영역을 정의하려면 오버레이 패널의 바운딩 박스에 있는 핸들을 드래그하여 너비가 약 250픽셀, 높이가 200픽셀이 될 때까지 크기를 조절합니다.

    또는 디테일 패널에서 X 크기(Size X) 및 Y 크기(Size Y)를 사용하여 패널 크기를 조정합니다.

    이 영역에는 플레이어의 체력(HP)과 수집한 키 이름이 표시됩니다.

  5. 팔레트에서 세로 박스(Vertical Box) 패널을 검색하고 오버레이 아래로 드래그하여 자손이 되도록 합니다. 이 패널 타입은 테이블의 열처럼 패널 안의 UI 엘리먼트를 세로로 배열합니다.

  6. 두 개의 가로 박스(Horizontal Box) 패널을 세로 박스의 자손으로 추가합니다. 가로 박스는 그 안의 모든 UI 엘리먼트를 테이블 행처럼 가로로 배열합니다. 한 가로 박스는 플레이어의 체력 정보를 위한 컨테이너이며, 다른 가로 박스는 Keys Collected 라벨을 위한 컨테이너입니다.

세로 및 가로 박스는 레이아웃 위젯입니다. 이러한 패널은 보이지 않는 오거나이저와 같습니다. 디자이너에 보이는 프레임이 없으며, 콘텐츠에 맞게 자동으로 크기가 조정됩니다.

각 박스 타입은 UI에 추가할 텍스트를 정렬하고 정리합니다.

  • 오버레이 패널은 오버랩을 활성화하므로 세로 박스는 가로 박스가 서로 겹치지 않고 세로로 정렬되도록 합니다.

  • 첫 번째 행에는 두 개의 텍스트 박스가 있으므로 가로 박스를 추가하여 행에 있는 각 텍스트 박스의 정렬과 간격을 제어할 수 있습니다.

텍스트 라벨 추가

HUD의 구조를 정의했으니, 이제 게임 내 상황에 따라 변경되지 않는 스태틱 텍스트를 추가할 수 있습니다. 

플레이어의 체력 앞에는 HP 라벨이, 키 이름 목록 앞에는 Keys Collected 라벨이 필요합니다. 여기서는 플레이어의 현재 HP 값에 대한 자리표시자 텍스트도 추가합니다. 이 튜토리얼 시리즈의 후반부에서는 이 자리표시자를 변수로 변경하여 플레이어의 실제 체력을 반영할 것입니다.

플레이어의 체력(HP)에 텍스트 라벨을 추가하려면 다음 단계를 따릅니다.

  1. 팔레트에서 텍스트(text)를 검색하고 두 개의 텍스트 위젯을 계층구조 에 첫 번째 가로 박스의 자손으로 드래그합니다. 

    텍스트 박스(Text Box)가 아닌 텍스트(Text) 위젯을 추가해야 합니다.

  2. 가로 박스 아래의 첫 번째 텍스트 위젯을 선택합니다. 디테일 패널의 슬롯(가로 박스 슬롯)(Slot (Horizontal Box Slot)) 섹션에서 패딩(Padding)을 5로 설정합니다. 이렇게 하면 텍스트가 가로 박스 가장자리에서 5픽셀 떨어진 곳에 위치합니다.

  3. 콘텐츠(Content) 섹션에서 텍스트를 HP :로 설정합니다.

  4. 외형(Appearance) 섹션에서 컬러 및 오파시티(Color and Opacity) 옆의 컬러 스와치를 클릭하고 텍스트의 컬러를 선택합니다. 이 튜토리얼에서는 녹색(Hex sRGB = 78FF3FFF)을 사용합니다.

  5. 두 번째 텍스트 위젯을 선택합니다. 디테일 패널 상단에서 위젯의 이름을 TextBlock에서 txtHP로 변경합니다. 이 튜토리얼의 이후 파트에서 이 위젯을 참조해야 하므로 고유하고 설명이 포함된 변수 이름을 지정합니다.

  6. 패딩을 5 로, 텍스트를 100으로 변경합니다.

플레이어가 수집한 키에 텍스트 라벨을 추가하려면 다음 단계를 따릅니다.

  1. 팔레트에서 텍스트 위젯을 드래그하여 두 번째 가로 박스의 자손이 되도록 합니다.

  2. 패딩을 5로, 텍스트를 Keys Collected :로 변경합니다.

  3. 컬러 및 오파시티에서 컬러를 선택합니다. 이 튜토리얼에서는 주황색(Hex sRGB = FF6200FF)을 사용합니다.

이제 각 가로 박스에 텍스트가 생겼으니 이 레이아웃의 유연한 구조를 볼 수 있습니다. 가로 박스 또는 텍스트 위젯을 선택하면 해당 위젯의 가장자리에 화살표 버튼이 표시됩니다. 화살표를 클릭하여 위젯을 재구성합니다. 각 텍스트 위젯의 정렬 및 패딩 옵션을 사용하면 같은 행과 다른 행의 엘리먼트 간 간격을 다양하게 제어할 수 있습니다.

변수를 위한 공간 추가

게임에서 대부분의 플레이어 HUD는 대미지를 입거나, 아이템을 받아 사용하거나, 파워업하는 등 플레이어가 취하는 액션으로 인해 게임플레이 중에 업데이트되어야 합니다. 프로젝트에서 이를 수행하려면 플레이어의 키를 트래킹하는 변수에 HUD를 연결하여 플레이어가 키를 수집함에 따라 업데이트할 수 있도록 합니다.

키 목록을 표시하기 위한 입력 텍스트 박스를 추가하려면 다음 단계를 따릅니다.

  1. 팔레트에서 텍스트 박스(여러 줄)(Text Box (Multi-Line))를 검색 및 드래그하여 세로 박스의 마지막 자손이 되도록 합니다. 이 입력 위젯은 사용자가 입력한 여러 줄의 텍스트를 사용합니다. 하지만 사용자가 키를 수집할 때 이벤트 그래프 로직을 사용하여 이 위젯에 텍스트를 추가할 수 있습니다.

  2. 계층구조에서 텍스트 박스를 선택합니다. 디테일 패널에서 이름을 txtKeys로 변경합니다.

    계층구조에서 위젯을 우클릭하여 위젯의 이름을 확인하고 변경할 수도 있습니다.

  3. 비주얼 디자이너에서 입력 텍스트 박스가 디폴트 배경과 함께 제공되는 것을 볼 수 있으므로 제거합니다.

    1. 디테일 패널 상단에서 패딩을 펼치고 다음 값을 설정하여 텍스트 박스에 들여쓰기를 채웁니다.

      • 왼쪽(Left): 15

      • 상단(Top), 오른쪽(Right), 하단(Bottom): 4

    2. 스타일(Style) 섹션에서 스타일 > 배경 이미지 노멀(Background Image Normal)을 펼치고 색조(Tint) 옆의 컬러 스와치를 클릭합니다.

    3. Hex sRGB를 FFFFFF00으로 변경하여 배경을 투명하게 만든 다음, 확인을 클릭합니다.

  4. 이 위젯은 디폴트 폰트 스타일을 제공하지 않으므로 폰트 프로퍼티를 직접 설정해야 합니다. 스타일 섹션에서 텍스트 스타일(Text Style) > 폰트(Font)를 펼치고 다음과 같이 설정합니다.

    1. 폰트 패밀리(Font Family)를 Roboto로 변경합니다.

    2. 타입페이스(Typeface)를 Bold로 변경합니다.

    3. 크기(Size)를 24로 변경합니다.

    4. 컬러(Color)를 흰색으로 변경합니다.

txtKeys를 선택한 상태에서 디테일 패널 상단에 변수 여부(Is Variable)가 활성화된 것을 볼 수 있습니다. 텍스트 박스는 사용자가 입력한 텍스트를 예상하므로 자동으로 변수로 구성됩니다. 변수 여부를 활성화하면 위젯 블루프린트의 이벤트 그래프에서 txtKeys를 참조하고 사용할 수 있습니다. 

특수 이펙트의 레이어

오버레이 바운딩 박스의 배경을 블러 처리하여 HUD 텍스트를 읽기 쉽게 만들 수 있습니다. 오버레이 패널의 레이어링 기능을 사용하여 세로 및 가로 박스 뒤에 블러 이펙트를 적용합니다.

위젯을 사용하여 HUD 텍스트 뒤의 화면 영역을 블러 처리하려면 다음 단계를 따릅니다.

  1. 팔레트에서 블러(blur)를 검색하고 배경 블러(Background Blur) 위젯을 계층구조에 오버레이의 자손으로 드래그합니다.

  2. 배경 블러는 목록 하단에 추가되므로, 이를 오버레이 아래의 세로 박스 위 첫 번째 자손이 되도록 드래그합니다.

  3. 디테일 패널의 외형 섹션에서 블러 강도(Blur Strength)를 2로 설정합니다.

    큰 블러 이펙트를 사용하면 GPU의 런타임 비용이 높아집니다. 비용이 낮은 대안으로 불투명 보더(Border) 위젯을 사용하거나 이미지(Image) 위젯으로 텍스처를 적용할 수도 있습니다.  

  4. 이펙트가 오버레이 위젯의 치수를 채우도록 합니다.

    1. 슬롯(오버레이 슬롯)(Slot (Overlay Slot)) 섹션에서 가로 정렬(Horizontal Alignment) 옆의 가로로 채우기(Fill Horizontally)를 클릭합니다.

    2. 세로 정렬(Vertical Alignment) 옆의 세로로 채우기(Fill Vertically)를 선택합니다.

다음은 블러 처리된 배경이 없는 UI 텍스트와 과장된 블러 이펙트가 적용된 UI 텍스트의 예시입니다.

HUD 로직 빌드

위젯 블루프린트를 완성하기 위해 플레이어가 줍는 모든 키의 이름을 표시하는 로직을 빌드해 보겠습니다. 

키 줍기를 위한 기본 요소 구성

HUD에 키 이름을 추가하는 로직을 빌드하기 전에 다음 항목이 필요합니다.

  • 플레이어의 키를 트래킹하는 배열 변수

  • 플레이어가 새 키를 찾았을 때 캐릭터의 블루프린트가 호출할 수 있는 함수

다른 블루프린트에서 HUD 로직의 실행을 트리거하기 위해 이벤트 그래프 대신 함수를 사용합니다. 이 함수는 플레이어가 수집한 키를 가져와서 네임드 변수에 저장하고, 해당 변수의 키 이름을 txtKeys 박스에 입력합니다.

플레이어의 키를 트래킹하는 새 변수와 함수를 추가하려면 다음 단계를 따릅니다.

  1. 창 오른쪽 상단에서 그래프를 클릭하여 위젯 블루프린트의 이벤트 그래프를 편집합니다. 이 그래프는 지금까지 작업한 다른 블루프린트와 동일하게 기능합니다.

    txtKeys 변수는 창의 좌측 패널에 나와 있습니다.

  2. 호출 시 모든 HUD 로직을 실행하는 함수를 생성합니다.

    1. 함수(Functions) 섹션에서 더하기(+) 버튼을 클릭하여 함수를 추가합니다. 해당 함수에 대한 새 탭이 그래프 위에 표시됩니다.

    2. 함수를 fnAddKeyHUD로 명명합니다.

    3. 함수를 선택한 상태로 디테일 패널의 입력(Inputs) 섹션에서 +를 클릭하여 새 함수 입력을 추가합니다.

    4. 입력을 KeyType으로 명명하고 타입을 Enum Key Type으로 변경합니다.

  3. 내 블루프린트(My Blueprint) 패널에서 플레이어의 키를 저장할 배열 변수를 생성합니다.

    1. 변수(Variables) 섹션에서 +를 클릭하여 새 변수를 생성합니다.

    2. 변수를 KeysToDisplay로 명명합니다.

    3. 타입을 Enum Key Type으로 변경합니다. 이는 빨간색, 노란색, 파란색 키 타입 옵션으로 만든 열거형입니다.

    4. 변수 타입을 우클릭하여 배열로 바꿉니다. 또는 디테일 패널을 사용하여 컨테이너 타입을 변경할 수도 있습니다.

      여기서 리빌드하는 대신 캐릭터 블루프린트의 키 배열을 함수에 전달할 수도 있지만, 각 키의 이미지를 표시하는 등 HUD 전용 로직을 수행하려는 경우 HUD에서 키를 독립적으로 트래킹하면 더 유연하게 작업할 수 있습니다.

  4. 여러 줄 텍스트 박스에 키 이름을 출력하려면, 키 이름을 모두 스트링으로 결합해야 합니다.

    로컬 변수(Local Variables) 섹션에서 + 버튼을 클릭하여 새 변수를 추가합니다. 변수를 Keys로 명명하고 타입을 스트링(String)으로, 컨테이너 타입을 단일(Single)로 변경합니다.

화면에 플레이어의 키 출력

이제 fnAddKeyHUD 함수에 로직을 추가할 수 있습니다. 

이 함수가 호출되면 빨간색, 노란색 또는 파란색 KeyType으로 시작됩니다. 해당 키 타입을 KeysToDisplay 배열에 추가하고, 모든 키를 스트링 변수에 추가한 다음, 화면에 표시할 수 있도록 해당 스트링을 텍스트로 변환해야 합니다.

먼저 KeysToDisplay 배열을 빌드하려면 다음 단계를 따릅니다.

  1. 위젯 블루프린트의 그래프 뷰에서 fnAddKeyHUD 탭으로 이동합니다.

  2. KeysToDisplay 배열을 빌드하려면 함수 엔트리 노드 뒤에 Add Unique 노드를 추가합니다.

  3. Target Array의 경우, 레퍼런스를 KeysToDisplay 변수에 연결합니다.

  4. 두 번째 입력의 경우, Key Type 함수 입력을 연결합니다.

    Add Unique 노드는 배열과 새 값을 가져와 해당 값을 배열에 추가합니다(아직 배열에 없는 경우). 이 노드는 키 이름이 HUD에 두 번 이상 표시되지 않도록 합니다.

수집된 모든 키를 키 스트링으로 결합하려면 다음 단계를 따릅니다.

  1. KeysToDisplay 배열의 각 항목을 반복합니다. Add Unique 노드 뒤에 For Each Loop 노드를 추가합니다.

  2. 또 하나의 KeysToDisplay 레퍼런스를 루프의 Array 입력에 연결합니다.

    배열의 각 항목(또는 엘리먼트) 또는 루프의 각 반복작업에 대해 해당 엘리먼트를 스트링으로 변환하고 Keys 스트링 변수에 추가한 다음, 해당 키 이름 뒤에 새 줄을 추가해야 합니다(예: 키보드의 Enter를 누름). 

    Loop Body 실행 핀에 연결하는 모든 로직은 배열 항목당 한 번 실행됩니다. 루프가 완료되면 실행은 Completed 핀을 통해 전달됩니다.

  3. 노드 그래프에서 우클릭하고 Append String을 검색하여 스트링 타입의 Append 노드를 추가합니다. 이는 스트링 입력을 함께 결합하여 단일 스트링 반환 값을 형성합니다.

  4. Append 노드가 Keys 변수의 현재 콘텐츠를 가져오도록 구성하고 새 배열 엘리먼트를 추가한 다음, 줄바꿈을 추가합니다.

    1. A 입력의 경우, 레퍼런스를 Keys에 연결합니다.

    2. B 입력의 경우, 루프 노드의 Array Element 핀을 연결합니다. 언리얼 엔진이 값을 변환하기 위해 Enum to String 노드를 추가합니다.

    3. 핀 추가(Add pin)를 클릭하여 C 입력을 추가합니다. 텍스트 박스를 클릭하고 Shift + Enter를 눌러 새 줄을 추가합니다.

  5. Append 노드의 Return Value 핀에서 드래그하여 Set Keys 노드를 추가합니다.

  6. 루프의 실행 출력 핀을 Set Keys 노드에 연결합니다.

루프 바디가 완료되면 모든 플레이어 키의 이름이 포함된 하나의 긴 스트링이 생성됩니다.

Keys 스트링을 HUD의 TxtKeys 텍스트 박스에 전달하려면 다음 단계를 따릅니다.

  1. 루프의 Completed 실행 핀에서 드래그하여 SetText (Multi-Line Text Box) 노드를 추가합니다.

    이 노드를 찾을 수 없는 경우, 노드 액션 목록의 오른쪽 상단에 있는 컨텍스트에 따라(Context Sensitive)를 비활성화합니다. 

    SetText 노드는 텍스트 타입 입력을 받아 타깃 텍스트 박스에 표시합니다.

  2. SetText (Multi-Line Text Box) 노드를 구성합니다.

    1. Target의 경우, 레퍼런스를 TxtKeys에 연결합니다.

    2. In Text의 경우, 레퍼런스를 Keys에 연결하면 언리얼 엔진에서 Keys 스트링을 텍스트로 변환하는 To Text (String) 노드가 추가됩니다. 

      텍스트는 별도의 데이터 타입입니다. 스트링은 프로그래밍과 디버깅을 위한 것이지만, 텍스트는 사용자 대상 텍스트용으로 디자인되었으며 번역과 포맷 지정을 지원합니다.

  3. 블루프린트를 컴파일(Compile)하고 저장합니다.

완성된 fnAddKeyHUD 함수는 다음과 같습니다.

Blueprint

이 스니펫을 프로젝트에 복사하는 경우, 함수 엔트리 노드의 핀을 Add Unique 노드에 연결해야 합니다.

HUD를 사용할 준비가 되었습니다! 이제 게임을 시작할 때 HUD가 화면에 표시되도록 플레이어 캐릭터에 추가해야 합니다.

플레이어 캐릭터 업데이트

HUD 구성을 마치려면 게임 시작 시 HUD 위젯을 추가하고 플레이어가 키를 주우면 업데이트하는 로직을 캐릭터 블루프린트에 추가해야 합니다. 

캐릭터 블루프린트에서 FnAddKeyHUD 호출

BP_AdventureCharacter의 키 로직을 HUD의 로직에 연결하여 플레이어에게 키를 추가하면 HUD에도 키가 추가되도록 합니다. 

플레이어가 키를 얻었을 때 HUD를 트리거하려면 다음 단계를 따릅니다.

  1. BP_AdventureCharacter 블루프린트를 엽니다. 내 블루프린트 패널의 변수 섹션에서 +를 클릭하여 새 변수를 추가합니다.

  2. 변수를 HUD로 명명하고 타입을 WBP Player HUD(오브젝트 레퍼런스(Object Reference))로 변경합니다. 

    그러면 캐릭터의 이벤트 그래프에 생성할 HUD 위젯이 저장됩니다.

  3. 이벤트 fnBPIAddKey가 플레이어의 HeldKeys 배열에 새 키를 추가하는 이벤트 그래프 섹션으로 이동합니다.

    내 블루프린트 패널의 그래프(Graphs) 섹션에서 EventGraph를 펼치고 이벤트를 더블클릭하여 그래프의 해당 영역으로 이동합니다.

  4. Add 노드 뒤에 FnAddKeyHUD 노드를 연결합니다.

  5. FnAddKeyHUD 노드를 구성합니다.

    1. Target의 경우, 레퍼런스를 HUD 변수에 연결합니다.

    2. Key Type의 경우, 핀을 Event fnBPIAddKey 노드의 Key Type 핀에 연결합니다.

    이제 플레이어의 새 키를 가져와 HUD 위젯 블루프린트에서 FnAddKeyHUD 함수를 호출합니다.

  6. 블루프린트를 저장하고 컴파일합니다.

게임 시작 시 HUD 표시

레벨에서 플레이어가 스폰될 때 HUD를 생성하려면 다음 단계를 따릅니다.

  1. 캐릭터의 이벤트 그래프에서 빈 공간을 찾아 Event Possessed 노드를 추가합니다. 플레이어가 플레이어 캐릭터를 제어하거나 빙의할 때 브로드캐스트되는 이벤트입니다.

  2. Event Possessed 노드를 우클릭하고 부모 함수에 호출 추가(Add Call To Parent Function)를 선택하여 부모 캐릭터 클래스의 Event Possessed 로직이 계속 실행되도록 합니다. 각 노드의 실행 핀과 New Controller 핀을 연결합니다.

    캐릭터 블루프린트의 오른쪽 상단에서 BP_FirstPersonCharacter 블루프린트 클래스에서 파생된 것을 볼 수 있습니다. 즉, 캐릭터가 자신과 부모의 로직을 사용합니다. 부모에 이미 존재하는 캐릭터 블루프린트에 이벤트를 추가하는 경우 이를 오버라이드하게 됩니다. 이벤트를 오버라이드할 때는 부모의 버전도 호출하여 자체 버전을 추가하기 전에 해당 로직이 실행되도록 해야 합니다.

  3. HUD를 생성하려면 Create Widget 노드를 연결하고 Class를 WBP Player HUD로 변경합니다. 그러면 위젯 블루프린트의 인스턴스가 생성됩니다.

  4. Create Widget 노드 뒤에 Set HUD 노드를 추가하여 두 핀을 연결합니다. 그러면 새 위젯 블루프린트가 변수에 저장됩니다.

  5. 화면에 HUD 오브젝트를 표시하려면 Add to Viewport 노드를 추가합니다. Target을 HUD 변수로 설정합니다.

    Create Widget 노드를 Add to Viewport 노드에 직접 연결할 수도 있지만, 이 튜토리얼에서는 위젯을 생성하는 것과 화면에 그리는 것을 분리합니다. 플레이어가 여러 번 착지한 후에 표시되는 콤보 알림처럼 위젯을 준비하되 특정 순간까지 숨기려는 경우에 유용합니다. 위젯에 애니메이션, 이펙트, 사운드가 많은 경우, 게임플레이 랙을 방지하기 위해 미리 로드하는 것이 좋을 수 있습니다.

  6. 컴파일하고 저장합니다.

새 캐릭터 블루프린트 로직은 다음과 같습니다.

Blueprint

HUD 테스트 

플레이를 클릭하여 게임을 테스트합니다. 게임이 시작되면 플레이어의 HP 및 Keys Collected 라벨이 HUD에 표시됩니다. 키를 터치하면 해당 키의 이름이 HUD에 추가됩니다.

원하는 경우 HUD를 조정합니다. 직접 시도해 볼 수 있는 방법은 다음과 같습니다. 

  • 오버레이 패널의 크기 조정

  • 폰트 크기 및 스타일 변경

  • 배치를 왼쪽 상단이 아닌 다른 영역으로 이동

  • 텍스처나 머티리얼 등 배경에 다양한 위젯 추가

HUD의 수준을 높이려면 텍스트 라벨을 아이콘으로 대체하는 실험을 해 보세요. 이렇게 하려면 이미지를 콘텐츠 브라우저로 임포트하고 이미지 위젯을 사용하여 HUD에 추가합니다. 언리얼 에디터로 에셋을 임포트하는 방법에 대한 자세한 내용은 에셋을 직접 임포트하기를 참고하세요.

효과적인 HUD 디자인하기 

다음은 깔끔하고 플레이어 친화적인 HUD를 만들기 위한 몇 가지 디자인 전략입니다.  

읽기 쉽게 만들기:

고대비 텍스트, 깔끔한 폰트, 적절한 폰트 크기를 사용하세요. 플레이어가 가만히 서 있을 때뿐만 아니라 바쁜 환경에서 움직일 때도 화면으로부터 일반적인 시야 거리에서 HUD를 읽을 수 있어야 합니다.

명확성과 간결성 유지:

플레이어에게 지금 바로 필요한 정보만 표시하고, 연관성이 적은 정보는 필요할 때까지 숨기거나 최소화하세요. 하지만 플레이어가 자신 있게 결정을 내릴 수 있도록 필요한 것이 무엇인지 한눈에 확인할 수 있어야 합니다. 

피드백 추가:

HUD가 업데이트되면(예: 키 줍기) 짧은 애니메이션, 컬러 변화 또는 사운드를 사용하여 플레이어가 변경 사항을 알 수 있도록 합니다.

크기 및 위치 우선순위 지정:

중요한 정보는 눈에 잘 띄어야 합니다. 더 큰 텍스트, 짙은 컬러를 사용하거나 플레이어가 자연스럽게 먼저 눈길이 가는 왼쪽 상단이나 중앙 근처에 정보를 배치하세요. 

다음 단계

다음 섹션에서는 레벨에 게임플레이 엘리먼트를 계속 추가하고 스위치를 누르면 액션을 수행하도록 프로그래밍하는 방법을 알아봅니다.

Ask questions and help your peers Developer Forums

Write your own tutorials or read those from others Learning Library

On this page
Related documents