언리얼 엔진 5 문서가 에픽 디벨로퍼 커뮤니티로 이전되었습니다

Unreal Match 3 (언리얼 매치 3) 샘플 게임의 UI 는 UMG UI 디자이너 와 블루프린트 비주얼 스크립팅 를 통해 만들어졌습니다. 이 샘플에는 프론트 엔드 메뉴에서부터 게임내 HUD 까지, 여러가지 다양한 UI 요소를 선보이고 있으며, 그 각각은 모바일 디바이스를 염두에 두고 디자인되었습니다.

이 글에서는 메뉴 각 항목을 집중조명하면서 제작 도중의 고려사항을 짚어보고, UI 용 아트 제작시 주의해야 할 점, 종횡비가 다른 여러가지 모바일 디바이스에 맞는 UI 스케일 구성법, UI 최적화 방법은 물론 작업방식에 도움이 되어 작업 속도를 올려줄 수 있는 팁과 정보에 대해서도 논해보겠습니다.

타이틀 스크린

Title Screen (타이틀 스크린)은 Content/UI 폴더 안에 TitleScreen 위젯 블루프린트로 찾을 수 있습니다. 일차적으로 텍스트 위젯 몇 개와 애니메이션이 적용된 버튼 하나로 구성되어 있습니다. 플레이어가 버튼을 클릭 또는 누르면, 게임의 메인 메뉴로 이동됩니다. 이 그래프에서는 타이머를 통해 펄스 애니메이션을 5 초마다 호출하여 재생하고 있습니다. 버튼을 클릭하면, 메인 메뉴 위젯 블루프린트가 생성되어 뷰포트에 추가시키고 타이틀 스크린을 제거합니다.

타이틀 스크린에 사용된 버튼 구성은 샘플 전반적으로 꽤 자주 사용됩니다.

여기서 Button 을 Scale Box 로 둘러싸서 전체 스케일을 연속적으로 조정할 수 있도록 했습니다. 버튼 자체 구성은 Hovered, Normal, Pressed 상태에 초록색 버튼 배경을 사용하도록 할당합니다. 그런 다음 Image (아이콘) 포함 Scale Box 에도 Overlay 를 사용하여 전체 버튼 크기와 무관하게 아이콘 크기 조절이 가능하도록 했습니다.

아이콘을 배경에 직접 굽지 않은 것은, 필요에 따라 교환해 쓸 수 있도록 하거나 앞으로 다른 배경을 사용하고자 할 때 보다 쉽게 바꿀 수 있도록 하기 위해서입니다.

메인 메뉴

Main Menu 는 Content/UI 폴더 안에서 MainMenu 위젯이라는 이름으로 찾을 수 있습니다. 허브는 플레이어가 여러가지 동작을 할 수 있는 곳인데, 이 화면에서는 열 개의 버튼을 통해 설정 화면, 게임내 스토어, 게임 플레이, 레벨 선택 등이 가능합니다. 모바일 디바이스에서 플레이하는 경우, (Android냐 iOS냐) 플랫폼에 따라 플레이어는 플랫폼 전용 순위표와 업적을 열어볼 수 있습니다.

이 위젯 블루프린트용 그래프는 플레이어가 버튼 중 하나를 클릭하면 새로운 스크린 메뉴 (세팅, 레벨 선택, 스토어 등) 화면으로 전환되도록 구성되어 있으며, 먼저 플레이어가 그 화면을 열어볼 수 있는지 검사한 다음, 없으면 그에 맞게 표시할 위젯 블루프린트를 생성하여 다음 번 화면에 접근할 때 사용할 변수로 저장합니다. 이를 통해 사용자가 각 화면을 얼어볼 때마다 생성/소멸하지 않도록 할 수 있습니다.

이 화면 구성시 디자인 결정사항 중 하나는 상단과 하단에 걸쳐있는 버튼을 어떻게 배치할 것인가 입니다.

그 결정은 Uniform Grid Panel 을 사용하여 각 버튼을 저장하는 것입니다. Horizontal Box 로 쉽게 할 수도 있었지만, 그러지 않았습니다. 그렇게 함으로써 얻는 이등은, 디테일 패널에서 추가되는 각 자손에 더할 슬롯 패딩 양을 지정할 수 있습니다 (각 버튼마다 개별적으로 추가해 주지 않아도 됩니다). 버튼에서 해 줘야 하는 작업이라고는, 가운데 정렬만 해 주면 그리드 패널 내 고른 간격으로 배치될 것입니다.

