UE4 - Creating a RPG #2 - Health & Mana Setup

Today's Lesson: Health & Mana Setup

Summary

1. We take a look at how we can set up the health and mana variables to use later on in the series.

2. We also create UI bars for both the health & mana and get them displayed on the screen.

Virtus Learning Hub

---

✅ Game HUD Reference(ELDEN RING)

◼️ 추출 헥스 코드#RRGGBB

• Health: #730002
• Mana: #235D73

HUD, UI 정의와 차이점

1. 정의

• HEAD UP DISPLAY (HUD): HUD는 게임 화면에 실시간으로 표시되는 정보. 주로 플레이어의 현재 상태, 예를 들어 체력, 마나, 탄약 수, 미니맵, 퀘스트 목표 등을 시각적으로 제공하여 플레이어가 게임 상황을 빠르게 파악할 수 있도록 돕는다
• USER INTERFACE (UI): UI는 게임과 플레이어 간의 상호작용을 위한 전체적인 디자인 요소를 포함한다. 메뉴, 아이템 인벤토리, 설정 화면, 대화 창 등 다양한 요소가 포함되며, 플레이어가 게임을 조작하고 정보를 얻는 데 사용된다
  
  2. 차이점
  
  
• 기능: HUD는 주로 실시간 상태 정보를 제공하는 반면, UI는 메뉴와 같은 상호작용 요소를 포함하여 게임 조작과 관련된 모든 요소를 포괄한다
• 위치: HUD는 게임 화면의 특정 부분에 항상 표시되지만, UI는 특정 상황이나 메뉴를 열었을 때만 나타난다
• 사용성: HUD는 빠른 정보 접근성을 위해 설계되어 즉각적으로 인식할 수 있어야 하지만, UI는 더 복잡한 상호작용을 필요로 할 수 있다

✅ 캐릭터의 Health, Mana 정보를 관리할 변수 추가

◼️ In Blueprint <ThirdPersonCharacter>

• New Variable: Health
  - type: float
• New Variable: Mana
  - type: float
  

✅ Widget Blueprint

위젯 블루프린트
위젯(Widget)?
주로 UI/HUD를 설계하고 구현하기 위한 구성 요소를 의미한다.
위젯은 게임 화면에 표시되는 버튼, 텍스트, 이미지, 슬라이더 등과 같은 UI/HUD 구성 요소를 만들고 관리하기 위해 사용된다.

이러한 위젯은 전용 Widget Blueprint (위젯 블루프린트)에서 편집되는데, 두 가지 탭으로 구성된다.
1. Designer (디자이너) 탭: 인터페이스의
시각적인 레이아웃과 기본적인 함수가 제공되며
2. Graph (그래프) 탭: 사용된 위젯 내부의
함수 기능이 제공된다

◼️ 위젯 블루프린트 생성
유저 인터페이스 → 위젯 블루프린트 <RPGHUD>

◼️ 위젯 블루프린트 에디터

번호	이름	설명
1	메뉴 바	일반적인 메뉴 바입니다.
2	툴 바	컴파일, 저장, 플레이 등 블루프린트 에디터에 자주 사용되는 함수가 여럿 들어있습니다.
3	에디터 모드	UMG 위젯 블루프린트 에디터에서 디자이너 / 그래프 모드를 전환합니다.
4	팔레트	비주얼 디자이너에 드래그 앤 드롭으로 놓을 수 있는 위젯 목록입니다. UWidget 에서 상속되는 클래스가 표시됩니다.
5	계층구조	유저 위젯의 족보 관계를 표시합니다. 위젯을 끌어 이 창에 놓을 수도 있습니다.
6	비주얼 디자이너	레이아웃의 시각적 표현입니다. 비주얼 디자이너에 끌어놓은 위젯을 이 창에서 조작 가능합니다.
7	디테일	현재 선택된 위젯의 프로퍼티를 표시합니다.
8	애니메이션	위젯의 애니메이션 키프레임 작업을 할 수 있는 UMG 애니메이션 트랙입니다.

• Progress Bar
  Health, Mana를 UI상에 표시하기 위해 Progress Bar 추가
  각각 이름을 Health, Mana라고 명명

1. 채우기 색과 투명도(Fill Color and Opacity)
   레퍼런스 HUD의 색 참조해서 설정
   
2. 퍼센트(Percent, 범위: 0~1)
   바인딩 생성
   이 프로퍼티의 바인딩 데이터를 반환할
   위젯 블루프린트에 새 함수를 생성
   'Cast To(형변환)' 노드
   형변환은 입력을 다른 타입으로 변환하여 해당 특정 타입에만 허용되는 함수 기능에 액세스할 수 있도록 해 주며, 입력이 해당 타입에 기반한 경우 형변환이 성공합니다.
   2.1. Get Health Percent 0 → Cast to ThirdPersonCharacter
   2.2 Get Plyaer Character → Cast to ThirdPersonCharacter
   2.3 Cast to ThirdPersonCharacter → Get Health → Return
   
   Health의 경우
   
   Mana의 경우
   

✅ Screen에 HUD 표시

위젯 블루프린트 만들고 게임에 표시
◼️ In Blueprint <ThirdPersonCharacter> → Event Graph

• Event BeginPlay 생성
• Event BeginPlay → Create Widget
  Class 선택 → RPGHUD
• Create Widget → Add to Viewport
  Create Widget_Return Value → Add to Viewport_Target
• 변수 Health, Mana
  Default Value(기본값) 1로 설정
  

✅ Result

• HUD