메인 메뉴 생성하기

게임에 사용할 메인 메뉴를 생성하고 스크립팅하는 방법입니다.

Choose your operating system:

Windows

macOS

Linux

이 하우투 가이드에서는 게임에 사용할 메인 메뉴를 생성하고 스크립팅하는 방법을 알아봅니다.

UMG UI 디자이너 퀵스타트 가이드를 먼저 진행했다면, 동일한 프로젝트를 이 하우투 가이드에서도 사용할 수 있습니다.

메인 메뉴 생성

가장 먼저 할 일은 메인 메뉴의 레이아웃을 생성하는 것입니다.

  1. MainMenu 위젯 블루프린트를 엽니다.

    MainMenu 블루프린트 생성에 도움이 필요하면 UMG UI 디자이너 퀵스타트 가이드를 따르세요.

  2. 디자이너(Designer) 탭의 팔레트(Palette) 에 있는 위젯을 계층구조(Hierarchy) 로 드래그 앤 드롭하여 아래와 같이 구성합니다.

    Hierarchy1.png

    Canvas PanelImage 1개, Text 가 있는 Vertical Box 1개, Text 가 있는 Button 3개가 있습니다.

    계층구조 패널에서 위젯 클래스 또는 이름으로 검색하면 UI 요소를 빠르게 찾을 수 있습니다.

  3. 계층구조 에서 Vertical Box 를 선택하고 우클릭 하여 복사 합니다.

  4. Canvas Panel우클릭 하고 붙여넣기(Paste) 를 선택하여 Vertical Box 의 사본을 붙여넣습니다.

    Hierarchy2.png

  5. Vertical Box 에서 버튼우클릭 하여 복사하고 붙여넣어 네 번째 버튼/텍스트 위젯을 생성합니다.

    Hierarchy3.png

  6. Vertical Box 를 선택하고 디테일(Details) 패널에서 이름을 MainMenu 로 변경한 다음 변수인지(isVariable) 옵션에 체크하고 ZOrder1 로 설정합니다.

    CreatingAMenu_3.6.png

    알아보기 쉽도록 이름을 짓고, 액세스할 수 있도록 변수로 설정하고, 위젯이 잠시 후 설정할 이미지보다 앞에 표시되도록 ZOrder 를 설정하는 것입니다.

  7. 다른 Vertical Box 를 선택하고 디테일(Details) 패널에서 이름을 Option 으로 변경한 다음 변수인지(isVariable) 옵션에 체크하고 ZOrder1 로 설정합니다.

  8. Button 이름을 아래 이미지와 같이 변경합니다.

    Hierarchy5.png

    이름을 업데이트하면 각 버튼의 역할을 알 수 있어서 기능 스크립트를 만들기 더 쉽습니다.

  9. Text 위젯은 디테일(Details) 패널의 콘텐츠(Content) 아래 Text 섹션을 통해 아래와 같이 업데이트합니다.

    CreatingAMenu_3.9.png

    각 버튼과 메뉴 헤더에 표시되는 텍스트를 업데이트하는 것입니다.

  10. Ctrl 을 누른 채 각 Button 을 선택한 다음 디테일(Details) 패널에서 Hovered 상태의 Tint 색을 설정하고, 각각의 Size채우기 로 설정합니다.

    CreatingAMenu_3.10.png

    모든 버튼의 크기를 조절하고, 마우스 커서를 버튼에 올릴 때의 버튼 색을 정의하는 것입니다.

  11. 계층구조(Hierarchy) 에서 Image 를 선택한 다음 디테일(Details) 패널의 외관(Apperance) > Brush 에서 사용할 텍스처 , 스프라이트 또는 머티리얼 을 선택합니다.

    CreatingAMenu_3.11.png

    이 가이드와 동일한 이미지를 사용하려면 다음 위치에서 다운로드합니다. 샘플 배경 샘플 배경을 언리얼 엔진 으로 드래그하여 임포트하세요. 확인 메시지가 표시되면 예(Yes) 를 클릭합니다.

  12. 디자이너(Designer) 창에서 이미지 크기를 조절하여 레이아웃 전체를 차지하게 합니다.

    Hierarchy9.png

  13. 이미지(Image)디테일(Details) 패널에서 앵커(Anchor) 버튼을 클릭하여 화면 채우기 옵션을 선택합니다. 스케일박스를 사용하여 이미지를 고정할 수도 있습니다. 그러면 이미지의 스케일과 크기가 종횡비에 맞게 조절됩니다.

    CreatingAMenu_3.13.png

  14. 세로 박스(Vertical Box) 를 선택하고 앵커(Anchor) 로 왼쪽 중앙 위치에 고정합니다.

    CreatingAMenu_3.14.png

  15. Options 세로 박스를 선택하고 Visibility 세팅을 Hidden 으로 설정합니다.

    CreatingAMenu_3.15.png

    옵션은 디폴트로 보이지 않고 스크립트를 통해 표시되게 할 것입니다.

  16. MainMenu 세로 박스를 선택하고 디자이너(Designer) 창에서 원하는 크기와 위치로 배치합니다.

    Hierarchy13.png

  17. 텍스트(Text) 위젯의 디테일(Details) 패널에서 폰트(Font) , 크기(Size) , 정렬(Alignment) 을 변경할 수 있습니다.

    CreatingAMenu_3.17.png

    이러한 세팅을 조절하여 원하는 이펙트를 만들 수 있습니다.

  18. 옵션 세로 박스를 원하는 대로 구성한 다음 메인 메뉴(Main Menu) 세로 상자 뒤로 직접 옮깁니다.

    Hierarchy15.png

    두 메뉴 중에서는 하나씩만 표시될 것이므로 서로 겹쳐도 괜찮습니다.

