언리얼5-36 C++ <Cpp 튜토리얼 - UMG와 유저 인터페이스(2)>

저번 글에 이어서 C++ 튜토리얼을 따라 메인 메뉴를 완성한 다음으로, 레벨이 시작된 후에 메인 메뉴를 뷰포트에 로드하는 '게임 모드 에셋'을 구성해보자

언리얼5-35 C++ <Cpp 튜토리얼 - UMG와 유저 인터페이스(1)>

 

콘텐츠 브라우저의 Content 폴더에서 빈 공간에 우클릭을 하고 블루플니트 클래스 항목을 선택한 뒤,

 

 

부모 클래스로 '프로젝트이름 GameModeBase'를 선택한 "MenuGameMode" 블루프린트 클래스와, 게임 내에서 마우스 커서를 보이게 하기 위해 Player Controller 클래스를 상속받은 "MenuPlayerController"라는 이름의 클래스를 생성한다

 

 

"MenuPlayerController" 클래스가 생성되고 나면 콘텐츠 브라우저에서 블루프린트 파일을 더블클릭해서 블루프린트 에디터를 연다

 

 

블루프린트 클래스 창이 열리면 디테일 창에서 "Show Mouse Cursor" 박스를 체크해서 마우스 커서가 보이도록 만들어준다

 

 

그다음에는 "MenuGameMode"를 편집할 차례이다

[언리얼에디터와 VIsual Studio가 열려있고, 컴파일까지 정상으로 한 상태에서 진행해야 원활하게 진행할 수 있다]

 

콘텐츠 브라우저에서 MenuGameMode를 더블클릭하여 열어줄 때, 만약 에디터 창이 바로 나오지 않을 때는 오른쪽 부분에 'Open Full Blueprint Editor'를 눌러주면 큰 에디터 화면이 뜬다

 

 

먼저 우리가 변수로 선언해 준 Starting Widget Class를 MainMenu 에셋으로 설정해서 게임 시작 시 메뉴로 뜨도록 만들어주고Default Pawn Class를 Pawn으로 설정해서 플레이어가 메뉴에 있을 때 이리저리 날아다니지 않도록 만들어준다

 

 

마지막으로 Player Controller Class를 방금 만든 "MenuPlayerController" 에셋으로 설정해서 메인 메뉴에 마우스 커서가 표시되도록 만들어준다

 

 

블루프린트를 컴파일한 뒤, 이제 게임에서 우리가 만든 게임 모드 블루프린트를 사용하게 만들기 위해서 레벨 에디터 창으로 돌아와 [Settings > World Settings] 항목을 선택한다]

 

 

그리고 월드 세팅 패널에서 Game Mode Override 항목을 "MenuGameMode" 에셋으로 설정해 준다

이제 레벨에 메인 메뉴를 로드하고 마우스 커서를 표시하는 플레이어 컨트롤러를 사용하도록 커스텀 게임 모드 애셋이 적용되었다

 

 

게임을 실행하고 New Game 버튼을 클릭하면 게임이 종료되지 않고 계속 머물게 되지만, Quit 버튼을 누르면 게임이 종료되는 것을 확인할 수 있다

 

 

이제 New Game 버튼을 눌렀을 때 표시될 New Game Menu를 구성할 차례이다

 

콘텐츠 브라우저에서 아까 전에 만들어둔 "NewGameMenu" 에셋을 연다

 

이 메뉴는 이름을 입력할 수 있는 텍스트 박스와 이름을 입력하기 전에는 누를 수 없는 게임 플레이 버튼, 그리고 메인 메뉴로 돌아가는 버튼으로 구성될 것이다

 

 

첫 번째로 할 것은 MainMenu를 만들었던 것처럼 'PANEL'섹션에서 'Canvas Panel'을 선택해서 끌어놓아 준 후에, 디테일패널에서 Visibility 항목을 Visiable로 변경해 준다

 

 

그리고 이번에는 이름 입력 박스를 만들기 위해서 입력 섹션에서 Text Box를 찾아서 배치한다

 

 

그리고 디테일 패널에서 Text Box의 이름을 NameTextEntry로 변경하고 이벤트 할당을 위해 Is Variable에 체크한 뒤

