위젯을 사용하여 커스텀 UI를 표시하도록 지원하는 몇 가지 장치가 있습니다. 템플릿에 소개된 장치는 저마다 다른 특정한 방식으로 UI를 표시합니다. 템플릿의 각 방에는 방에 소개된 장치와 커스텀 UI 표시 방법에 대한 정보가 나와 있습니다.
템플릿을 플레이테스트하여 UI 샘플을 확인해 보세요.
아래 표에는 템플릿에 표시된 장치, 장치 페이지로 연결되는 링크, 장치를 찾을 수 있는 방 번호가 나와 있습니다.
| 장치 | 방 번호 | 장치 이미지 |
|---|---|---|
1 |  | |
1 |  | |
2 |  | |
HUD 컨트롤러 장치(퀵바) | 2 |  |
3 |  | |
3 |  | |
3 |  | |
대화 장치 | 4 |  |
사용자 위젯 타입
기능 템플릿의 거의 모든 장치는 사용자 위젯을 통해 HUD를 제어하고 커스텀 UI를 표시합니다.
게임플레이 중에 장치가 트리거되면 사용자 위젯이 HUD에 커스텀 플레이어 UI를 표시하고, 장치는 UMG 위젯에 바인딩됩니다. 즉, 플레이어가 장치와 상호작용하면 UI가 업데이트되어 업데이트된 플레이어 정보가 표시됩니다.
사용자 위젯에는 사용자 위젯(User Widgets)과 모달 대화창 베리언트(Modal Dialog Variant)라는 두 가지 타입이 있습니다. 두 위젯 타입 모두 아무 UMG 위젯이나 사용하여 커스텀 UI를 제작할 수 있습니다.
사용자 위젯은 커스텀 UI를 제작할 때 사용하는 기본 위젯입니다.
모달 대화창 베리언트는 팝업 대화창 장치에만 사용할 수 있습니다.
예를 들어 대화 장치(Conversation device)에서 컨버세이션 뱅크를 사용하여 대화 UI를 만들면, 모달 대화창 베리언트(Modal Dialogue Variant)로 자신만의 대화 UI를 위한 커스텀 룩을 만들 수 있습니다.
Verse UI 유틸리티
Verse UI 유틸리티는 Verse 기반 사용자 인터페이스(UI) 유틸리티의 집합입니다. 이러한 유틸리티는 Verse의 여러 다양한 UMG 위젯을 제어 및 생성하며, Verse 장치를 사용해 HUD에 UI를 표시합니다.
Verse에서도 UMG 에디터에서 하던 작업과 매우 비슷하게 오버레이(Overlays) 또는 스택 박스(Stack Boxes) 등의 컨테이너를 사용하여 레이아웃을 만들 수 있습니다. 컨테이너 내에서 text_block, material_block, image_block 등의 위젯은 텍스트, 머티리얼 또는 이미지를 삽입하는 데 사용됩니다. 이러한 Verse 위젯은 게임 내 이벤트에 반응할 수 있으며, 다른 Verse 위젯과 함께 사용할 수 있습니다.
Verse 위젯은 두 번째 홀의 뒤쪽에 있는 두 번째 방에 소개되어 있으며, 각 위젯에 대한 예시가 함께 마련되어 있습니다. material_block 위젯이 UI 머티리얼을 제어하고 text_size 위젯이 HUD에 있는 text_block의 UI 텍스트 크기를 제어합니다.
그리고 player_input 위젯이 키 바인딩에 따라 커스텀 UI 구성 요소를 HUD에 매핑합니다.
| 머티리얼 블록 | 텍스트 크기 | 플레이어 입력 |
|---|---|---|
 |  |  |
