[UE5] UI 만들기

(1) 다음 작업?

벽면까지 텍스처를 칠하고, 맵 정중앙에 플레이어 스타트를 놓는 것으로 간단하게 맵 제작이 끝났다.

이제 뭘 할지를 생각해보다가, UI를 만들어 보면 어떨까 싶었다.

 

인벤토리 같은 복잡한 UI보다, 그냥 HP와 MP를 표시하는 정도의 HUD만 만들어보도록 해야겠다.

 

UMG UI 디자이너 퀵스타트 가이드 | 언리얼 엔진 5.0 문서 (unrealengine.com)

UMG UI 디자이너 퀵스타트 가이드

항상 느끼는거지만, 언리얼 엔진은 문서화 및 튜토리얼이 정말 잘 되어있다. 유니티하다가 언리얼 하니까 문서의 질차이가 확 느껴진다.

 

위 튜토리얼에서도 Health, Energy, Ammo 라는 HUD를 만드는 튜토리얼이 들어있다.

하지만 위 튜토리얼은 블루프린트 프로젝트를 기반으로 설명하고 있다. 따라서 일단 초보자인 나도 블루프린트로 따라해야겠으나.... 나는 C++ 프로젝트로 시작했다~ 이 말씀이야!

 

따라서 먼저, Health 및 Energy 변수를 블루프린트에 노출시키는 작업을 시작해야했다.

 

[UE5] C++ 클래스의 변수를 블루프린트로 쓰기

[UE5] C++ 클래스의 변수를 블루프린트로 쓰기

 

위와 같은 작업을 통해서, Health 및 Energy에 더해, Ammo 변수까지 블루프린트에 성공적으로 노출시켰다.

 

 

(2) UI 디자인하기

먼저, 매뉴얼에 나온대로 '위젯 블루프린트 에디터'를 찾아서 열어야 한다.

대충 이렇게 해도 열리는 것 같다.

 

 

공식 문서를 따라, Health 및 Energy 항목을 각각 디자인 해주었다.

 

레이아웃에서, `Slot` 카테고리에 있는 Size를 Fill로 두어서 'Horizontal Box'에서 설정한 가로 크기 최대만큼 채워지게 하였다.

생각보다 디자인 하는 방법이 어렵지 않았다. 유니티에 비해서 확실히 정렬 자체를 예쁘게 할 수 있게 해놔서 좋은듯.

 

(3) 블루프린트 구현

디자인은 되었으니, 이제 실제로 해당 HUD에 내용이 채워지게 구현해야 했다. 공식 매뉴얼에 나온대로 일단 다음과 같이 플레이어 캐릭터를 변수로 설정한다.

 

 

그런데 공식 문서에서는 Health, Energy를 모두 float로 0 ~ 1까지 범위를 갖는 실수로 구현했다. 하지만 나는 MaxHealth, MaxEnergy를 각각 가지는 정수형으로 구현했기 때문에, 0 ~ 1 범위를 갖는 실수로 변환할 필요가 있다.

 

블루프린트로 계산해도 되지만, 연습 겸 C++에서 해당 float 값을 계산할 수 있는 함수 프로퍼티를 만들기로 생각했다.

 

 

(2) Help with Property Getters/Setters? : unrealengine (reddit.com)

위 링크를 참조해서 구현했다.

 

위와 같은 함수 및 프로퍼티를 선언했다. BlueprintGetter 라는 인자를 처음 봤다.

그리고 UFUNCTION 매크로의 인자로, BlueprintPure 및 BlueprintInternalUseOnly 라는 인자를 보게 되었다.

 

마우스를 가리키면 Rider가 알아서 문서를 보여줘서, 해당 인자에 대해 이해하는 것이 간결하고 쉬웠다.

마찬가지로 BlueprintPure 역시 어딘가에 영향을 끼치는 사항이 없는 순수 함수라는 의미이다.

 

Live Coding 컴파일 후, 디자이너 탭에서 디테일 패널에서 공식매뉴얼 처럼, 해당 값을 가져올 수 있는지 확인한다.

 

 

정상적으로 해당 값을 바인딩 할 수 있게 되었다.

 

마찬가지로 Energy 역시 바인딩해준다.

 

 

(4) 문제 해결

하지만 HUD는 나오는데, 게이지가 채워지지 않아있다.

 

이상해서 Ratio값들을 띄워보기 위해, 위와 같은 블루프린트를 작성했다.

 

하지만 당연하게도, 값들을 잘만 가져오고 있다. 그러면 도대체 어디서 잘못된 것인가..?

 

 

값을 수정하면 뭔가 업데이트가 되면서, 해결되지 않을까? 라는 생각을 하게 되어서 위와 같이 값을 수정하는 코드도 넣어보았다.

 

하지만 값이 변해도 체력,에너지바 게이지는 변하지 않는다.....

 

 

계속된 삽질을 하다가, 위와 같은 블루프린트를 작성했더니 된다. Event Construct대신 Event Tick으로 옮기고, Ratio 값들을 직접 가져와서 변수에 넣었다.

 

그리고 해당 Ratio 블루프린트 변수들을 직접 Percent로 바인딩 한 것이다.

 

아니.. 이렇게 할거라면 애초에 Ratio 계산도 블루프린트로 했을텐데.... 좀 억울하다.

 

 

 

너무 억울해서 안되겠다. 그래서 해결 방법을 다시 찾아보려고 한다.

일단 Event Tick에 다시 옮겨넣었으나, 여전히 안된다. bind도 다시 원래대로 하고 했지만 여전히 나오지 않는다.

 

 

하지만 암만 찾아도 모르겠다.

 

값은 얻어오는데, 위젯은 업데이트가 안된다. 이상하다.

대충 추측하기로는, Widget을 이렇게 바인딩하려면 C++에서 위젯 코드도 따로 만들어서 넣어줘야 하는건가? 싶긴 한데...

일단 그러기 싫어서 이러고 있는거라서 슬슬 열받는다. -_-

 

 

하하 결국 포기했다. C++ 코드에 넣었던 Ratio 함수 및 프로퍼티를 모두 제거하고, 그냥 Tick마다 블루프린트가 계산해서 변수에 넣게 만들었다.

 

그러면 일단 잘 되거든. 깔깔. 다음에 내가 언리얼 엔진을 다루는 실력이 늘게 된다면, 그때 다시 시도해보는 것으로,...