언리얼 게임만들기 튜토리얼 - 퍼즐 어드벤처 플레이어 HUD

https://dev.epicgames.com/documentation/ko-kr/unreal-engine/designer-04-player-hud-in-unreal-engine?application_version=5.6

디자이너 04 언리얼 엔진의 플레이어 HUD | 언리얼 엔진 5.7 문서 | Epic Developer Community

 

HUD는 Heads-Up Display의 약자로, 플레이어가 시각적으로 상호작용하는 모든 것을 말한다.

 

 

언리얼에서 UI 만드는 법 중 하나는 위젯을 사용하는 것이다.

 

 

위젯 만드는 법

유저 인터페이스 -> 위젯 블루프린트

 

팔레트에는 UI에 추가할 수 있는 위젯 타입이 표시되어 있다.

계층 구조는 UI 컴포넌트의 구조를 보여준다.

그리드 칸은 비주얼 디자이너이다.

그리드 왼쪽 상단에는 줌 레벨을 뜻한다. 줌 1:1은 UI를 100% 스케일로 보는 것을 의미한다. 플레이어가 작은 화면에서 게임을 실행하는 경우, 언리얼 엔진은 DPI 스케일을 사용하여 해당 화면에 맞게 UI 스케일을 조정한다.

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

 

캔버스 패널 만들기

패널 타입 위젯은 화면에 아무것도 표시하지 않는다. 이 위젯은 레이아웃과 위치를 결정하는 컨테이너 역할을 한다.

캔버스 패널은 앵커를 사용하여 위젯을 화면의 원하는 위치에 정확하게 배치해준다.

캔버스 패널을 만들면 이 캔버스가 루트 위젯이 된다. 기본적으로 1920x1080 픽셀이며 전체 화면을 나타낸다.런타임에는 언리얼 엔진이 플레이어 화면에 맞게 UI 스케일을 조정한다.

 

HUD 레이아웃 제작

텍스트 영역 정의하기

오버레이 생성

오버레이는 동일한 공간에서 여러 위젯을 서로 레이어링하는 패널 타입이다.

UI 엘리먼트 뒤에 배경 이미지를 추가하거나 UI 엘리먼트 위에 스태틱 아이콘이나 텍스트 라벨을 추가하는데 좋다.

UI 텍스트 뒤에 블러 이펙트를 레이어해본다.

 

세로박스와 가로박스 두 개를 추가한 상태

이 상태에서는 디자이너에게 보이는 프레임이 없고, 콘텐츠에 맞게 자동 크기조정이 됨.

각 박스 타입은 두 UI에 추가할 텍스트를 정렬하고 정리하는 역할을 한다.

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

패딩을 5로 주고 HP : 를 입력한 모습

텍스트 색깔 바꾸기

텍스트 폰트 바꾸기

 

변수 여부는 위젯 블루프린트의 이벤트 그래프에서 txtKeys를 참조하고 사용할 수 있게 한다.

 

변수타입을 우클릭하면 배열로 바꿀 수 있다.

 

새 함수를 만든다.

Add Unique 노드는 배열과 새 값을 가져와 해당 값이 배열에 없으면 배열에 추가한다. 키 이름이 두 번 이상 표시되지 않는 이유

fnAddKeyHUD 함수

 

 

플레이어 블루프린트에서 플레이어에게 키를 추가하면 HUD에도 키가 추가되도록 한다.