Verse를 사용하여 위젯을 제어하는 방법에 대한 자세한 내용은 위젯 타입 및 Verse로 UI 생성하기의 문서를 참고하세요.
모든 Verse 스크립트는 유저 인터페이스 템플릿(User Interfaces Template) 프로젝트에서 사용할 수 있습니다. Verse 익스플로러에서 다음과 같은 Verse로 스크립팅된 UI 파일을 찾을 수 있습니다.
materialblock_basic_device.verse
materialblock_gameplay_device.verse
textsize_device.verse
hud_keybind_demo_device.verse
머티리얼 블록
material_block은 Verse 코드로 제작된 커스텀 위젯 내에서 슬롯 중 하나로 사용됩니다. 게임플레이 중에 material_block은 Verse를 통해 머티리얼 파라미터를 조작할 수 있도록 해 줍니다. 이를 사용하여 UI 머티리얼/머티리얼 인스턴스가 HUD에서 표시되고 행동하는 방식을 변경할 수 있습니다. 이는 image_block을 통해 Verse에서 텍스처를 사용하는 방식과 유사합니다.
material_block은 Verse 코드에서 다음과 같은 다양한 방식으로 사용됩니다.
보다 동적인 UI를 제작하기 위해 머티리얼 파라미터를 사용하여 머티리얼의 크기, 동작, 외형을 설정할 수 있습니다.
머티리얼이 게임플레이를 바탕으로 동적으로 업데이트되도록 Verse의 값을 머티리얼 파라미터로 전달합니다.
프로젝트에서 material_block을 사용하는 방법에 대한 자세한 내용은 머티리얼 블록 문서를 참고하세요.
텍스트 크기
text_size 프로퍼티는 text_block 위젯의 일부로, text_block 위젯을 사용하는 플레이어의 UI에 렌더링되는 텍스트의 크기를 커스터마이징할 수 있습니다.
Verse에서 text_block은 위젯 타입이며, Verse로 제작된 위젯 내에 삽입되고, 텍스트 스트링을 렌더링합니다.
커스텀 text_size 프로퍼티는 Verse 코드를 사용하여 다음과 같은 텍스트 어트리뷰트를 제어합니다.
크기
순위
컬러
플레이어 입력
플레이어 입력은 플레이어 데이터를 수신하는 데 사용되는데, 버튼이 눌릴 때 UI 컨트롤을 언제 HUD 어디로 매핑할지 코드에 알려줍니다. UMG에서는 사용자 위젯에서 액션 위젯이 사용될 때 이 기능이 작동하고, 향상된 입력 액션 필드가 키 바인딩을 통해 입력 액션에 연결됩니다.
위젯에서 키 바인딩은 재장전, 사격, 웅크리기, 서기로 매핑됩니다.
템플릿에서 위젯이 플레이어에게 추가되면 입력 매핑이 Verse에 추가됩니다. 그러면 입력 액션이 해당 플레이어에게 자동으로 연결되어 UMG 위젯이 해당 입력 액션에 대한 올바른 키 바인딩으로 업데이트됩니다.
UI 엘리먼트를 플레이어에게 매핑하려면, Verse 코드에서 먼저 플레이어를 탐지한 후 PlayerInput을 사용하여 다음으로 매핑된 키 바인딩에 따라 커스텀 UI를 HUD에 매핑합니다.
이동형 매핑(Traversal Mapping)
원거리 무기 매핑(Ranged Weapon Mapping)
그런 다음 PlayerInput.AddInputMapping이 사용되어 UMG 위젯 UI를 플레이어의 웅크리기 및 서기 키 바인딩에 매핑합니다. UI는 등록된 이벤트 OnPlayerAdded를 통해 플레이어에게 매핑됩니다. 마찬가지로, 매핑은 등록된 이벤트 OnPlayerRemoved를 통해 제거됩니다.
UI 샘플
각 장치의 UI 샘플은 다음 세 가지 카테고리로 나뉩니다.
머티리얼로 제작
텍스처로 제작
머티리얼과 텍스처로 제작
장치 부스 옆의 볼륨 안으로 걸어들어가면 커스텀 UI 표시를 트리거합니다. 세 가지 샘플은 UMG의 가능성뿐만 아니라, 자신의 UI에 적용할 수 있는 레벨 오브 디테일과 디자인도 선보입니다. 일부 볼륨은 피해를 유발하고 체력 파워업을 제공합니다. 이런 식으로 UI의 변화를 실시간으로 볼 수 있습니다.
모든 UI 샘플은 게임 내 유저 인터페이스 섹션의 튜토리얼을 사용하여 재현할 수 있습니다. 아래는 샘플 UI 디자인, UI 제작에 사용된 사용자 위젯 타입, 비슷한 UI를 제작하는 방법을 알려 주는 튜토리얼의 목록입니다.
| UI 샘플 | 위젯 타입 | 튜토리얼 |
|---|---|---|
HUD 메시지 | ||
 | 사용자 위젯 | |
 | 사용자 위젯 | |
 | 사용자 위젯 | |
팝업 대화창(Pop-Up Dialog) | ||
 | 모달 대화창 베리언트 | |
 | 모달 대화창 베리언트 | |
 | 모달 대화창 베리언트 | |
HUD 컨트롤러(HUD Controller) | ||
 | 사용자 위젯 | |
 | 사용자 위젯 | |
 | 사용자 위젯 | |
 | 사용자 위젯 | |
 | 사용자 위젯 | |
 | 사용자 위젯 | |
 | 사용자 위젯 | |
HUD 컨트롤러 - 퀵바(HUD Controller - Quickbar) | ||
 | 사용자 위젯 | |
 | 사용자 위젯 | |
 | 사용자 위젯 | |
 | 사용자 위젯 | |
스탯 크리에이터(Stat Creator) | ||
 | 사용자 위젯 | |
 | 사용자 위젯 | |
 | 사용자 위젯 | |
스킬 판정 상호작용(Skilled Interaction) | ||
 | 사용자 위젯 | |
 | 사용자 위젯 | |
 | 사용자 위젯 | |
대화 장치(Conversation Device) | ||
 | 컨버세이션 뱅크 | |
타이머 장치 | ||
 | 사용자 위젯 | |
 | 사용자 위젯 | |
 | 사용자 위젯 |