06.25 Unreal 본캠프) 게임 흐름에 맞춘 메뉴 UI 구현하기

 

오늘 배운 것

 

1. 게임 메뉴 UI 디자인 하기

 1) 메뉴 위젯 생성하고 버튼 추가하기

 : 그동안은 게임 중에 나오는 위젯을 설계했다면, 이번에는 게임을 일시적으로 중단하고 시작하거나 종료하는 메뉴 위젯을 만들어 볼 것이다.

- Content Browser에서 UI - Widget 폴더에서 마우스 우클릭 -> User Interface -> Widget Bluprint 선택
  새로 생성되는 위젯은 이름은 WBP_MainMenu 라고 짓는다.
- 더블 클릭하여 열면, 중앙에 Designer 탭, 오른쪽에 Details 탭, 왼쪽에는 Hierarchy & Palette가 보인다.
- Canvas Panel을 놓아서 기본적인 바탕을 마련한다.
- 그 아래에 Border을 생성해서 바탕을 투명도를 주고 검정색 바탕화면으로 지정해준다.
  그래서 게임 실행 시 레벨의 모습이 잘 보이지 않도록 설정한다.

- Common - Button 위젯을 각각 Start 버튼 하나만 Canvas Panel 아래에 둔다.
  Button의 이름은 StartButton으로 변경한다.

- Alignment를 (0.5, 0.5)로 놓고 X, Y의 위치를 화면 크기의 절반으로 두면 가운데에 딱 배치될 수 있다.

- 각 버튼마다 Common - Text를 끌어다 놓는다.
  왼쪽 하단에 Hierarchy 창에 드래그 앤 드랍을 하면 편하다.
  텍스트의 이름은 StartButtonText로 지정한다.

 

 2) 메뉴 레벨 생성하고 설정하기

 : 흔히 게임 개발 시 메뉴 전용 맵을 만들어, 그 맵에서는 메뉴만 띄우도록 하고, 실제 게임이 시작되면 게임 레벨로 넘어가게 한다.

- 이 방식을 쓰면 "Menu UI와 Game Level"이 완전히 분리되어, 구조가 좀 더 명확해진다.
- File - New Level을 선택하고 Basic 템플릿으로 생성을 한다.
  Maps 폴더에 MenuLevel 이라는 이름으로 저장 해준다.

- Editor - Project Settings에 들어가서 Maps & Modes에서 Default Maps를 MenuLevel로 지정해서 저장한다.

 

2. 게임 흐름 내에 메뉴 UI 배치하기

 : 이 메뉴 위젯 (WBP_MainMenu)을 다양한 상황에서 표시하고, 숨기고, 다시 띄우는 로직을 단계별로 구현해야 한다.

1. 플레이 버튼을 누르면 Menu UI가 가장 먼저 뜨기
2. 게임 시작 시 자동으로 HUD를 띄우기
3. 메뉴가 나타날 때 마다, UI 입력 모드로 전환하여 버튼 클릭에 집중하게 만드는 방식으로 수정
4. 게임이 종료되면 메뉴가 다시 뜨도록 만들기

 

 1) Player Controller에 기본 위젯 오픈 함수 구현

 : 위젯을 어디서 만들고 관리할지는 프로젝트마다 다른데, 일반적으로 PlayerController가 UI를 다루기 좋다.

   게임 모드도 가능하지만, 멀티플레이를 고려하면 PlayerController가 Ui 담당이 좀 더 자연스러운 편이다.

public:
    // 메뉴 UI
    UPROPERTY(EditAnywhere, BlueprintReadWrite, Category = "Menu")
    TSubclassOf<UUserWidget> MainMenuWidgetClass;
    UPROPERTY(VisibleAnywhere, BlueprintReadOnly, Category = "Menu")
    UUserWidget* MainMenuWidgetInstance;

    UFUNCTION(BlueprintPure, Category = "HUD")
    UUserWidget* GetHUDWidget() const;
    // HUD 표시
    UFUNCTION(BlueprintCallable, Category = "HUD")
    void ShowGameHUD();
    // 메인 메뉴 표시
    UFUNCTION(BlueprintCallable, Category = "Menu")
    void ShowMainMenu(bool bIsRestart);
    // 게임 시작
    UFUNCTION(BlueprintCallable, Category = "Menu")
    void StartGame();

SpartaPlayerController.

SpartaPlayerController.cpp

- 게임 입력 vs UI 입력
   - 게임플레이 중 메뉴가 활성화되면, UI만 입력을 받오록 하거나, UI + 게임 둘 다 입력을 받도록 할 수 있다.
   - 이때 UI 마우스 포커스가 가도록 만들려면 SetInputMode 계열 함수를 사용해야 한다.
     SetInputMode 계열 함수를 통해 PlayerController가 어느 입력을 우선으로 처리할지 결정한다.
   - UI 전용 입력 모드로 전환하면, 플레이어의 마우스 입력과 키 입력이 먼저 UI로 전달된다.
     캐릭터 이동이나 시야 회전 등 게임 월드 입력은 잠시 비활성화되고, 버튼 클릭에 집중할 수 있다.
   - FInputModeUIOnly 구조체 생성 -> SetWidgetToFocus로 포커스할 UI 위젯 지정
   - SetInputMode(InputMode) 호출 -> 이제 마우스 클릭이나 키 입력이 UI를 먼저 처리
   - bShowMouseCursor = true로 마우스 커서를 보이게 설정
- 빌드한 후, BP_SpartaPlayerController 에서 MainMenuWidgetClass에 WBP_MainMenu를 할당한다.

 

 2) GameState에서 게임 흐름에 따라 UI 호출

SpartaGameState.cpp

 

 3) Start 버튼 클릭 이벤트에 함수 바인딩

- Designer 탭에서 StartButton 버튼을 선택하고, Details 패널에서 맨 위쪽에 버튼 이름을 지정 해주는 있다.
  그 옆에 Is Variable에 체크를 한다.
  그러면 맨 하단에 Events 들이 활성화되는 것을 볼 수 있다.

- Details 패널에서 하단에  Events 목록 중 On Clicked 옆에 +를 클릭한다.

- 그래프 탭이 열리면서 OnClicked (StartButton) 이벤트 노드가 자동 생성 이벤트 노드가 자동 생성되면서 로직을 구현할 수 있다.
- PlayerController에서 Start Game 함수를 가져와서 연결해준다.