일시정지 메뉴 생성하기

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

Choose your operating system:

Windows

macOS

Linux

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

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

게임 내 일시정지 메뉴 생성

이 섹션에서는 기본 일시정지 메뉴의 비주얼 레이아웃을 생성합니다.

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

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

    Pause1.png

    Canvas PanelBorder 가 있고, 그 안에 있는 Vertical BoxText 1개, 각각 Text 가 있는 Button 2개가 있습니다.

  3. 디자이너(Designer) 창에서 Border 가 점으로 뒤덮인 창(화면) 전체를 채우도록 크기를 조정합니다.

    InGamePause_5.3.png

    디테일(Details) 패널의 Brush Color 옵션에서 색을 바꿀 수 있습니다.

    InGamePause_5.3.2.png

    색의 알파(Alpha)0.5 로 설정하여 반투명하게 만드는 것도 좋습니다. 게임플레이 도중에 일시정지 메뉴를 열면 테두리가 화면을 채우지만, 다소의 반투명을 추가하면 배경에 게임 화면이 계속 보일 것입니다.

  4. 또한 Border디테일(Details) 패널에서 화면 채우기 앵커(Anchor)를 사용해야 합니다.

    InGamePause_5.4.png

    그러면 테두리가 화면 크기와 무관하게 화면을 채웁니다.

  5. 계층구조(Hierarchy) 에서 Vertical Box 를 선택한 다음 디테일(Details) 패널에서 가로, 세로 모두 중앙에 정렬합니다.

    InGamePause_5.5.png

  6. Vertical Box 아래의 Text 를 선택하고 디테일(Details) 패널의 콘텐츠(Content)Pause Menu 를 입력합니다.

    InGamePause_5.6.png

  7. 나머지 두 Text 블록에 ResumeQuit 를 입력합니다.

    Pause7.png

  8. Ctrl 을 누른 상태로 계층구조(Hierarchy) 에서 두 버튼(Buttons) 을 선택한 다음 디테일(Details) 패널의 Style 에서 Hovered 상태의 색을 할당합니다.

    InGamePause_5.8.png

  9. 디테일 패널에서 버튼 이름을 각각 ResumeQuit 로 변경합니다.

    InGamePause_5.9.png

일시정지 메뉴 기능 스크립팅

