멋쟁이사자처럼 X 넥슨 MOD Suppoters Hackathon Chapter 11 회고

멋쟁이사자처럼 X 넥슨 MOD Suppoters Hackathon Chapter 3주차 21일 회고

 

 

 

부족하지만 멋쟁이사자처럼 X 넥슨 MOD Suppoters Hackathon에 합격하게되어서 MOD를 먼저 사용해볼 수 있는 감사한 기회를 얻게 되었습니다...! 최선을 다해 공부하고, 리뷰하겠습니다! 부족한 글 보러 와주셔서 감사드립니다!

// 해당 글은 멋쟁이 사자처럼 공동 학습 교안을 바탕을 작성되었습니다.

오늘도 와줘서 고마워요 ㅠ

 

 

 

 

 

 

이번 챕터 11에서는 MOD의 UI 에디터에 대해서 공부하였다.

MOD에서는 UI 에디터를 통해서 화면 상에 출력되는 UI를 조작한다.

 

 

 

 

 

MOD의 UI 에디터는 아래와 같은 구성들을 지니고 있다.

 

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

 

 

UI 엔티티를 생성하는 방법은 2가지 방법이 있다.

• 기본 UI 모델을 선택해 배치하는 방법
• UI Preset을 활용하는 방법

모델리스트

 

 

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

 

 

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

• 게임 실행 시 캔버스에 배치했던 레이어대로 화면에 출력된다.

 

 

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

기본 UI 엔티티는 기본 도구를 통해 배치할 수 있고, 기본 도구에 추가되어있는 기본 UI 엔티티는 아래와 같다.

1. 이미지
2. 버튼
3. 스크롤뷰
4. 텍스트
5. 입력텍스트

 

 

5. UI Group 편집창 : UI Group의 선택 / 추가 / 삭제 기능 제공

 

 

 

우리는 스크립트를 이용해 UI 엔티티를 제어할 수 있다.

 

 

 

 

 

 

 

 

우리가 UI 엔티티를 생성하였다면, UI 엔티티에 접근해 엔티티를 제어해야한다.

UI 엔티티는 월드에서의 엔티티로의 접근법과 동일하게 접근할 수 있다.

 

즉 스크립트에서 엔티티 객체를 불러올 수 있다는 것이다.

 

 

 

 

버튼 클릭 시 서버에서의 처리를 요청하는 예시 코드

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")
    }

 

서버에서 처리 결과를 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를 띄우거나 숨길 수 있어야 한다. 

 

 

 

 

만약 몬스터를 잡고있는데 채팅창이 계속 떠서 방해하거나, 보스전에서 내 HP바가 안보이면 큰 낭패이지 않은가... ㅠㅠ

ㅠ

 

 

 

 

 

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 노출 처리는 아래와 같다.

void ShowPopupUI ()
{
    local PopupUIEntity_1 = _EntityService:GetEntityByPath("/ui/DefaultGroup/MODImage_1")
    local PopupUIEntity_2 = _EntityService:GetEntityByPath("/ui/DefaultGroup/MODButton_1")
    local PopupUIEntity_3 = _EntityService:GetEntityByPath("/ui/DefaultGroup/MODButton_1_1")
    local PopupUIEntity_4 = _EntityService:GetEntityByPath("/ui/DefaultGroup/MODText_1")
    local PopupUIEntity_5 = _EntityService:GetEntityByPath("/ui/DefaultGroup/MODButton_1_1_1")
    PopupUIEntity_1:SetEnable(true)
    PopupUIEntity_2:SetEnable(true)
    PopupUIEntity_3:SetEnable(true)
    PopupUIEntity_4:SetEnable(true)
    PopupUIEntity_5:SetEnable(true)
}

void HidePopupUI ()
{
    local PopupUIEntity_1 = _EntityService:GetEntityByPath("/ui/DefaultGroup/MODImage_1")
    local PopupUIEntity_2 = _EntityService:GetEntityByPath("/ui/DefaultGroup/MODButton_1")
    local PopupUIEntity_3 = _EntityService:GetEntityByPath("/ui/DefaultGroup/MODButton_1_1")
    local PopupUIEntity_4 = _EntityService:GetEntityByPath("/ui/DefaultGroup/MODText_1")
    local PopupUIEntity_5 = _EntityService:GetEntityByPath("/ui/DefaultGroup/MODButton_1_1_1")
    PopupUIEntity_1:SetEnable(false)
    PopupUIEntity_2:SetEnable(false)
    PopupUIEntity_3:SetEnable(false)
    PopupUIEntity_4:SetEnable(false)
    PopupUIEntity_5:SetEnable(false)
}

 

계층 구조를 사용한 UI 노출 처리는 아래와 같다.

void ShowPopupUI ()
{
    local PopupUIEntity = _EntityService:GetEntityByPath("/ui/DefaultGroup/MODImage_1")
    PopupUIEntity:SetEnable(true)
}

void HidePopupUI ()
{
    local PopupUIEntity = _EntityService:GetEntityByPath("/ui/DefaultGroup/MODImage_1")
    PopupUIEntity:SetEnable(false)
}

 

 

혁...신!

 

 

 

 

 

UI는 UI Group을 통해서 연관 기능이 있는 UI 엔티티끼리 묶어 관리한다.

예를 들어 체력바는 인벤토리와, 지도는 랭킹과 함께 UI Group으로 묶을 수 있다.

 

 

UI Group의 노출 및 숨김 처리도 위에서 이야기한 SetEnable 함수로 설정한다.

void ShowUIGroup_1 ()
{
    local UIGroup_1 = _EntityService:GetEntityByPath("/ui/UIGroup_1")
    UIGroup_1:SetEnable(true)
}

void HideUIGroup_1 ()
{
    local UIGroup_1 = _EntityService:GetEntityByPath("/ui/UIGroup_1")
    UIGroup_1:SetEnable(false)
}

• UI Group의 상시 노출을 설정하고자 하는 경우에는 DefaultShow 속성의 값을 true로 설정하자

 

 

 

 

UI Group에 텍스트 그룹을 추가하는 방법

 

1. UI Group 편집창에서 새 그룹을 추가하기

2. 기본 도구에서 텍스트 끌어다 추가하기

 

 

 

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

 

또한 SpriteGUIRendererComponent 의 다양한 속성값을 통해 텍스트박스의 배경색, 배경, 리소스 경로 설정 등 텍스트박스를 예쁘게 꾸며볼 수 있다.

 

 

 

 

위 텍스트 박스에 이미지를 추가할 수 도있다.

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

 

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

 

3. SpriteGUIRendererComponent의 ImageRUID 프로퍼티의 우측 버튼을 클릭해 Sprite Picker 메뉴를 선택한다.

 

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

오늘도 부족하디 부족한 글 보느라 정말 감사하고, 제발 또 봤으면 좋겠다.

꼭 다시 놀러와주라!

 

사랑해요 여러분