UI 엔티티 제어하기

# 학습 과정 소개

UI 엔티티를 효율적으로 제어하는 방법을 알아봅시다. UI 엔티티를 제어할 때 UI와 서버, 그리고 클라이언트의 관계를 파악해 만들어야 합니다.

##### 참고 가이드

  * [UI 에디터](/docs?postId=120%7B%22target%22:%22_blank%22%7D)
  * [UI 제작하기](/docs?postId=64%7B%22target%22:%22_blank%22%7D)
  * [기본 UI 컴포넌트](/docs?postId=744%7B%22target%22:%22_blank%22%7D)



# UI 엔티티 제어

엔티티에 접근하는 것과 동일한 방법으로 UI 엔티티에 접근할 수 있습니다. 엔티티에 접근하는 방법은 [엔티티와 컴포넌트 참조](/docs?postId=164) 가이드를 참고하세요. UI 엔티티는 클라이언트 공간에만 존재하므로 서버에서 접근할 수 없습니다. UI 엔티티나 엔티티의 컴포넌트를 받아올 때는 오직 클라이언트 함수에서만 참조해야 합니다. 서버에서 처리된 내용을 UI로 출력하거나 UI를 통해 입력한 내용을 서버에서 처리해야 할 때는 실행제어를 이용해 각 공간에서 수행하도록 해야 합니다.

[png](16376400434986207872f3b3346a1902926ce8e819a84) [png](1660700550069a309016cdd944831981b9f99331b6ff7)

#### 버튼 클릭

버튼을 클릭 했을 때 서버에서 처리를 요청하는 예시입니다.
    
    
    @Component
    script ButtonServerActivator extends Component
        @ExecSpace("ClientOnly")
        method void OnBeginPlay()
            local button = _EntityService:GetEntityByPath("ButtonEntityPath") 
            -- 가져올 버튼 엔티티 경로를 "ButtonEntityPath"에 입력합니다.
        --     button:ConnectEvent(ButtonClickEvent, self.OnButtonClickClient)  -- [Commented: MLUA requires handler pattern]
        end
    
        @ExecSpace("ClientOnly")
        method void OnButtonClickClient()
        --processing in client..
        self:OnButtonClickServer()
        end
    
        @ExecSpace("ServerOnly")
        method void OnButtonClickServer()
        log("Start processing on the server")
        end
    end
    
    
    
     
    

#### 서버 처리 결과 UI로 출력
    
    
    @Component
    script TimedToastHandler extends Component
        property number time = 0
    
        @ExecSpace("ServerOnly")
        method void OnUpdate(number delta)
        self.time = self.time + delta
        if self.time >= 3 then
            self.time = 0
            self:ShowToastMessage("Time Reset")
        end
        end
    
        @ExecSpace("ClientOnly")
        method 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)
        end
    end
    

# UI 노출 제어

`SetEnable()` 함수를 사용해 UI의 노출을 제어할 수 있습니다. 아래 그림과 같이 팝업창을 직접 제작하고 동일 계층으로 UI를 만들었을 경우를 살펴봅시다. 이 팝업창은 동시에 나타나고 사라져야 하므로 모든 엔티티의 Enable을 별도로 설정해야 합니다.

[png](1659671947080901d185518b64d008152c181b8eb1735)
    
    
    @Component
    script PopupUIManager extends Component
        method 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")
        PopupUIEntity_1:SetEnable(true)
        PopupUIEntity_2:SetEnable(true)
        PopupUIEntity_3:SetEnable(true)
        end
    
        method 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")
        PopupUIEntity_1:SetEnable(false)
        PopupUIEntity_2:SetEnable(false)
        PopupUIEntity_3:SetEnable(false)
        end
    end
    

UI를 제작할 때 UI 기능에 속한 UI 들은 계층 구조를 활용해 부모-자식 관계로 만드는 것을 권장합니다. 특정 UI 엔티티를 최상위 엔티티로 만들고 나머지 UI 엔티티를 자식으로 포함시킵니다. 부모-자식의 특성을 이용해 최상위 엔티티만 참조해 모든 UI 엔티티를 제어할 수 있게됩니다. 계층 구조를 활용한 노출/숨김 처리 예시 코드입니다.
    
    
    @Component
    script PopupUIController extends Component
        method void ShowPopupUI()
        local PopupUIEntity = _EntityService:GetEntityByPath("/ui/DefaultGroup/MODImage_1")
        PopupUIEntity:SetEnable(true)
        end
    
        method void HidePopupUI()
        local PopupUIEntity = _EntityService:GetEntityByPath("/ui/DefaultGroup/MODImage_1")
        PopupUIEntity:SetEnable(false)
        end
    end
    

# UIGroup 제어

엔티티의 `SetEnable` 함수를 활용해 UIGroup를 제어할 수 있습니다.
    
    
    @Component
    script UIGroupVisibilityController extends Component
        method void ShowUIGroup_1()
        local UIGroup_1 = _EntityService:GetEntityByPath("/ui/UIGroup_1")
        UIGroup_1:SetEnable(true)
        end
    
        method void HideUIGroup_1()
        local UIGroup_1 = _EntityService:GetEntityByPath("/ui/UIGroup_1")
        UIGroup_1:SetEnable(false)
        end
    end