(325, 200) 위치에 (250x40)의 크기로 배치한다. 그리고 [Appearance > Text Style > Font]에서 폰트의 사이즈를 20으로 설정한다

 

 

그리고 Button을 끌어놓아서 (200, 300) 위치에 (200x100)의 크기로 PlayGameButton이라는 이름으로 배치하고 Is Variable을 체크한다

 

 

Text 블록도 버튼 안으로 끌어와 배치해주고 Text의 내용을 Play Game로 한 뒤, Visibility를 Not Hit-Testable(Self & All Children)으로 맞추고 텍스트 블록의 이름을 PlayGameText로 변경한다

 

 

이렇게 만들어진 게임 플레이 버튼의 경우에는 플레이어 이름 입력란이 비어있다면 작동하지 않도록 특수한 기능을 추가해야 한다

 

이것은 Behavior 섹션의 Is Enabled 체크 박스 옆에 있는 바인드 기능을 이용해서 새로운 함수를 만들면 된다

 

 

텍스트 박스가 버튼이 활성화될 수 있는 상태인지 확인하려면 왼쪽의 MyBlueprint 탭에서 VARIABLES 항목의 'NameTextEntry' 변수를 Get으로 가져오고 (단축키: Ctrl + 마우스 끌기)

빈 공간에 우클릭해서 Context Sensitive를 해제한 채로 GetText (Text Box) 함수를 검색하여 배치해 주고 연결해 준다

 

 

그리고 String타입의 Len을 검색해서 GetText와 연결해 준다 (자동으로 변환을 해준다)

 

 

마지막으로 Greater 연산자를 가져와서 그 길이가 0보다 큰 지 검사하면 된다

 

 

 

이제 메인 메뉴로 돌아갈 수 있도록 버튼을 추가해 보자

 

메인 메뉴에서의 게임 플레이 버튼과 비슷하지만 위치의 기준이 좌상단이 아닌 우하단 구석이 될 것이다

그러기 위해서는 NewGameMenu 블루프린트에 Button을 끌어다 놓고 디테일 패널의 슬롯 섹션에서 Anchors 드롭다운을 클릭한

다음, 팝업 메뉴에서 우하단 부분을 나타내는 모양을 선택한다

버튼의 이름을 MainMenuButton으로 변경한 다음 위치를 (-400, -200), 크기를 (200x100)으로 설정하고, Is Variable을 체크한다

 

 

이제 버튼 위에 텍스트 블록을 배치하고 이름을 MainMenuText로 변경하고 내용을 Main Menu로 변경한 뒤 Visibility를 Not Hit-Testable(Self & All Children)로 설정해 준다

 

 

 

마지막으로 두 버튼의 On Clicked 이벤트를 추가해보자

PlayGameButton과 MainMenuButton 모두 On Clicked 이벤트를 만들어준다

 

 

그리고 앞의 메인 메뉴 위젯에서처럼 각각 하나씩 게임 모드를 가져와서 형변환 해주고난 다음, 다음 Change Menu Widget 함수를 호출하게 만들어주면 된다

 

이때 메인 메뉴 버튼의 경우에는 다시 메인 메뉴 위젯을 열어주지만, 게임 플레이 버튼은 누르면 메뉴를 비활성화시킨 후 게임에서 더 이상 아무것도 할 수 없게 만들 것이다

보통 이 시점에서 첫 레벨을 로드하고, 오프닝 동영상을 재생하거나 폰을 스폰시켜 플레이어가 컨트롤할 수 있게 빙의하는 등의 처리를 하게 될 것이다

 

 

모든 작업을 마친 다음에는 블루프린트를 컴파일하고 레벨 에디터로 돌아간다

 

 

이제 게임을 플레이시켜서 테스트해보면 New Game 버튼을 누르면 다음 메뉴로 넘어가고, Main Menu 버튼을 누르면 이전 메인 메뉴로 돌아가지며 Quit 버튼을 눌렀을 때는 게임이 종료되는 것을 확인할 수 있다

 

또한 게임을 플레이했을 때 NameTextEntry 부분에 글자를 입력한 다음 Play Game 버튼을 누르면 메뉴가 사라지고 더 이상 동작이 불가능해지는데, 여기에 다른 이벤트를 호출해서 비밀번호를 입력해서 진행하는 등, 여러 방식으로 게임을 제작할 수 있다