TouchReceiveComponent의 TouchArea를 런타임에서 시각화하는 법

이 게시글은 기존 정보에 기반해 크리에이터에게 유용하도록 AI가 재구성한 내용입니다.

# TouchReceiveComponent의 TouchArea를 런타임에서 시각화하는 법

> 이 글에서는 `TouchReceiveComponent`의 `TouchArea`를 런타임에서 시각화하는 방법을 설명합니다. 메이플스토리 월드 환경에서 이 기능을 구현함으로써 터치 영역을 시각적으로 확인할 수 있게 됩니다.

## TouchReceiveComponent 및 TouchArea의 이해

`TouchReceiveComponent`는 엔티티가 터치 가능하도록 하여 터치 시 행동을 제어할 수 있게 해주는 컴포넌트입니다. 이 컴포넌트의 중요한 프로퍼티 중 하나인 `TouchArea`는 터치 영역의 크기를 정의합니다. 런타임에서 이 영역을 시각화하면 개발자는 터치 이벤트가 발생하는 정확한 위치를 쉽게 파악할 수 있습니다.

## 런타임에서 터치 영역 시각화의 필요성

런타임에서 `TouchArea`를 시각화하면, 개발자는 터치 이벤트의 정확한 위치를 직관적으로 확인할 수 있어 디버깅과 UI 개선에 큰 도움이 됩니다. 특히, 복잡한 UI가 있는 경우 터치 영역을 명확히 이해하는 것이 중요합니다.

## 터치 영역 시각화 스크립트 작성 방법

이제 `TouchReceiveComponent`의 `TouchArea`를 런타임에서 시각화하기 위한 스크립트를 작성하는 방법을 단계별로 설명합니다.

### 1\. 유틸리티 스크립트 생성

먼저, `Create Logic Util`이라는 이름으로 유틸리티 스크립트를 생성합니다. 이 스크립트는 `플레인 텍스트 모드`로 작성되어야 하며, 다음과 같은 메서드를 포함합니다:
    
    
    Method:
    [server]
    void CreateLineRendererToTouchReceiveComponent(EntityRef targetEntity)
    {
        if Environment:IsPublishedPlay() == true then
            return
        end
    
        if targetEntity.TouchReceiveComponent == nil then
            return
        end
    
        if targetEntity.SpriteRendererComponent == nil then
            return
        end
    
        if targetEntity.LineRendererComponent ~= nil then
            return
        end
    
        local ruid = targetEntity.SpriteRendererComponent.SpriteRUID
    
        local maxWidth, maxHeight, maxPivotX, maxPivotY = _Util:GetSizeAndPivot(ruid)
        local RectSize = Vector2(maxWidth, maxHeight) / 100
        local Pivot = Vector2(maxPivotX, maxPivotY) / 100
    
        local lineRenderer = targetEntity:AddComponent("LineRendererComponent")
        lineRenderer = targetEntity.LineRendererComponent
    
        lineRenderer.Points:Clear()
        lineRenderer.Loop = true
    
        lineRenderer.Points:Add(LinePoint(Vector2(RectSize.x - Pivot.x, 0 - Pivot.y), Color(255, 255, 255, 0.9), 0.5))
        lineRenderer.Points:Add(LinePoint(Vector2(RectSize.x - Pivot.x, RectSize.y - Pivot.y), Color(255, 255, 255, 0.9), 0.5))
        lineRenderer.Points:Add(LinePoint(Vector2(0 - Pivot.x, RectSize.y - Pivot.y), Color(255, 255, 255, 0.9), 0.5))
        lineRenderer.Points:Add(LinePoint(Vector2(0 - Pivot.x, 0 - Pivot.y), Color(255, 255, 255, 0.9), 0.5))
    }
    
    boolean IsAnimationClip(string ruid)
    {
        local type = _ResourceService:GetTypeAndWait(ruid)
        if type == ResourceType.AnimationClip then
            return true
        else
            return false
        end
    }
    
    any GetSizeAndPivot(string ruid)
    {
        local IsAnimation = _Util:IsAnimationClip(ruid)
        local maxWidth, maxHeight, maxPivotX, maxPivotY
        if IsAnimation then
            local anim = _ResourceService:LoadAnimationClipAndWait(ruid)
            local frame = anim.Frames[1]
            maxWidth = frame.FrameSprite.Width
            maxHeight = frame.FrameSprite.Height
            maxPivotX = maxWidth * frame.FrameSprite.Pivot.x
            maxPivotY = maxHeight * frame.FrameSprite.Pivot.y
        else
            local sprite = _ResourceService:LoadSpriteAndWait(ruid)
            maxWidth = sprite.Width
            maxHeight = sprite.Height
            maxPivotX = sprite.PivotPixel.x
            maxPivotY = sprite.PivotPixel.y
        end
    
        return maxWidth, maxHeight, maxPivotX, maxPivotY
    }
    

### 2\. LineRenderHelpComponent 생성 및 추가

이벤트 핸들러를 설정하기 위해 `LineRenderHelpComponent`를 생성해야 합니다. 이 컴포넌트는 터치 이벤트가 발생할 때 터치 영역을 시각화하는 역할을 합니다.
    
    
    EventHandler:
    HandleTouchEvent (TouchEvent event)
    {
        _Util:CreateLineRendererToTouchReceiveComponent(self.Entity)
    }
    

### 3\. 엔티티에 컴포넌트 추가

마지막으로, 엔티티에 `LineRenderHelpComponent`와 `TouchReceiveComponent`를 추가합니다. 이렇게 하면 터치 시 해당 엔티티의 터치 영역이 시각화됩니다.

## 잠재적 문제 및 해결책

  * 중복된 LineRendererComponent: 이미 `LineRendererComponent`가 있는 경우 중복 생성되지 않도록 조건을 설정합니다.
  * 비공개 서버 환경: `Environment:IsPublishedPlay()` 조건을 사용하여 퍼블리싱 서버에서는 작동하지 않도록 설정합니다.



## 결론 및 추가 자료

이제 `TouchReceiveComponent`의 `TouchArea`를 런타임에서 시각화할 수 있습니다. 이 방법은 UI 개발과 디버깅에 큰 도움이 될 것입니다. 추가 학습을 위해 다음 링크를 참고하세요:

  *