1. 위젯 블루프린트 구성

3D 게임 월드에 표시할 위젯 블루프린트를 만듭니다.

Windows
MacOS
Linux
On this page

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

여기서는 시작용 콘텐츠 포함 블루프린트 삼인칭 템플릿을 사용하여 새 프로젝트를 만들었습니다.

단계

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

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

    3DWidgets_1.png

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

    3DWidgets_2.png

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

    3DWidgets_3.png

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

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

    3DWidgets_4.png

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

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

    3DWidgets_5.png

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

    3DWidgets_6.png

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

    3DWidgets_7.png

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

    3DWidgets_8.png

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

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

    3DWidgets_9.png

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

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

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

    3DWidgets_10.png

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

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

    3DWidgets_11.png

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

    3DWidgets_12.png

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

    3DWidgets_13.png

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

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

    3DWidgets_14.png

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

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

    3DWidgets_15.png

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

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

최종 결과

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

Select Skin
Light
Dark

Welcome to the new Unreal Engine 4 Documentation site!

We're working on lots of new features including a feedback system so you can tell us how we are doing. It's not quite ready for use in the wild yet, so head over to the Documentation Feedback forum to tell us about this page or call out any issues you are encountering in the meantime.

We'll be sure to let you know when the new system is up and running.

Post Feedback