옵션 메뉴

Options Menu (옵션 메뉴)는 Content/UI 폴더 안에 OptionsMenu 라는 이름의 위젯 블루프린트로 찾을 수 있습니다. 왼쪽 그림에서 보듯이, 옵션 메뉴의 용도를 변경하여 옵션 버튼이 눌리면 메인 메뉴와 게임내 디스플레이 양쪽에 사용하고 있습니다. 컨텍스트에 따라 콘텐츠가 살짝 바뀌며 부가 옵션이 제공되고 양식화된 처리가 가능합니다.

이 위젯 블루프린트의 그래프에는 Global Game Instance 블루프린트에 의해 변경되고 처리되는 로드/저장 옵션 로직이 들어있습니다. 또한 플레이어가 게임내에서 옵션에 접근하는지 아니면 메인 메뉴에서 접근하는지 검사한 뒤 하단에 표시되는 버튼을 교환하거나 배경색 활성화/비활성화가 가능합니다.

게임내 옵션 메뉴는 특정 동작 수행 후 Confirmation Screen (확인 화면)이 사용되는 곳 중 하나입니다. 일반적으로 "파괴성" (게임 종료, 아이템 구매, 아이템 삭제 등의) 동작 확인을 위한 UI 화면을 만들어서, 사용자가 의도치 않게 무언가를 선택하거나 동작을 수행하지 못하게 하는 데 쓰입니다.

이 화면은 프로젝트 전반적으로 꽤 쓰이므로 ConfirmationScreen 라는 별도의 위젯 블루프린트로 만들어 뒀습니다 (위치는 Content/UI 폴더). 그러면 우리는 사용자가 선택한 동작을 취소하기 위한 방편을 마련해 주고플 때마다 이 블루프린트를 호출하여 표시하면 됩니다. 아래는 OptionsMenu 위젯 블루프린트 안에 사용된 스크립트로, Accept 와 Back 버튼을 위한 위젯을 생성/표시하고, 그 버튼에 옵션 메뉴에 대해 취하고자 하는 동작을 해 주면 됩니다.

게임내 디스플레이

주요 게임내 HUD 는 Content/UI 폴더의 GameScreen 위젯 블루프린트에 들어있습니다. 이 위젯 블루프린트가 정의하는 개별 조각들은 전체 디스플레이에서 각기 다음과 같은 부분을 담당합니다: 점수판 ( ScoreBoardWB 위젯 블루프린트), 폭탄 파워 ( PowerBarHorz 위젯 블루프린트), 세팅 버튼 ( OptionsMenu 위젯 블루프린트 표시).

GameScreen 위젯 블루프린트의 그래프에는 옵션 메뉴를 표시하는 로직만 들어있습니다. 점수판과 폭탄 파워 미터 업데이트 로직은 각자의 위젯 블루프린트에서 처리하여 (한 위젯 블루프린트에 모든 것을 넣었을 때에 대비해) 모듈성이 높으면서 판독이 쉽도록 처리하고 있습니다.

점수판 표시

Score Board (점수판) 위젯 블루프린트는 현재 점수, 남은 시간, 최고 점수, 메달 획득에 필요한 점수 등 게임에 중요한 정보를 표시합니다. 시간과 점수 변수는 (최고 점수나 메달 점수와는 달리) 게임플레이 도중 수시로 바뀝니다. 시간 표시를 위해 Size Box 를 사용하서 헤더 텍스트에 맞추고, 시간 값은 고정된 위치에 표시합니다. 비슷하게, 점수 표시는 헤더가 자동 으로, 값이 채우기 로 설정된 Horizontal Box (가로 박스)를 사용합니다. 가로 박스 자체 역시도 가로 채우기로 설정하여 가변 표시 점수에 고정된 레이아웃을 제공합니다.

또 한가지 점수판 관련 결정사항은, 정보 업데이트 부분을 Event Based 업데이트로 이동시켜, 모든 것을 지속적으로 업데이트하는 Tick 에 의존하지 않는 것입니다. 점수 업데이트나 타이머 값 변화를 매 프레임마다 검사할 필요가 없으므로, 엄청난 절약이 됩니다. 여기에 보조를 맞추어 인밸리데이션 박스 사용을 통해 나무 배경 조각을 캐시에 저장합니다. 이런 식으로 그 나무 조각을 한 번 그리고 캐시에 넣으면 매 프레임 다시 그릴 필요가 없습니다 (추가 절약입니다).

