멋쟁이사자처럼 X 넥슨 MOD Supporters Hackathon 6주차 회고

---

[MOD 강좌 Chapter 11] UI에디터의 이해

---

UI는 유저와 클라리언트가 소통을 할 수 있는 매개체

UI 에디터 전환 

상단 메뉴에서 UI 버튼을 눌러 UI 에디터로 전환

-> 플레이 화면에 노출 시킬 수 있는 UI 엔티티들이 Scene에 보임

 

UI 에디터 소개

번호	이름	설명
1	모델 리스트	메이커에서 제공하는 다양한 UI Preset을 활용할 수 있습니다.
2	UI 경로 정보	선택된 UI 엔티티의 경로 정보를 알 수 있습니다. 상위(부모) 경로 선택 시 해당 엔티티가 선택됩니다.
3	캔버스	UI엔티티를 배치하고 편집하는 작업 공간 입니다. 게임 실행 시 캔버스에 배치된 모습대로 게임 화면에 출력됩니다.
4	기본 도구	이미지나 버튼과 같은 UI 엔티티를 배치할 수 있습니다.
5	UI Group 편집 창	UIGroup의 선택 및 추가/삭제가 가능합니다.

 

UI 엔티티 생성

1) 기본 UI 모델을 선택해 배치

- 화면 왼쪽의 기본 도구를 사용해 간단하게 버튼, 이미지 등 UI 엔티티를 배치해 특정 기능을 수행하는 인벤토리, 스킬창 UI를 만들 수 있음

2) UI 프리셋 활용

UI 에디터는 게임에서 자주 사용하는 UI를 프리셋으로 만들어 제공하고 있습니다. 프리셋의 인벤토리, 상태창, 랭킹 UI 등을 배치한다면, 기본 UI 엔티티를 이용해 복잡한 구조를 하나하나 만들 필요 없이 UI를 빠르게 배치할 수 있음

기본 UI 엔티티

각의 모델을 선택하면 캔버스 중앙에 선택한 모델의 엔티티가 생성

 

UI Preset

MOD에서는 게임에서 통용되는 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 노출 설정은 Entity 함수인 SetEnable을 이용
알림 팝업이나 토스트 메시지를 띄우거나 숨길 때 SetEnable을 통해 노출하거나 숨김 가능

 

노출 설정 예시 코드

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

 

동일 계층인 여러 엔티티가 같은 순간에 나타났다 사라져야 한다면, 모든 엔티티의 Enable 설정을 작성

동일 계층 엔티티 Enable 처리 예시 코드

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

계층 구조를 활용한 노출/숨김 처리 예시 코드

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

 

UIGroup을 활용한 UI 관리 및 제어

UIGroup은 기능 별로 연관된 기능이 있는 UI 엔티티끼리 묶어 관리

메이커에서는 맵 레이어처럼 보이며, 기능 개념은 폴더 정도

UIGroup 편집

그룹 편집 창에서 UIGroup 생성과 삭제가가능

 

---

[MOD 강좌 Chapter 12] 알아두면 유용할 것들

---

플레이어 기본 속성 변경

모델 프로퍼티 명	원 컴포넌트원 프로퍼티 명	설명
speed	MovementComponent InputSpeed	플레이어의 기본 이동 속도 값을 정합니다. 값이 클수록 빠르게 움직입니다. 기본값은 1.2입니다.
jumpForce	MovementComponent JumpForce	플레이어의 기본 점프 높이를 설정합니다. 값이 클수록 높이 점프합니다. 기본값은 1입니다
walkAcceleration	RIgidbodyComponent WalkAcc	이동 가감속 값을 설정합니다. 값이 클수록 최대 속도에 빠르게 도달합니다. 기본값은 1입니다.
gravity	RIgidbodyComponent Gravity	플레이어가 받는 중력 값입니다. 값이 클수록 빠르게 떨어집니다. 기본값은 1입니다.
cameraDeadZone	CameraComponent DeadZone	입력한 범위까진 플레이어 아바타가 움직이더라도 카메라는 고정됩니다. X, Y값이 0일 경우 플레이어 아바타의 모든 움직임에 카메라가 반응합니다.
cameraSoftZone	CameraComponent SoftZone	SoftZone 영역을 설정합니다. 대상이 프레임의 영역에 들어오면 카메라가 방향을 바꾸어 DeadZone으로 되돌립니다.
cameraDamping	CameraComponent Damping	플레이어 아바타가 DeadZone을 벗어나 이동할 때 카메라가 쫓아가게 됩니다. 이때 화면을 급격하게 틀지 않고, 자연스럽게 플레이어 아바타를 따라가게 합니다. 값이 클수록 움직이는 플레이어 아바타를 부드럽게 따라갑니다.
cameraScreen	CameraComponent ScreenOffset	화면에서 DeadZone의 중심점 위치를 지정합니다. X, Y값은 (0,0)부터 (1,1)까지 입력할 수 있습니다..
cameraDutch	CameraComponent DutchAngle	카메라 회전 각도를 설정합니다. 큰 값을 입력할수록 화면이 시계 방향으로 회전합니다. 카메라는 입력한 값에 따라 반시계 방향으로 회전합니다.
cameraOffset	CameraComponent CameraOffset	카메라 위치를 입력 받은 값만큼 보정합니다. X, Y 좌표값은 절댓값입니다. 입력한 값만큼 카메라가 이동해 플레이어 아바타를 추적합니다.
message	ChatBalloonComponent Message	플레이어 아바타의 말풍선 안에 들어갈 내용을 입력합니다.
chatModeEnabled	ChatBalloonComponent ChatModeEnaled	채팅창에 입력한 대화가 말풍선으로 동시에 나타납니다.  비활성 상태가 기본입니다.
nameTag	NameTagComponent Name	플레이어의 이름표를 붙이거나 뗄 수 있습니다. NameTagComponent의 Enable 체크박스를 해제해 비활성화합니다.
damageSkinId	DamageSkinSettingComponent DamageSkinld	ID값을 입력해 데미지 스킨 종류를 정합니다.
damageDelayPerAttack	DamageSkinSettingComponent DelayPerAttack	데미지 값이 여러 번 화면에 보일 때 데미지 값 사이의 지연 속도(초)를 입력합니다.
triggerBodyBoxsize	TriggerComponent BoxSize	플레이어가 충격 감지하는 범위를 박스 크기 좌표 값으로 정합니다.
triggerbodyBoxOffset	TriggerComponent Offset	플레이어가 충격을 감지하는 박스의 위치를 좌표 값으로 정합니다.
maxHp	PlayerComponent MaxHP	플레이어의 최대 체력을 설정합니다. 기본값은 1000입니다.

 

모델 프로퍼티 비활성화하기

크리에이터의 의도에 따라 필요 없는 모델 프로퍼티를 비활성화 가능