비주얼이 설정되었으니 다음으로 일시정지 메뉴의 기능을 스크립팅해야 합니다.

  1. 위젯 블루프린트 에디터 창의 우측 상단에 있는 그래프(Graph) 버튼을 클릭합니다.

  2. 내 블루프린트(My Blueprint) 창의 그래프(Graph) 탭에서 Quit 버튼을 클릭하고 디테일(Details) 패널에서 OnClicked 이벤트를 추가합니다.

    PauseMenuFunctionality_5.2.png

  3. Resume 버튼의 OnClicked 이벤트도 추가합니다.

  4. 그래프(Graph) 창에서 우클릭하여 Get Player Controller 노드를 추가합니다.

    PauseScript2.png

  5. Get Player Controller 에서 드래그하여 Set Input Mode Game Only 를 연결합니다. Get Player Controller 에서 다시 드래그하여 Set Show Mouse Cursor 를 연결하고 False 로 설정합니다. 그런 다음 아래와 같이 Remove from ParentSet Game Paused 를 연결합니다.

    PauseMenuFunctionality_5.5.png

    Resume 버튼이 클릭되면 입력 모드를 게임 전용으로 설정하고, 일시정지 메뉴가 활성화되면 표시되는 커서를 제거하는 것입니다. Remove from Parent 노드는 Set Game Paused 노드의 Paused 를 체크 해제하여 일시정지 상태를 종료하기 전에 PauseMenu 위젯 자체의 표시를 제거하는 데 사용됩니다.

  6. Remove HUD 라는 새 함수 를 생성합니다.

    PauseMenuFunctionality_5.6.png

    일시정지 메뉴가 활성화되면 게임 HUD를 플레이어의 뷰에서 제거하기 위해 사용할 함수입니다.

  7. 함수에 Get Player Character 노드를 추가하고 Return Value 에서 드래그하여 Cast ToFirstPersonCharacter 노드를 추가합니다.

    ScriptPauseMenu_5.7.png

    이렇게 하면 플레이어가 사용하는 캐릭터 블루프린트와 해당 플레이어가 사용하는 게임 HUD에 액세스할 수 있습니다.

  8. As First Person Character 에 아래와 같이 Get HUD ReferenceRemove from Parent 를 연결합니다.

    PauseScript6.png

    이렇게 하면 플레이어 캐릭터가 사용하는 HUD에 액세스하여 게임 종료 시 뷰포트에서 제거할 수 있습니다.

  9. 이벤트 그래프(Event Graph) 에서 Get Player ControllerSet Show Mouse Cursor 노드를 연결하고 True 로 설정합니다.

    ScriptPauseMenu_5.9.png

    이렇게 하면 Quit 를 클릭하여 메인 메뉴로 돌아갈 때 메뉴를 선택할 수 있도록 마우스 커서를 표시할 것입니다.

  10. 다음으로 위에서 생성한 Remove HUD 함수와 Open Level (by Name) 을 추가하고 아래와 같이 연결합니다. Level Name은 Main 또는 MainMenu가 있는 레벨의 이름으로 설정합니다.

    클릭하면 최대 크기로 볼 수 있습니다. 이제 두 버튼이 구성되었습니다. 마지막으로 할 일은 플레이어가 일시정지 메뉴를 호출하면 게임을 일시정지하는 것입니다.

  11. 콘텐츠 브라우저(Content Browser)콘텐츠(Content)/FirstPersonBP/Blueprints 경로에서 FirstPersonCharacter 블루프린트를 엽니다.

    PauseScript9.png

  12. 그래프에 M 키보드 이벤트(Keyboard Event)를 추가하고, Create Widget 노드를 추가하여 PauseMenu 로 설정한 다음 Return Value 를 변수로 승격(Promote to Variable)합니다.

    PauseMenuFunctionality_5.12.png

    여기서는 M 키를 일시정지 메뉴를 여는 입력으로 사용했지만, 원하는 어느 키든지 사용해도 됩니다. 승격된 변수는 Pause Menu Reference 로 명명했습니다. 생성된 일시정지 메뉴의 레퍼런스를 저장할 곳이기 때문입니다.

  13. Ctrl 을 누르고 내 블루프린트(My Blueprint) 창의 변수를 드래그한 다음 Is Valid 노드에 연결합니다.

    PauseMenuFunctionality_5.13.png

    일시정지 메뉴 위젯이 생성되고 이 변수에 저장되었는지 확인하는 것입니다.

  14. Is Not Valid 핀을 PauseMenu 위젯 생성 에 연결합니다.

    PauseScript12.png

  15. 우클릭 하여 Get Player Controller 노드를 추가한 다음, Set Show Mouse Cursor 를 추가하고 True 로 설정합니다.

  16. Get Player Controller 노드에서 다시 드래그하여 Set Input Mode UI Only 노드를 추가하고 아래와 같이 연결합니다.

    M 이 눌렸을 때, 일시정지 메뉴가 이전에 액세스된 적 있는 경우라면 메뉴를 다시 생성하지 않고 변수에 액세스할 것입니다. 일시정지 메뉴가 처음 액세스되는 경우라면 메뉴를 생성하고 나중에 액세스할 수 있도록 변수로 저장할 것입니다. 어느 경우든지 일시정지 메뉴를 표시하기 전에 입력 모드를 UI 전용으로 설정합니다. 다음으로는 그 작업을 하겠습니다.

  17. Pause Menu Reference 변수에서 드래그하여 Add to Viewport 노드를 추가한 다음, Set Game Paused 와 연결합니다. PausedTrue 로 설정합니다.

    클릭하면 최대 크기로 볼 수 있습니다. 일시정지 메뉴가 구성되었으니 이제 테스트해 보겠습니다.

  18. 컴파일(Compile) 하고 저장(Save) 한 다음 플레이(Play) 버튼을 눌러 에디터에서 플레이합니다.

게임 내에서 M 키 또는 할당한 다른 키를 누르면 게임이 일시정지되고 일시정지 메뉴가 표시되는 것을 볼 수 있습니다. 여기서 Resume 버튼을 눌러 게임플레이를 재개하거나, Quit 버튼을 눌러 게임을 종료하고 메인 메뉴로 돌아갈 수 있습니다.

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