메뉴의 비주얼 레이아웃이 완성되었으니, 다음으로 메뉴의 기능을 스크립팅하겠습니다.

메인 메뉴 스크립팅

이제 메인 메뉴의 기능을 스크립팅할 시간입니다. 이 단계를 마치면 게임을 실행할 때 표시되는 메인 메뉴에서 게임을 시작하거나 옵션 메뉴에서 해상도를 변경할 수 있을 것입니다.

  1. MainMenu 위젯 블루프린트를 열고 그래프(Graph) 탭을 클릭합니다.

    ScriptingMainMenu_4.1.png

  2. MyBlueprint 창에서 PlayButton 을 선택하고 디테일(Details) 패널에서 On Clicked 옆의 더하기 기호를 클릭합니다.

    ScriptingMainMenu_4.2.png

    그러면 버튼이 클릭될 때마다 실행할 노드가 그래프에 추가될 것입니다.

  3. 각 버튼에 On Clicked 이벤트를 추가합니다.

    ScriptingMainMenu_4.3.png

    알아보기 쉽도록 그래프의 버튼을 메뉴 레이아웃과 비슷해 보이도록 배열합니다.

  4. OnClicked(PlayButton) 에서 드래그하여 Open Level(by Name) 노드와 Remove from Parent 노드를 추가합니다. Open Level 노드는 FirstPersonExampleMap 으로 설정합니다.

    ScriptingMainMenu_4.4.png

    Level Name 은 로드할 레벨의 이름을 명시하는 곳입니다. 이 경우 FirstPersonExample 맵입니다. Remove from Parent 노드는 타깃 위젯 블루프린트를 뷰포트에서 제거합니다. 타깃은 self로 설정됩니다. 즉, 레벨이 로드된 뒤에는 메인 메뉴 위젯 블루프린트가 뷰에서 제거됩니다.

  5. MainMenuOptionsMenu 변수를 Ctrl +드래그합니다.

  6. MainMenu 에서 드래그하여 Set Visibility 노드를 추가합니다. In Visibility 를 Hidden으로 설정합니다.

  7. 드래그하여 Set Visibility 노드를 추가합니다. Invisibility 를 Visible로 설정합니다.

  8. OptionsMenu 변수에 타깃을 어태치합니다.

    OptionsButton.png

    Options 버튼이 클릭되면 메인 메뉴를 숨기고 옵션 메뉴를 표시하는 것입니다.

  9. Settings 버튼에서 드래그하여 Execute Console Command 노드를 추가합니다.

  10. 각각에 대한 Command 로는 r.setRes XxY 를 사용합니다. X와 Y는 사용할 치수입니다.

    Resolution.png

    위에서는 다음 세팅을 사용합니다. 640x480, 1280x720, 1920x1080 .

  11. Return 버튼에는 6단계를 반복하되 세팅을 반대로 하여 메인 메뉴를 표시하고 옵션 메뉴를 숨깁니다.

    ReturnButton.png

  12. OnClicked (QuitButton) 에서 드래그하여 Execute Console Command 를 추가하고 Command를 Quit 로 설정합니다.

    QuitButton.png

  13. 컴파일(Compile) 하고 저장(Save) 한 다음 위젯 블루프린트를 닫습니다.

  14. 콘텐츠 브라우저(Content Browser) 에서 메인(Main) 레벨을 열고 레벨 블루프린트(Level Blueprint) 를 엽니다.

    ScriptingMainMenu_4.14.png

  15. 그래프에서 우클릭 하여 BeginPlay 이벤트 노드를 추가한 다음, Create Widget 을 연결하고 ClassMain Menu 로 설정합니다.

    EventBeginPlay.png

  16. Add to Viewport 노드를 연결하고 Get Player Controller 노드를 추가합니다.

  17. Get Player Controller 에서 드래그하여 Set Show Mouse Cursor 노드를 추가하고 True 로 설정합니다. 그런 다음 컴파일(Compile) 하고 블루프린트를 닫습니다.

    FinishedLevel.png

  18. 콘텐츠(Content)/FirstPersonBP/Blueprints 폴더의 First Person Character 블루프린트를 엽니다.

  19. BeginPlay 이벤트 스크립트 뒤에 Get Player Controller 노드와 Set Input Mode Game Only 노드를 추가합니다.

    PlayerCharacterBlueprint.png

    그러면 커서를 숨기고 플레이어의 입력을 게임 전용으로 설정합니다.

  20. Set Input Mode Game Only 의 Out 핀을 분기(Branch) 노드에 연결합니다.

    ScriptingMainMenu_4.20.png

  21. 컴파일(Compile) 하고 블루프린트를 닫은 뒤 월드 세팅(World Settings) 을 엽니다.

    ScriptingMainMenu_4.21.png

  22. Game Mode 에서 게임모드 오버라이드(GameMode Override)FirstPersonGameMode 로 설정하고 Default Pawn ClassCharacter 로 변경합니다.

    ScriptingMainMenu_4.22.png

    이 맵에 게임 모드를 할당하고, 플레이어 캐릭터가 FirstPersonCharacter 블루프린트 내의 플레이 가능한 엔진 디폴트 캐릭터를 사용하도록 변경하는 것입니다. 플레이어가 메인 메뉴 뒤에서 뛰어다니면서 총을 쏘게 하진 않게 하기 위해서입니다.

  23. 메인 툴바의 플레이(Play) 버튼을 클릭하여 에디터에서 플레이합니다. 해상도 옵션을 테스트하기 위해 에디터에서 플레이(Play-in-Editor) 드롭다운 메뉴에서 새 에디터 창(New Editor Window) 을 선택합니다.

지금까지 플레이어가 게임 종료, 해상도 옵션 변경, 게임 플레이를 할 수 있는, 실제로 작동하는 메인 메뉴를 생성해 보았습니다. 게임 플레이를 선택하면 지정된 레벨을 로드하고 플레이어를 게임플레이로 트랜지션합니다.

언리얼 엔진의 이전 버전을 위해 작성된 페이지입니다. 현재 언리얼 엔진 5 버전을 위해 업데이트되지 않았습니다.