게임 개발/Unreal Engine 5

Unreal Engine 5) UI 만들고 적용하는 방법

UniCoti(유니코티) 2024. 8. 9. 09:05
반응형

유니티의 경우 Canvas라는 오브젝트를 만들어서 거기에다가 여러 가지 UI를 넣어

렌더링 해주는 방식으로 진행되는데, 언리얼 엔진의 경우 조금 더 복잡한 방식을 선택했다.

이후로 설명할 내용이지만 거시적으로 설명하자면 Canvas 파일이 따로 있고,

파일 내부에서 UI를 디자인한 후 특별히 메서드를 사용해서 렌더링 하는 방식이다.


1. Widget Blueprint

앞서 말한 Canvas 파일이라고 생각하면 편하다.

이 파일 내부에서 디자인을 한 다음, 이 파일을 렌더링 해달라고 요청하면 된다.

User Interface -> Widget Blueprint

[Ctrl + Space]를 눌러서 Content Browser를 열고, 

빈 곳을 우클릭한 다음, [User Interface] -> [Widget Blueprint]를 눌러주면 생성된다.

 

Pick Root Widget...

그러면 이렇게 새로운 창이 뜨는데, 일반적으로는 User Widget을 눌러주면 된다.

이후 파일이 생성되었으면 더블클릭해서 열어준다.

 

디자인 화면

이런 모습이 생기면 성공이다.

여기서 이제 디자인을 할 수 있다. 저기 보이는 화살표 버튼을 드래그해 보자.

 

화면 영역

그러면 이렇게 화면 영역이 나타나게 되는데, 여기서 게임에서의 화면 비율을

따라서 선택해 주면 된다. 보통은 1920x1080일 것이다.

 

palette

이제 원하는 요소를 추가할 시간이다.

Palette라는 이름으로 이런 창이 있다. 여기서 원하는 UI를 드래그 드롭 해주자.

 

text

예시로, Text를 드래그, 드롭해 주고 폰트 크기를 좀 키워주면 저렇게 된다.

이걸 저장하고, 다시 Level로 돌아가자.


2. Rendering

이제 이 UI화면을 게임에서 보이게 하는 작업이 필요하다.

이건 Level Blueprint에서 해줘야 하는 작업이다.

 

Open Level Blueprint

Open Level Blueprint 버튼을 눌러서 Level Blueprint를 열어주자.

[Event BeginPlay] -> [Create Widget] -> [Add to Viewport] 순으로 구성하면

화면상에 UI가 표시되게 된다.

 

설계도

2번째 노드의 Class에는 아까 작업한 Widget Blueprint를 넣어주자.

이후 반환된 값이 3번째 노드의 Target에 들어가면 된다.

이제 Level을 시작해서 적용되었는지 확인해 보자.


3. 실행 화면

FPS 템플릿의 실행 화면

화면을 보면 알겠지만, 아까 적용한 Text Block이라는 텍스트가 잘 적용되었음이 확인된다.

배치나 크기 등을 바꾸려면 다시 Widget Blueprint로 가서 작업해 주면 된다.

아까 Palette를 잘 확인해 보면 Text뿐 아니라 버튼, 슬라이더 등 많은 요소가 있으니까

Text 말고도 많이 써보면서 익혀보길 권장한다.


여기까지 언리얼엔진에서 UI를 조금 다뤄봤다.

확실히 유니티보다 어려운데, 이게 더 나은 것 같기도 하다.

유니티에서 여러 가지 UI를 쓰고 싶은 경우에 보통 Panel 오브젝트를 통해서 관리했는데,

여기서는 widget blueprint라는 확실하게 다른 파일로써 동작할 수 있으니까

조금 더 관리에 용이할 것 같다. 

 

그럼에도 변하지 않는 사실은 간단한 작업에는 유니티 같은 방식이 더 편할 것이라는 사실이다.

관리의 용이성이 좋으면 항상 간단한 작업에는 불리한 것 같다.

그렇다고 자유도가 높으면 또 난이도가 올라가니까 엔진 만드는 입장에서도

어떻게 해야 좋을지 난감할 것 같기도 하다.


이상으로 도움이 되었길 바라며,

 

끝.

반응형