[UE5][BP] HUD 1/2

[UE5][BP] HUD 1/2

 

 

 HUD란? Heads-up Display는 플레이어에게 게임에 대한 정보를 표시해주는 기능

 

 기본적인 UI를 만들어 보자.

 슈팅 게임에서 가장 필요로 하는 UI 요소로 HP, ST와 사냥한 적을 카운팅, 장전된 총알의 수를 넣기로 하였다.

 언리얼에서는 UI 제작 툴로 '언리얼 모션 그래픽 UI 디자이너(UMG)를 제공하고 있고, 유니티의 UGUI와 비슷하면서 다르다.  내가 사용해 볼 때는 기본적으로 이 둘은 비슷한 구조를 가지고 있다.

 슬레이트(Slate)라는 것도 존재하는데, 이것은 C++로 작업하여 개념이라고 한다.  그리고 이것을 블루프린트 버전으로 만든 것이 UMG UI라고 생각하면 편할 것 같다.

 언리얼 슬레이트 문서 : https://dev.epicgames.com/documentation/ko-kr/unreal-engine/slate-user-interface-programming-framework-for-unreal-engine

---

UI를 제작해보자

 다시 내가 만들어 볼 게임으로 돌아와, 컴퓨터는 기본적으로 화면을 통하여 출력하기 위해서는, 출력하는 값을 메모리에 저장해두어야 가능하다.  이것은 UI에도 똑같이 적용되며, UI에서 보여줄 수치들(노출시킬 변수)을 우선 메모리에 저장하기 위하여 '변수'라는 박스를 만든다.  변수는 게임을 진행함에 따라 계속해서 바뀌는 값들을 저장할 것이다.  그래서 이름부터
변수'이다.

 이 값을 저장할 변수는 FirstPersonCharacter 블루프린트에 저장해두고, UI 블루프린트에서 값만 받아 UI에서 출력해 줄 거다.

 하단에 첨부한 것 같이 4개의 변수를 만들어(선언해) 주자.  만드는 방법은 블루프린트를 연 후, 내 블루프린트 밑 '+추가' 버튼을 클릭하여 변수를 생성하고, 각각의 데이터 타입을 정한 후, FirstPersonCharacter밖(클래스)에서 변수에 접근하여 수정할 수 있도록 설정하는 것을 잊지 말자.

 

---

UI 꾸미기

 다음으로 HUD라는 이름으로 기본적인 UI를 만들고, 하이어라키를 하단의 이미지와 같이 생성, 정리해준다.

 

---

UI가 그려지는 순서

 여기서 하이어라키의 아래쪽에 존재 할 수록 UI의 앞쪽에서 그려진다는 점을 인지하고 정리를 해야 할 것 같다.

 다시 HUD를 화면에 구성할 때, 이런 식으로 배치를 한 후, 각 패널들의 '앵커'와 '피벗'을 잘 정해주어 스크린의 사이즈 변경에 대응이 잘 되도록 정리 해 주면 좋을 것 같다.

---

바인딩

 이제 앞에서 만든 FirstPersonCharacter에서 선언한 '변수'들을 UI에 출력하기 위해 '바인딩'을 이용하여 연결해 준다.  그럼 블루프린트에서 작업한 변수들을 출력해 줄 수 있다.

 

 

 각 UI에 연결되는 함수는 동일한 규칙을 가지며, 하단과 같다.

 함수 네 가지 중 위쪽 두 가지(HealthBar~, StaminaBar~)는 UI를 꾸미는 요소이고, 하단의 UI에서 출력할 변수 값에 대한 함수이다.

 언리얼5는 언리얼4와 다르게 총알 관련된 블루프린트가 FirstPersonCharacter가 아닌, 각각 담당하고 있는 블루프린트에 들어 있는데, 나는 BP_Weapon_Component 블루프린트에 총알이 발사되었을 때, 효과음과 VFX 출력이 되는 부분에 총알 카운팅 관련 노드를 만들고, FirstPersonCharacter의 블루프린트의 '변수'의 값을 받아오고, 저장하도록 하였다.

 

 프로그래밍의 문법과 블루프린트에는 규칙들이 존재하는데, 

 빨간 박스 안쪽의 블루프린트에 Player Character의 정보들(변수로 저장되어 있다.)을 가져와 다른 블루프린트에서 데이터를 가공하여 다시 변수에 저장하는 방식이다.

 

 만약 Cast To BP_FirstPersonCharacter 노드를 사용하지 않으면, 그 안에 들어 있는 변수에 접근할 수 없기 때문에 위와 같은 구조로 노드를 작성한다.

 

 C++ 언어에서 클래스라는 것이 존재하고, 이 클래스를 상속을 받는 등의 방법으로 변수(저장 값) 들에 접근한다든지, 다른 코드에서 함께 사용할 수 있다.  클래스 위쪽에는 네임스페이스 라는 것이 존재한다.  더 큰 상위 바운드리라고 생각하면 이해하기 쉬울 것 같다.

 

 위의 작업을 모두 끝내면 이런 결과물을 얻을 수 있다.

---

이어지는 글 HUD 2/2 링크 : https://asatala.tistory.com/179