MOD project 13

UI에디터의 이해

 

게임에서는 UI를 GUI라고 부르기도함. 주로 어떤 행동의 입출력을 담당함.

 

UI의 구성

1.모델리스트: 메이커에서 제공하는 다양한 UI Preset 활용 가능

2.UI 경로 정보: 선택된 UI엔티티의 경로 정보를 얻어오는 기능

3.캔버스: UI엔티티의 배치 및 편집을 작업하는 공간

4.기본 도구: 이미지& 버튼등의 UI엔티티 배치 가능

5.UI Group의 선택,추가,삭제 기능 제공

 

UI엔티티를 통해 UI를 편집하기 위해서는 가장 먼저 조작할 UI엔티티가 필요함.

UI 엔티티를 생성하기 위한 방법은 2가지가 존재함.

 

UI엔티티 생성법

기본 UI모델을 선택해 배치하는 방법

UI Preset을 활용하는 방법

 

기본 UI엔티티

 

기본 UI 엔티티는 기본 도구를 통해 배치할 수 있음.

기본 도구에 추가되어있는 기본 UI 엔티티로는

이미지, 버튼, 스크롤뷰, 텍스트, 입력텍스트의 5가지 요소가 존재합니다.

각 엔티티들은 해당 요소를 포함하는 컴포넌트들을 가지고 있으며,

기본 UI 엔티티간의 조합을 통해 특정 기능을 수행하는 UI 제작이 가능합니다.

 

UI Preset

자주 사용하는 UI들, 스크립트가 포함되어 있습니다.

 

스크립트를 이용한 UI 엔티티 제어

 

UI엔티티를 생성하였다면, UI엔티티에 접근해 엔티티를 제어해야함.

월드에서의 엔티티로의 접근법과 동일.

 

상황과 조건에 따른 UI노출처리

 

UI 엔티티는 화면의 입출력을 담당하는 엔티티여서, 상황과 조건에 따라 UI를 띄우거나 숨길 수 있어야 함

Entity 함수인 setEnable 을 통해 알림 팝업 및 토스트 메시지를 띄우는 기능을 구현할 수 있음.

void ShowToastMessage ()
{
    local toastUIEntity = _EntityService:GetEntityByPath("/ui/.../EntityPath")
    toastUIEntity:SetEnable(true)
}
 
void HideToastMessage ()
{
    local toastUIEntity = _EntityService:GetEntityByPath("/ui/.../EntityPath")
    toastUIEntity:SetEnable(false)
}

함수에 따라 toastUIEntity:SetEnable() 의 boolean 값을 바꿔줌으로써 토스트메시지가 상황에 따라 출력되거나 숨겨지도록 할 수 있음.

 

UI Group활용 방법

 

UI의 효율적인 관리를 위해 UI Group으로 연관 기능이 있는 UI엔티티끼리 묶어 관리함.

 

그룹에 텍스트를 추가하는 방법

UITransformComponent 

UI는 MOD 상에서 가상의 좌표계 역할을 함.

따라서 UI 위치 좌표는 PosX PosY를 통해 설정할 수 있음.

좌표를 기준으로 중앙 또는 상하좌우를 선택할 수 있음

UITransformComponent 는 배치한 텍스트 박스의 위치와 크기를 설정할 수 있는 컴포넌트

 

SpriteGUIRendererComponent

다양한 속성값을 통해 텍스트박스의 배경색, 배경, 리소스 경로 설정 등

텍스트박스를 예쁘게 꾸며볼 수 있음.

 

텍스트 박스에 이미지 추가하기

 

1. 메이커의 UI 버튼을 눌러 UI 에디터로 이동하여 UIGroup 에서 해당 그룹으로 이동

2. 좌측의 기본도구에서 이미지를 클릭해 이미지 UI를 추가

3. spritrenderercomponent의 imageRUID 프로퍼티의 우측 버튼을 클릭해 spritepicker메뉴 선택

4. 프로퍼티를 조정해 이미지 UI의 크기와 위치를 설정해줍니다.