폭탄 미터기 표시

Bomb Power Meter (폭탄 파워 미터, PowerBarHorz 위젯 블루프린트) 표시 처리 관련해서는 Size Box 를 사용하여 커스텀 폭/높이 값으로 덮어쓰고 있습니다. Progress Bar 의 Fill Image 로는 머티리얼이 사용되었습니다 ( Content/Materials 폴더 안의 M_JaggedRockFire_MeshEmit_Lit ).

점수판과 비슷하게, 파워 미터 역시 이벤트로 업데이트되는데, Tick 은 비용면에서 더욱 비싸기 때문입니다.

Progress Bar 는 Set Percent 함수로 처리되며, 20% 씩 오르도록 설정되어 있습니다 (이 부분은 Match 3 Game Mode 에서 받습니다).

떠다니는 텍스트 표시

점수 획득시 표시되는 떠다니는 텍스트는 여러가지 다양한 블루프린트를 통해 처리됩니다. 첫째는 (마찬가지로 Content/UI 폴더에 있는) FloatingScore 위젯 블루프린트에서 텍스트 표시를 처리합니다. 둘째로 Content/Blueprints 폴더 안의 FloatingScoreBP 는 스폰되는 액터로 FloatingScore 위젯 블루프린트를 기반으로 한 3D 위젯 컴포넌트 를 포함하고 있습니다. 이 액터가 스폰되면, 일정 딜레이 이후 텍스트 페이드 아웃 애니메이션을 호출한 뒤 스폰된 액터를 소멸시킵니다 (아래 그림).

Floating Score 스폰 위치 결정은 ( Content/Blueprints 폴더의) GameLevel_GM 블루프린트와 ( Content/Blueprints/Tiles 폴더의) Tile_BP 블루프린트가 합니다. Tile_BP 안에는 이벤트를 사용하여 매치가 언제 시도되었는지 알아냅니다. 점수 획득이 있으면 매치가 일어난 위치를 GameLevel_GM 에 전달하여 몇 점인지를 처리한 뒤 매치 위치에 Floating Text 를 스폰합니다.

게임 오버 표시

Game Over (게임 오버) 화면은 (You Win 과 You Lose) Content/UI 폴더에서 VictoryScreen 위젯 블루프린트로 찾을 수 있습니다. 게임이 끝났을 때도 같은 위젯 블루프린트를 호출하지만, 세션의 결과에 따라 업데이트됩니다.

이겼으면, 파랑 배경과 획득한 메달이 표시됩니다. 졌으면, 빨강 배경과 "you lose" 텍스트로 대체되어 표시됩니다.

이겼든 졌든 상관없이, 획득한 점수가 표시되고 그 옆에는 메인 메뉴로 돌아가기, 플랫폼 전용 순위표 또는 업적 표시, 레벨 다시 플레이 등의 버튼이 있습니다.

화면 하단에 나타나는 버튼은 GameOverButtons 위젯 블루프린트 안에 배치되어 있습니다. Game Over Screen 위젯과 분리시킨 이유는, 다른 화면에서도 사용자에게 매번 그런 옵션을 표시할 때마다 다시 만들 필요 없이 바로 용도 변경하여 재사용할 수 있게 만들기 위해서입니다.

순위표 / 업적

레벨 선택

Level Select Menu (레벨 선택 메뉴)는 Content/UI 폴더 안에 LevelSelect 위젯 블루프린트로 찾을 수 있습니다. 이 화면을 통해 플레이어는 게임 내 레벨 전환은 물론 각 레벨에서 메달 획득에 필요한 점수를 알 수 있습니다.

이 화면 이동에 있어서의 핵심 함수성은 Level Select 위젯 블루프린트에 있지만, 정보는 역시 Content/UI 폴더에 위치한 LevelSelectWidget 라는 다른 파이프 연결됩니다.

사용자가 레벨을 구매하지 않은 경우, Accept Button 을 Store 링크로 대체하여 사용자는 스토어 메뉴에 바로 접근하여 구매할 수 있습니다.

레벨 선택 위젯

