[멋쟁이사자처럼 X 넥슨 MOD Suppoters Hackathon] 4주차 회고 <UI 에디터의 이해>

UI 에디터 기본 활용&제어법

---

UI 에디터 살펴보기

게임에서는 UI를 GUI라고 부르기도 합니다. 주로 어떤 행동의 입출력을 담당하는데요,
MOD에서는 UI 에디터를 통해 화면 상에 출력되는 UI를 조작합니다.

UI 에디터의 구성은 위와 같습니다.

1. 모델 리스트 : 메이커에서 제공하는 다양한 UI Preset 활용 가능
2. UI 경로 정보 : 선택된 UI 엔티티의 경로 정보를 얻어오는 기능
3. 캔버스 : UI 엔티티의 배치 및 편집을 작업하는 공간
4. (실행 시 캔버스에 배치된 레이어대로 화면에 출력)
5. 기본 도구 : 이미지 & 버튼 등의 UI 엔티티 배치 가능
6. UI Group 편집창 : UI Group의 선택 / 추가 / 삭제 기능 제공

---

기본 UI 엔티티

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

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

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

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

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

---

UI Preset

효율적인 작업을 위해 MOD에서는 게임에서 통용되는 UI를 프리셋 형태로 제공하고 있습니다.
UI Preset은 자주 사용하는 UI들, 스크립트가 포함되어 있습니다.

---

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

UI 엔티티는 클라이언트 공간에서만 존재하므로 서버에서는 접근할 수 없습니다. 따라서 UI 엔티티나 엔티티의 컴포넌트를 받아올 때는 오직 클라이언트 함수에서만 참조해야 합니다. 서버에서 처리된 내용을 UI로 출력하거나 UI를 통해 입력한 내용을 서버에서 처리해야 할 때는 실행제어를 이용해 각 공간에서 액션을 수행하도록 해야합니다.

---

UI 스크립트 예시

1. 버튼을 클릭 했을 때, 서버에서 처리를 요청하는 예시 코드

Function:
    [server only]
    void OnbeginPlay()
    {
        local button = _EntityService:GetEntityByPath("ButtonEntityPath") 
        -- 가져 올 버튼 엔티티 경로를 "ButtonEntityPath"에 입력합니다.
        button:Connect("ButtonClickEvernt", self.OnButtonClickClient, self)
    }

    [client only] 
    Void OnButtonClickClient()
    {
        --processing in client..
        self:OnButtonClickServer()
    }

    [server] 
    void OnButtonClickServer()
    {
        log("Start processing on the server")
    }

2. 서버에서 처리 결과를 UI로 출력할 때의 예시 코드

Property:
    [sync]
    number time=0

Function:
    [server only]
    void OnUpdate(number delta)
    {
        self.time = self.time + delta
        if self.time >= 3 then
            self.time = 0
            self:ShowToastMessage("Time Reset")
        end
    }

    [client] 
    void ShowToastMessage (string text)
    {
        local toastUiEntity = _EntityService:GetEntityByPath("UIEntityPath") 
        -- 가져 올 UI 엔티티 경로를 "UIEntityPath"에 입력합니다.

        local textComponent = toastUIEntity.TextComponent

        -- print toast message
        textComponent.Text = text
        toastUIEntity:SetEnable(true)

        --reservate hide toast message
        local callback = function()
                toastUIEntity:SetEnable(false)
            end
        _TimerService:SetTimerOnce(callback,3)
    }

---

상황과 조건에 따른 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)
}

만약 여러개의 토스트메시지를 한번에 띄우거나 숨겨야하는 경우

엔티티의 노출 처리를 효율적으로 관리할 수 있는 계층구조를 활용할 수 있습니다.

---

UIGroup을 활용한 UI 관리 및 제어

UIGroup은 기능 별로 연관된 기능이 있는 UI 엔티티끼리 묶어 관리할 수 있습니다.
메이커에서는 맵 레이어처럼 보이며, 기능 개념은 폴더에 가깝습니다
생성된 UIGroup은 UIGroup에 속한 UI 속성에 맞춰 이름을 변경할 수 있습니다.
편집 창에서 UIGroup 이름을 더블 클릭하거나, 워크스페이스의 컨텍스트 메뉴에서 Rename을 선택해 변경할 수 있습니다.