3D 월드 스페이스에 위젯을 표시하기 위해서는 먼저 표시할 위젯 블루프린트 를 만들어야 합니다. 이번 튜토리얼에서는 플레이어가 둘러볼 수 있는 3D 메뉴를 만들 것이며, 이 방법을 통해 어떤 유형의 3D 위젯(생명력 막대, 상호작용형 월드내 UI 요소 등)도 표시할 수 있을 것입니다.

단계

1. 콘텐츠 브라우저 에서 프로젝트의 루트 콘텐츠 폴더 아래 우클릭 하고 UMG 라는 폴더를 새로 만듭니다.

2. UMG 폴더에서 신규 추가 버튼을 누르고 유저 인터페이스 아래 위젯 블루프린트 를 선택합니다.

3. 위젯 블루프린트 이름을 MainMenu 라 하고 모두 저장 버튼을 누릅니다.

4. 위젯 블루프린트 에 더블클릭 하여 UMG 에디터에서 엽니다.

   위젯 블루프린트의 디자이너 탭이 기본으로 열릴 것입니다.

5. 계층구조 창에서 CanvasPanel 을 지운 다음 팔레트 창에서 (패널 섹션 아래 있는) Vertical Box 를 추가합니다.

   위와 같이 Vertical Box 를 끌어 Root 에 놓으면 됩니다.

6. 팔레트 창 일반 아래, Text 위젯을 끌어 Vertical Box 위에 놓습니다.

7. 계층구조 창에서 Text 위젯을 클릭한 다음 디테일 패널에서 채우기 로 설정하고 가로 세로 중앙 정렬 시킵니다.

8. 팔레트 창에서 일반 아래 Button 위젯을 끌어 Vertical Box 에 놓습니다.

9. 계층구조 창에서 Button 위젯을 클릭한 다음 디테일 패널에서 채우기 로 설정합니다.

10. Button 에 대한 디테일 패널에서 Style - Normal - Tint 를 원하는 색으로 설정합니다 (저희는 검정으로 설정했습니다).

11. 또 Hovered 를 펼친 다음 Tint 색을 위 Normal 에 사용한 것 이외의 색으로 설정합니다.

    그러면 버튼은 보통 상태일 때 Normal 에 설정한 색으로, 마우스 커서를 올렸을 때 Hovered 에 설정한 색으로 나타납니다.

12. 계층구조 창에서 Text Block 을 클릭한 다음 Ctrl + C 를 눌러 복사하고서 Vertical Box 를 클릭하고 Ctrl + V 를 눌러 붙여넣습니다.

13. 네 개의 텍스트 블록 이 생기도록 위 단계를 두 번 더 반복합니다.

14. 계층구조 창에서 Button 을 클릭한 다음 Ctrl + C 를 눌러 복사하고, Vertical Box 를 클릭한 다음 Ctrl + V 를 눌러 붙여넣습니다.

15. 버튼이 3 개가 되도록 위 단계를 반복합니다.

16. Text Block 을 끌어 계층구조 내 각 Button 에 놓습니다.

17. 레이아웃이 아래와 같은 모습일 것입니다.

18. 계층구조 창에서 맨 위 Text Block 을 선택한 다음 디테일 패널에서 Content 아래 Text 를 원하는 대로 설정합니다.

19. 또 Text Block 의 디테일 패널에서 Appearance 아래 Font 옵션을 통해 폰트 크기를 변경할 수 있습니다.

    여기서 메뉴에 제목을 MY GAME TITLE, 크기를 102 로 설정했습니다.

20. 버튼에 나타나는 각 텍스트에 대해, Text 를 원하는 메뉴 옵션으로 변경합니다 (크기도 설정해 줍니다).

    이것은 LOAD GAME, NEW GAME, QUIT GAME 에 폰트 크기는 56 으로 하여 완성된 메뉴 모습입니다.

21. 컴파일, 저장 후 블루프린트를 닫습니다.

최종 결과

이렇게 완성된 위젯 블루프린트를 위젯 컴포넌트 로 사용할 수 있도록, 다음에는 액터 블루프린트를 구성해 줘야 겠습니다. 버튼 클릭시의 함수성을 연결하지는 않더라도, 최소한 3D 월드 스페이스에서 마우스로 조작할 수 있는 메뉴는 나올테니 첫 시작을 어떻게 해야 하는지는 알 수 있을 것입니다.