Level Select Widget (레벨 선택 위젯)은 공개적 노출된 변수를 포함한 하나의 소스에 모든 정보를 저장, 앞으로 레벨을 쉽게 추가할 수 있도록 만들어졌습니다. 이런 식으로 작업하면, Level Select 위젯 블루프린트를 뒤져 뭐가 어디로 가야 하는지 포맷 걱정도 없이 그냥 구현해 넣은 위젯 블루프린트의 디테일 패널에서 바로 정보를 제공해 주기만 하면 됩니다.

이런 구성은 얼마든지 다른 방식으로 사용할 수 있습니다. 각 레벨에 Level Select 위젯을 추가하고, 각 레벨에 표시할 정보의 기본값을 정의한 뒤, 메뉴에서 각 Level Select 위젯을 순환시킬 때 표시할지 말지 정하면 됩니다. 다른 방식은 Level Select 위젯을 하나 만들고 스크립트를 통해 위젯으로 흘러 들어가는 정보를 업데이트하는 것입니다 (Unreal Match 3 의 구현 방식입니다).

플레이 방법

How To Play (플레이 방법) 화면은 Content/UI 폴더에 HowToScreen 위젯 블루프린트라는 이름으로 있습니다. 이 화면은 게임 플레이 방법을 설명해 주며, 레이아웃이 꽤나 간단합니다. 텍스트용 Text 위젯 다수로 구성되며, 화면 레이아웃과 포맷은 일관성을 위해 메인 메뉴와 같게 합니다.

다른 여러 화면과 마찬가지로, 플레이 방법 화면은 Google 플레이 스토어 인증에 필수인 기능이 몇 가지 구현되어 있는데, 디바이스의 "뒤로" 버튼으로 화면을 돌아 나올 수 있어야 합니다.

Android 뒤로 버튼

Android 앱 필수사항으로, 디바이스의 뒤로 버튼을 누르면 각 화면 뒤로 돌아가는 기능을 구현해야 합니다. 위젯 블루프린트는 플레이어 컨트롤러, 캐릭터, 심지어 액터처럼 블루프린트 안에서 전형적으로 찾을 수 있는 입력 함수에 직접 접근할 수 없습니다. 그래서 ( Content/Blueprints 폴더의) Match3PC Player Controller 에서 Android Back 명령이 이벤트 디스패처를 호출하면, 각 메뉴에서 그리로 바인딩을 하여 함수성을 제공해 주면 됩니다.

아래는 게임 방법 화면에 Android 뒤로 버튼 함수성을 제공하는 데 사용된 스크립트입니다.

Android 버튼이 눌리면 Match 3 PC 블루프린트에서 호출된 이벤트 디스패처에 이벤트를 바인딩하고 있습니다. 그런 다음 Branch 노드로 게임 방법 화면이 보이도록 한 뒤 메인 메뉴 위젯을 보이게, 게임 방법 화면은 안보이게 만듭니다.

스토어 메뉴

스토어 화면은 Content/UI 폴더에서 StoreScreen 위젯 블루프린트라는 이름으로 찾을 수 있습니다. 이 화면의 레이아웃은 의도적으로 레벨 선택 레이아웃과 비슷하게 하여, 플레이어가 새 레벨을 풀면 레벨 선택 메뉴에서 선택하여 플레이할 수 있을 것입니다.

메인 메뉴에서 이 화면에 들어서면, 플레이어는 확인 창을 보게 됩니다 (ConfirmationScreen 위젯 블루프린트). 이 화면에서 아이템을 구매할 수 있으며, 플레이어는 계속 진행하지 않고 뒤로 갈 수 있습니다. 확인 메시지를 수락하면, 플레이어는 메인 스토어 메뉴로 나아갑니다.

이 화면의 콘텐츠는 대부분 보더, 오버레이, 텍스트 위젯, 이미지, 정렬을 위한 버티컬 박스로 되어있습니다. 레이아웃 구조로 인해, 메뉴 내비게이션을 복사/붙여넣기하여 레벨과 이 메뉴 사이의 전환은 물론 스토어에서 구매할 수 있는 아이템 "페이지" 추가가 가능합니다.

스토어에서 구매

추가 자료

추가 참고 자료는 아래 링크를 참고하세요:

• UI 요소 스케일 관련해서는, 다양한 디바이스용 스케일 UI 문서를 참고하세요.

• 이벤트 관련 최적화 관련해서는, 이벤트로 UI 업데이트 구동 문서를 참고하세요.

• 실전 사례, 팁과 정보 관련해서는 UMG 실전 사례 문서를 참고하세요.