msw-ai-tf/maplestory-worlds-creator-docs huggingface dataset:
Tween 종류별 특징과 활용법 알아보기

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

# Tween 종류별 특징과 활용법 알아보기

> 엔티티의 움직임을 더 매력적으로 만들고 싶다면, 다양한 `Tween`을 활용해보세요. 이 글에서는 `Tween`의 종류별 특징과 활용법을 소개합니다.

## Tween Component란?

`Tween Component`는 엔티티에 다양한 운동성을 부여할 수 있는 강력한 도구입니다. 이를 통해 엔티티의 위치, 크기, 회전 등을 조정하여 다양한 애니메이션 효과를 구현할 수 있습니다. `Tween Component`는 TweenFloatingComponent, TweenLineComponent, TweenCircularComponent의 세 가지로 구성되어 있으며, 각기 다른 운동 방식을 제공합니다.

## Tween 종류별 특징

### TweenFloatingComponent

TweenFloatingComponent는 엔티티가 제자리에서 부유하는 듯한 움직임을 제공합니다. 주로 상하로 움직이며, 진폭과 사이클 시간을 조정하여 이동 거리와 속도를 설정할 수 있습니다.

  * 주요 프로퍼티: `TweenType`, `OneCycleTime`, `Amplitude`, `AutoStart`, `AutoDestroy`



### TweenLineComponent

TweenLineComponent는 원점에서 목적지까지 선형으로 이동하는 애니메이션을 구현합니다. 목적지까지의 편도, 왕복 여부, 가속 및 감속 설정이 가능합니다.

  * 주요 프로퍼티: `TweenType`, `Duration`, `StopType`, `DestinationCoordinateType`



### TweenCircularComponent

TweenCircularComponent는 원점을 중심으로 원형 운동을 하며, 회전 수, 속도, 반경 등을 설정할 수 있습니다.

  * 주요 프로퍼티: `Radius`, `Speed`, `LookAtCenter`, `IsClockwise`



## TweenLogic 활용 방안

`TweenLogic`은 엔티티에 애니메이션 효과를 줄 수 있는 다양한 함수를 제공합니다. `TweenComponent`와는 달리, `TweenLogic`은 동적 트윈이 필요한 경우에 활용할 수 있습니다. 다양한 `EaseType`을 사용하여 엔티티의 자연스러운 움직임을 구현할 수 있습니다.

  * EaseType: 엔티티의 움직임을 더욱 자연스럽게 만들어주는 다양한 Easing 함수가 제공됩니다.



## 실제 활용 예제

### 엔티티 이동 및 회전
    
    
    void OnBeginPlay ()
    {
        local tween = _TweenLogic:MoveTo(self.Entity, Vector2(0.5, self.Entity.TransformComponent.Position.y), 4, EaseType.BounceEaseOut)
        tween.LoopCount = -1
        tween.LoopType = TweenLoopType.PingPong
        tween.AutoDestroy = false
    }
    

위 코드는 엔티티를 특정 위치로 이동시키면서 Bounce 효과를 적용하는 예제입니다.

### Tween 효과의 조합
    
    
    void OnBeginPlay()
    {
        local rotateTween = _TweenLogic:RotateTo(self.Entity, 360, 5, EaseType.Linear)
        rotateTween.LoopCount = -1 
    }
    

회전과 이동을 결합하여 복합적인 애니메이션을 구현할 수 있습니다.

## 최적화 및 주의사항

  * 네트워크 최적화: `TweenComponent`는 네트워크 최적화가 되어 있어 멀티플레이 환경에서 효율적입니다.
  * Tweener 객체 관리: 불필요한 `Tweener` 객체가 쌓이지 않도록 적절한 시기에 파괴해야 성능 저하를 방지할 수 있습니다.



## 결론 및 추가 자료

`Tween`은 엔티티에 생동감을 부여하는 데 필수적인 도구입니다. 다양한 종류의 `Tween`을 이해하고 적절히 활용하여, 더욱 매력적인 애니메이션을 구현해보세요.

  * 
  *
CustomFootholdComponent

사용자 정의 발판을 만드는 기능을 제공합니다. 발판의 모양과 속성을 설정할 수 있습니다

# Properties

[{"index":"SyncList> edgeLists (Sync)","0":"발판을 나타냅니다. 하나의 발판은 여러 개의 연결점으로 구성됩니다."}]

[{"index":"float FootholdDrag (Sync)","0":"RigidbodyComponent가 포함된 엔티티가 발판 위에 있을 때 적용되는 마찰력입니다. 값이 클수록 빠르게 감속합니다."}]

[{"index":"float FootholdForce (Sync)","0":"RigidbodyComponent가 포함된 엔티티가 발판 위에 있을 때 가해지는 힘입니다. 값이 양수면 오른쪽, 음수면 왼쪽으로 움직입니다."}]

[{"index":"float FootholdWalkSpeedFactor (Sync)","0":"RigidbodyComponent가 포함된 엔티티가 발판 위에 있을 때 이동 속도에 곱해지는 계수입니다. 값이 클수록 이동 속도가 빨라집니다."}]

[{"index":"boolean IsBlockVerticalLine (Sync)","0":"엔티티가 해당 타일맵의 세로 발판에 막힐지 결정합니다. RigidbodyComponent를 가진 엔티티만 해당합니다."}]

[{"index":"boolean IsDynamicFoothold (ReadOnly)","0":"값이 true인 경우 플레이 중 발판을 이동시키거나 모양을 변경할 수 있습니다. 발판의 위치, 모양을 자주 변경하면 월드 성능 저하의 요인이 될 수 있으므로 사용 시 주의가 필요합니다."}]

[{"index":"boolean PhysicsInteractable (ReadOnly)","0":"true일 경우 Physics 기능을 사용하는 Dynamic 강체(PhysicRigidbody)와 충돌할 수 있습니다."}]

[{"index":"RigidbodyMovementOptionType RigidbodyMovementOption (Sync)","0":"이동하는 발판 위에서 RigidbodyComponent가 상대적으로 어떻게 움직일지 설정합니다."}]

##### inherited from Component:

[{"index":"boolean Enable (Sync)","0":"컴포넌트 활성화 여부를 확인합니다."}]

[{"index":"boolean EnableInHierarchy (ReadOnly) (HideFromInspector)","0":"계층 구조상에서 이 컴포넌트가 Enable 상태인지를 반환합니다. Enable이 true일지라도 엔티티의 Enable이 false라면 false를 반환합니다."}]

[{"index":"Entity Entity (ReadOnly)","0":"이 컴포넌트를 소유한 엔티티입니다."}]

# Methods

##### inherited from Component:

[{"index":"boolean IsClient()","0":"현재 실행 환경이 클라이언트인지 아닌지의 여부를 반환합니다."}]

[{"index":"boolean IsServer()","0":"현재 실행 환경이 서버인지 아닌지의 여부를 반환합니다."}]

# Examples

`edgeList`를 수정해 발판 모양을 변경할 수 있습니다. 발판 변경 시 아래 유의사항을 참고 해야합니다.

  1. `IsDynamicFoothold`가 true인 경우에만 변경 사항이 적용됩니다.
  2. 새 List를 만들어 덮어써야 변경 사항이 적용됩니다. 아래 예제 코드를 참고하세요.



발판 일부를 변경하는 예제입니다.
    
    
    @Component
    script CustomFootholdUpdater extends Component
        @ExecSpace("ServerOnly")
        method void OnBeginPlay()
            local target = _EntityService:GetEntityByPath(EntityPath)
            
            -- 요소의 값을 수정하면 변경 사항이 발판에 적용되지 않습니다.
            -- target.CustomFootholdComponent.edgeLists[1][1] = Vector2(3, 0)
            
            -- 새 List를 만들어 덮어써야 합니다.
            local list = {Vector2(3,0), Vector2(2,3)}
            target.CustomFootholdComponent.edgeLists[1] = list
        end
    end
    

발판 전체를 대체하는 예제입니다.
    
    
    @Component
    script FootholdInitializer extends Component
        @ExecSpace("ServerOnly")
        method void OnBeginPlay()
            local listlist = {{Vector2(0,2), Vector2(3,2)},{Vector2(4,5), Vector2(3,8)}}
            local target = _EntityService:GetEntityByPath(EntityPath)
            target.CustomFootholdComponent.edgeLists = listlist
        end
    end
    

# SeeAlso

  * EntityService
  * [발판 만들기](/docs?postId=71)
  * [이동 발판 만들기](/docs?postId=579)
메이플스토리 월드에서 피격 시 멈추지 않도록 설정 변경하기

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

# 메이플스토리 월드에서 피격 시 멈추지 않도록 설정 변경하기

> 메이플스토리 월드를 플레이하면서 캐릭터가 몬스터에게 피격될 때 멈추지 않도록 설정을 변경하는 방법을 알아봅니다. 이 가이드는 HitComponent와 PlayerHit 컴포넌트를 수정하여 피격 시 멈추지 않도록 구현하는 과정을 단계별로 설명합니다.

## 피격 동작의 기본 이해

메이플스토리 월드에서는 플레이어와 몬스터 간의 전투가 핵심 요소입니다. 이때 피격 동작은 `HitComponent`와 `AttackComponent`를 통해 처리됩니다. 피격 시 멈추는 동작은 기본적으로 `PlayerHit` 컴포넌트에서 정의됩니다. 이 컴포넌트는 플레이어가 피격되었을 때 발생하는 이벤트를 처리하여 멈추는 동작을 구현합니다.

## 피격 동작 수정하기

피격 시 멈추지 않도록 설정을 변경하기 위해 `PlayerHit` 컴포넌트를 수정해야 합니다. 다음은 그 과정입니다:

  1. SendHitEvent 함수 생성: `Method`에서 + 버튼을 눌러 `SendHitEvent` 함수를 만듭니다. 이 함수는 피격 이벤트를 생성하여 보냅니다.
         
         void SendHitEvent(Entity attacker, integer damage, boolean isCritical, string attackInfo)
         {
             local event = HitEvent()
             event.AttackerEntity = attacker
             event.TotalDamage = damage
             event.IsCritical = isCritical
             event.Extra = attackInfo
             self.Entity:SendEvent(event)
         }
         

  2. OnHit 함수 재정의: `OnHit` 함수를 재정의하여 피격 시 멈추지 않도록 합니다.
         
         override void OnHit(Entity attacker, integer damage, boolean isCritical, string attackInfo, int32 hitCount)
         {
             self:SendHitEvent(attacker, damage, isCritical, attackInfo)
         }
         

  3. 피격 이벤트 핸들러 작성: `EventHandler`의 + 버튼을 눌러 `HitEvent`를 추가하고 피격 시 데미지를 보여주는 이벤트 함수를 작성합니다.
         
         EventHandler:
         HandleHitEvent (HitEvent event)
         {
             local AttackCenter = event.AttackCenter
             local AttackerEntity = event.AttackerEntity
             local Damages = event.Damages
             local Extra = event.Extra
             local IsCritical = event.IsCritical
             local TotalDamage = event.TotalDamage
             log(self.Entity.PlayerComponent.Hp)
             _DamageSkinService:Play(self.Entity, "6ba67548f43f48f29eb23dafd0766383", 0.05, {TotalDamage}, DamageSkinTweenType.Default, IsCritical)
         }
         




## 테스트 및 검증

수정된 스크립트를 테스트하기 위해 `프리셋`에서 몬스터를 선택하고 맵에 배치합니다. 플레이 버튼을 눌러 테스트를 진행하여, 플레이어가 피격되어도 멈추지 않고 지나가는 것을 확인합니다.

## 추가 설정 및 최적화

피격 이벤트를 보다 효율적으로 처리하기 위해 `HitEvent`를 활용하여 피격 시 발생하는 이벤트를 관리할 수 있습니다. 또한, 최적화를 위해 `프로파일러`를 사용하여 성능을 점검할 수 있습니다.

## 스크립트 관리 및 유지보수

변경된 스크립트는 `스크립트 에디터`에서 관리할 수 있습니다. 코드 변경 후 발생할 수 있는 잠재적인 오류는 `코드 검사` 기능을 통해 점검하여 안정성을 유지합니다.

## 결론 및 추가 자료

이 가이드를 통해 메이플스토리 월드에서 피격 시 멈추지 않도록 설정을 변경하는 방법을 배웠습니다. 더 많은 정보를 원하신다면 아래의 링크를 참조하세요:

  * 
  * 
  *
후드

# 학습 과정 소개

후드 시트를 소개합니다. [아바타 아이템 제작의 기본 개념](/docs?postId=588%7B%22target%22:%22_self%22%7D)을 참고해 아바타의 기본 개념을 먼저 숙지하길 바랍니다.

# 사전 준비

아이템 제작을 위해선 Adobe Photoshop이 필요합니다. 해당 소프트웨어를 설치한 후 아래 파일을 받아 엽니다. $$attachFile {"name":"Avatar_Cap_G.psd","url":"https://mod-file.dn.nexoncdn.co.kr/storage/Avatar_psd/version4_230221/Avatar_Cap_G.psd"} $$

> Tip. 모자는 아바타 발을 기준으로 최대 120x120 안에서 제작을 권장합니다. [png](16769485559327fc72cf03aca4128998b423540c3e049)

# 제작 시트 설명

모자 제작 시트는 회색, 빨간색, 노란색 레이어로 구분되어 있습니다. 회색 레이어는 이미지를 데이터화하기 위한 data 폴더, 이미지 제작에 도움을 줄 아바타 body 레이어, 가이드용 선 레이어가 있습니다. 회색 레이어는 모두 잠겨있고, 작업 중에 수정은 필요하지 않습니다. 노란색 레이어는 크리에이터가 실제 아이템을 그릴 수 있는 곳입니다. 빨간색 레이어는 모자와 헤어의 우선순위를 결정하는 역할을 합니다.

> Tip. 모든 레이어의 이름을 수정하거나 삭제할 경우 아이템을 제작할 수 없습니다. 절대 이름을 변경하지 마세요.

### 회색 레이어/빨간색 레이어

  1. data 폴더: data 폴더는 아이템을 데이터화하기 위해 필요한 폴더입니다. 이미지 제작에는 영향을 주지 않습니다. 
     * data:origin: 빨간색 점으로 데이터의 중심을 표시합니다.
     * data:type:Cap: 어떤 종류의 데이터인지 알 수 있습니다.
     * data:use_zmap_preset1: 아바타를 구성하는 이미지는 층층이 쌓여 만들어집니다. 아바타의 다양한 몸동작을 만들기 위해 몸을 바탕으로 옷, 방패, 무기 순으로 이미지가 층층이 위에 쌓이는 구조입니다.  
아이템에 따라 분리된 각 Sprite의 높이가 순서대로 정리된 파일이 zmap입니다.
  2. guide_ 레이어: 아바타의 샘플 body입니다. 레이어 이름 뒤에 붙은 숫자가 클수록 아래에 배치되는 내부적인 규칙입니다.  

  3. (빨간색 레이어) data:vslot:CpH1H3H4H5H6HfHbHcAe : 빨간색 레이어는 모자에만 있는 개념입니다. 모자 제작 파일에서의 vslot 레이어는 머리카락과 모자가 겹칠 경우 보이는 우선순위를 결정하는 역할을 합니다. [png](16770341216345bee47ec320b47038b44a99935ece7a2)



### 노란색 레이어

노란색 레이어에 크리에이터가 제작할 후드를 그릴 수 있습니다.

  1. case1.front: 후드의 앞모습을 그릴 레이어와 앞모습의 일반 헤어와 눌린 헤어 샘플이 포함되어 있습니다. 
     * edithere:cap_cap_34: 후드의 앞모습을 그릴 수 있는 레이어입니다.
  2. case2.back: 후드의 뒷모습을 그릴 레이어와 뒷모습의 일반 헤어와 눌린 헤어 샘플이 포함되어 있습니다. 
     * edithere:cap_backCap_92: 후드의 뒷모습을 그릴 수 있는 레이어입니다. [png](1677034101578d0917d0379e545b2b4bf30612376cdbf)
월드 정보와 배지, 상품 번역하기

# 학습 과정 소개

크리에이터가 제작한 월드 정보, 상품, 배지, 아바타 상품 정보를 번역하여 제공한다면 보다 다양한 지역의 유저들이 재미있게 월드를 즐길 수 있을 것입니다. 의 번역 관리 메뉴를 활용하면 영어, 한국어 번역문을 입력할 수 있습니다. 본 가이드를 통해 월드 정보, 상품, 배지, 그리고 아바타 상품의 번역 적용 방법을 알아보겠습니다.

# 번역 관리하기

에서 [월드 만들기] 메뉴로 들어간 뒤, 번역할 월드를 선택합니다. [png](167625326897495623b9665374e3bb63f53fa92cbbfdf)   
해당 월드의 관리 페이지에서 [번역 관리] 메뉴로 들어가면 한국어 및 영어로 내용을 입력할 수 있습니다. [png](16762639843762ccb043479b547a088a96f93bd00a8d0)

## 월드 정보 번역

번역 관리 페이지에서 월드 이름, 설명 등 월드 정보를 번역할 수 있습니다. [png](1676268127959ab4f11ab1cea4b17bfe2b9e67f37abb7)   


  1. 월드 정보 하위 메뉴에서 번역하려는 정보를 클릭합니다.
  2. 기존에 작성해 둔 내용을 참고하여 번역문을 입력합니다.
  3. [저장] 버튼을 클릭해 작성한 내용을 저장합니다.



## 상점 상품 번역

월드에 등록해 둔 상품이 있다면 해당 상품의 이름, 섬네일, 설명을 번역할 수 있습니다. [png](167626991452558c8ab2579b541f98ba25a7c0140fe43)   


  1. 번역하려는 상점 상품을 선택합니다.
  2. 상품 이름을 번역합니다.
  3. 상품 섬네일을 등록합니다. 한국어 사용 유저와 영어 사용 유저에게 각기 다른 섬네일을 보여줄 때 활용합니다.
  4. 상품 설명을 번역합니다.
  5. [저장] 버튼을 클릭해 작성한 내용을 저장합니다.   




> 더 알아보기 상품을 등록하는 방법은 [상품 등록하기](/docs/?postId=581) 가이드를 참고합니다.

  
## 배지 번역 배지 이름, 섬네일, 설명을 번역할 수 있습니다. [png](16762700589361f038dd11b91478ebd3ea9ae4fc110c3)   


  1. 번역하려는 배지를 선택합니다.
  2. 배지 이름을 번역합니다.
  3. 배지 섬네일을 등록합니다. 한국어 사용 유저와 영어 사용 유저에게 각기 다른 섬네일을 보여줄 때 활용합니다.
  4. 배지 설명을 번역합니다.
  5. [저장] 버튼을 클릭해 작성한 내용을 저장합니다.   




> 더 알아보기 배지를 등록하는 방법은 [배지 등록하기](/docs/?postId=656) 가이드를 참고합니다.

  
## 아바타 상품 번역 아바타 상품을 번역할 수 있습니다. [png](16770343644112aa1262edd574c5e9db05235cbead89a) 

  1. [아바타 상품 만들기] 메뉴로 들어갑니다.
  2. [번역관리 바로가기] 버튼을 클릭합니다.
  3. 번역하려는 아바타 상품을 선택합니다.
  4. 상품 이름을 번역합니다. 아바타 상품 이름은 한 번 등록하면 수정할 수 없으므로 신중하게 결정 후 저장합니다.
  5. 상품 설명을 번역합니다.
  6. [저장] 버튼을 클릭해 작성한 내용을 저장합니다.   




> 더 알아보기 아바타 상품을 만드는 방법은 [아바타 상품 만들기](/docs/?postId=830) 가이드를 참고합니다.
가발

# 학습 과정 소개

가발 제작 시트를 소개합니다. [아바타 아이템 제작의 기본 개념](/docs?postId=588%7B%22target%22:%22_self%22%7D)을 참고해 아바타의 기본 개념을 먼저 숙지하길 바랍니다.

# 사전 준비

아이템 제작을 위해선 Adobe Photoshop이 필요합니다. 해당 소프트웨어를 설치한 후 아래 파일을 받아 엽니다. $$attachFile {"name":"Avatar_Cap_D.psd","url":"https://mod-file.dn.nexoncdn.co.kr/storage/Avatar_psd/version4_230221/Avatar_Cap_D.psd"} $$

> Tip. 모자는 아바타 발을 기준으로 최대 120x120 안에서 제작을 권장합니다. [png](16769485559327fc72cf03aca4128998b423540c3e049)

# 제작 시트 설명

모자 제작 시트는 회색, 빨간색, 노란색 레이어로 구분되어 있습니다. 회색 레이어는 이미지를 데이터화하기 위한 data 폴더, 이미지 제작에 도움을 줄 아바타 body 레이어, 가이드용 선 레이어가 있습니다. 회색 레이어는 모두 잠겨있고, 작업 중에 수정은 필요하지 않습니다. 노란색 레이어는 크리에이터가 실제 아이템을 그릴 수 있는 곳입니다. 빨간색 레이어는 모자와 헤어의 우선순위를 결정하는 역할을 합니다.

> Tip. 모든 레이어의 이름을 수정하거나 삭제할 경우 아이템을 제작할 수 없습니다. 절대 이름을 변경하지 마세요.

### 회색 레이어/빨간색 레이어

  1. data 폴더: data 폴더는 아이템을 데이터화하기 위해 필요한 폴더입니다. 이미지 제작에는 영향을 주지 않습니다. 
     * data:origin: 빨간색 점으로 데이터의 중심을 표시합니다.
     * data:type:Cap: 어떤 종류의 데이터인지 알 수 있습니다.
     * data:use_zmap_preset1: 아바타를 구성하는 이미지는 층층이 쌓여 만들어집니다. 아바타의 다양한 몸동작을 만들기 위해 몸을 바탕으로 옷, 방패, 무기 순으로 이미지가 층층이 위에 쌓이는 구조입니다.  
아이템에 따라 분리된 각 Sprite의 높이가 순서대로 정리된 파일이 zmap입니다.
  2. guide_ 레이어: 아바타의 샘플 body입니다. 레이어 이름 뒤에 붙은 숫자가 클수록 아래에 배치되는 내부적인 규칙입니다.
  3. (빨간색 레이어) data:vslot:CpH1H2H3H4H5H6HfHsHbHc : 빨간색 레이어는 모자에만 있는 개념입니다. 모자 제작 파일에서의 vslot 레이어는 머리카락과 모자가 겹칠 경우 보이는 우선순위를 결정하는 역할을 합니다. [png](1677033750714bee6e496b432440aa917a6c4fceeb4ca)



### 노란색 레이어

노란색 레이어에 크리에이터가 제작할 가발을 그릴 수 있습니다.

  1. case1.front: 가발의 앞모습을 그릴 레이어와 앞모습의 일반 헤어와 눌린 헤어 샘플이 포함되어 있습니다. 
     * edithere:cap_cap_34: 가발의 앞모습을 그릴 수 있는 레이어입니다.
  2. case2.back: 가발의 뒷모습을 그릴 레이어와 뒷모습의 일반 헤어와 눌린 헤어 샘플이 포함되어 있습니다. 
     * edithere:cap_backCap_92: 가발의 뒷모습을 그릴 수 있는 레이어입니다. [png](16770337662241601c8da5b484bb2b9fa358959c05109)
AvatarGUIRendererComponent로 아바타 머리 부분만 UI에 출력하는 법

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

# AvatarGUIRendererComponent로 아바타 머리 부분만 UI에 출력하는 법

> 이 아티클에서는 `AvatarGUIRendererComponent`를 활용하여 UI에서 아바타의 머리 부분만 렌더링하는 방법을 설명합니다. 이 방법을 통해 아바타의 다양한 표현을 이해하고 활용할 수 있습니다.

## AvatarGUIRendererComponent 이해하기

`AvatarGUIRendererComponent`는 아바타 형태의 엔티티를 UI에 렌더링하는 컴포넌트입니다. 이 컴포넌트를 활용하면 아바타의 각 파츠를 개별적으로 제어할 수 있습니다. 특히, `SetAvatarPartColor` 메서드는 아바타의 특정 파츠의 색상을 설정하는 데 사용됩니다. 이 기능을 통해 아바타의 머리 부분만 렌더링할 수 있습니다.

## SetAvatarPartColor 메서드를 활용하여 특정 아바타 파츠 숨기기

`SetAvatarPartColor` 메서드는 `MapleAvatarItemCategory`를 사용하여 아바타의 각 파츠의 색상과 투명도를 설정할 수 있습니다. 머리 부분 이외의 파츠를 투명하게 설정하여 머리 부분만 UI에 표시할 수 있습니다. 다음은 그 예시입니다:
    
    
    self.Entity.AvatarGUIRendererComponent:SetAvatarPartColor(MapleAvatarItemCategory.Body, 1, 1, 1, 0)
    self.Entity.AvatarGUIRendererComponent:SetAvatarPartColor(MapleAvatarItemCategory.Cape, 1, 1, 1, 0)
    self.Entity.AvatarGUIRendererComponent:SetAvatarPartColor(MapleAvatarItemCategory.Coat, 1, 1, 1, 0)
    self.Entity.AvatarGUIRendererComponent:SetAvatarPartColor(MapleAvatarItemCategory.Glove, 1, 1, 1, 0)
    self.Entity.AvatarGUIRendererComponent:SetAvatarPartColor(MapleAvatarItemCategory.Longcoat, 1, 1, 1, 0)
    self.Entity.AvatarGUIRendererComponent:SetAvatarPartColor(MapleAvatarItemCategory.OneHandedWeapon, 1, 1, 1, 0)
    self.Entity.AvatarGUIRendererComponent:SetAvatarPartColor(MapleAvatarItemCategory.Pants, 1, 1, 1, 0)
    self.Entity.AvatarGUIRendererComponent:SetAvatarPartColor(MapleAvatarItemCategory.Shield, 1, 1, 1, 0)
    self.Entity.AvatarGUIRendererComponent:SetAvatarPartColor(MapleAvatarItemCategory.Shoes, 1, 1, 1, 0)
    self.Entity.AvatarGUIRendererComponent:SetAvatarPartColor(MapleAvatarItemCategory.SubWeapon, 1, 1, 1, 0)
    self.Entity.AvatarGUIRendererComponent:SetAvatarPartColor(MapleAvatarItemCategory.TwoHandedWeapon, 1, 1, 1, 0)
    

이 코드는 머리 부분을 제외한 모든 파츠의 투명도를 0으로 설정하여 머리만 보이도록 합니다.

## UI 에디터에서 아바타 설정하기

UI 에디터에서 `AvatarGUIRendererComponent`를 설정하려면, 엔티티의 프로퍼티를 조정하여 원하는 렌더링 효과를 얻을 수 있습니다. `MaterialId`와 같은 프로퍼티를 통해 렌더링 방식을 세부적으로 설정할 수 있습니다.

## 최적화 및 테스트

설정한 아바타 렌더링이 다양한 환경에서 어떻게 최적화될 수 있는지 확인하는 것이 중요합니다. `테스트 플레이 상태`에서 아바타의 렌더링을 확인하고 필요한 경우 수정하여 최적의 성능을 보장합니다.

## 추가 기능 및 확장 가능성

`AvatarGUIRendererComponent`는 다양한 기능을 제공합니다. 예를 들어, `PlayEmotion` 메서드를 사용하여 아바타에 감정 표현을 추가할 수 있습니다. 이를 통해 더 복잡한 아바타 인터페이스를 구축할 수 있습니다.

## 결론 및 추가 자료

이 아티클에서는 `AvatarGUIRendererComponent`를 사용하여 아바타의 머리 부분만 UI에 출력하는 방법을 설명했습니다. 추가로 학습할 수 있는 자료는 다음 링크를 참조하세요:

  *
StateComponent:ChangeState 활용하기

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

# StateComponent:ChangeState 활용하기

> 게임 개발에서 `StateComponent:ChangeState` 메서드를 활용하여 엔티티의 상태를 효과적으로 전환하는 방법을 알아봅니다. 다양한 상태 전환을 통해 게임의 몰입감을 높이고, 개발자가 보다 복잡한 상태 관리 시스템을 구현할 수 있도록 돕습니다.

## 상태 전환의 기초 이해

게임 엔티티의 상태 전환은 플레이어와 상호작용할 수 있는 다양한 이벤트를 생성하는 데 필수적입니다. `StateComponent`는 이러한 상태 전환을 관리하는 핵심 컴포넌트로, `ChangeState` 메서드를 통해 엔티티의 현재 상태를 다른 상태로 강제로 전환할 수 있습니다. 이를 통해 게임의 동적 요소를 극대화할 수 있습니다.

## 예제 코드 구성

플레이어의 공격에 따라 상태가 변하는 나무 상자를 만들어보겠습니다. 기본 상태인 `IDLE`, `DEAD`와 새로 추가된 `BROKEN` 상태를 사용합니다. 각 상태에 특정 애니메이션과 스프라이트를 연결하여 상태 변화를 명확히 표현합니다.
    
    
    -- BrokenBox 상태 타입 생성
    Property:
    boolean exitFlag = false
    number timerId = 0
    
    Method:
    void OnEnter()
    {
        self.exitFlag = false
        self.timerId = _TimerService:SetTimerOnce(function() self.exitFlag = true end, 1.1)
        local spriteRenderer = self.ParentComponent.Entity.SpriteRendererComponent
        spriteRenderer.SpriteRUID = "76815f621e354f57b5adb5b9faaf9eb3"  -- BROKEN 상태의 RUID
    
        _TimerService:SetTimerOnce(function() 
            _SpawnService:SpawnByModelId("model://4ac51a4c-ecf6-4ddf-b32a-516fc66234be", "Item", self.ParentComponent.Entity.TransformComponent.Position + Vector3(0,0.12,0), self.ParentComponent.Entity.Parent) 
        end, 0.21) 
    }
    
    boolean OnConditionCheck(string nextStateName)
    {
        return self.exitFlag
    }
    
    void OnExit()
    {
        self.ParentComponent.Entity.SpriteRendererComponent.SpriteRUID = "b871399ae18d41c4b76c2ae79feefa7d" -- IDLE 상태의 RUID
        _TimerService:ClearTimer(self.timerId)
    }
    

## 상태 전환 로직에 대한 상세 설명

위 코드에서 `OnEnter` 메서드는 `BROKEN` 상태에 진입했을 때의 동작을 정의합니다. 타이머를 설정하여 일정 시간이 지난 후 상태 전환이 가능하게 하고, 스프라이트를 `BROKEN` 상태에 맞게 변경합니다. `OnConditionCheck` 메서드는 상태 전환 조건을 설정하며, `OnExit` 메서드는 상태 초기화와 타이머 해제를 담당합니다.

## 상태 전환의 시각적 효과 추가

각 상태에 적합한 스프라이트와 애니메이션을 설정하여 게임의 몰입감을 높일 수 있습니다. `SpriteAnimPlayerEndEvent`를 활용하면 애니메이션 재생이 끝난 후의 처리 로직을 작성할 수 있습니다.
    
    
    [self]
    HandleSpriteAnimPlayerEndFrameEvent (SpriteAnimPlayerEndFrameEvent event)
    {
        if event.TotalFrameCount > 1 then
            self.Entity.SpriteRendererComponent.Color.a = 0 
        end
    }
    

## 최적화 및 테스트

구현한 상태 전환 시스템을 최적화하고 테스트하는 과정이 필요합니다. 코드 최적화를 위해 불필요한 연산을 최소화하고, 테스트 플레이 상태에서 시스템의 동작을 검증하여 안정성을 높입니다.

## 결론 및 추가 자료

`StateComponent:ChangeState`를 활용하여 엔티티의 상태를 효과적으로 전환하는 방법을 살펴보았습니다. 이 방법을 통해 게임의 동적 요소를 강화할 수 있으며, 추가 학습을 위해 관련 자료를 참고하세요.

관련 링크:

  * 
  *
리치 텍스트 사용법 알아보기

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

# 리치 텍스트 사용법 알아보기

> 리치 텍스트는 텍스트에 다양한 스타일과 효과를 부여할 수 있는 강력한 도구입니다. 이 아티클에서는 리치 텍스트의 개념, 사용 방법, 그리고 실제 적용 사례를 통해 리치 텍스트를 효과적으로 활용하는 방법을 알아보겠습니다.

## 리치 텍스트의 개념 이해하기

리치 텍스트는 `TextComponent`에서 사용하는 텍스트 스타일링 기능으로, 텍스트 메시와 UI 요소에 다양한 폰트 스타일과 크기를 적용할 수 있게 해줍니다. 이 기능을 통해 텍스트의 가독성과 시각적 효과를 극대화할 수 있습니다.

리치 텍스트는 특정 태그를 사용하여 텍스트의 스타일을 지정합니다. 이러한 태그는 텍스트에 직접 표시되지 않으며, 스타일링을 위한 명령어로 해석됩니다. 예를 들어, `텍스트`는 텍스트를 굵게 표시합니다.

## 리치 텍스트 마크업 포맷

리치 텍스트는 HTML의 마크업 형식을 기반으로 하며, 텍스트의 일부분을 태그 쌍으로 감싸서 시각 효과를 부여합니다. 다음 예제를 통해 간단한 마크업 포맷을 살펴보겠습니다:
    
    
    We are not amused
    

위의 코드에서 `` 태그는 "not"이라는 단어를 굵게 표시합니다. 태그는 꺾쇠 괄호 `<`와 `>`로 둘러싸여 있으며, 종료 태그에는 슬래시 `/`가 포함됩니다.

### 중첩 요소와 태그 파라미터

리치 텍스트에서는 태그를 중첩하여 여러 스타일을 동시에 적용할 수 있습니다. 예를 들어:
    
    
    We are definitely not amused
    

위 코드에서는 "definitely not"이라는 텍스트가 굵고 기울임꼴로 표시됩니다. 또한, 태그에 파라미터를 추가하여 색상이나 크기 등을 지정할 수도 있습니다:
    
    
    We are green with envy
    

## 리치 텍스트의 실용적 활용

리치 텍스트는 다양한 스타일 태그를 지원하며, 이를 통해 텍스트를 더욱 매력적으로 만들 수 있습니다. `TextComponent`의 `IsRichText` 프로퍼티를 활성화하여 리치 텍스트를 사용할 수 있습니다.

다음은 리치 텍스트의 다양한 태그와 그 효과입니다:

  * ``: 텍스트를 굵게 표시
  * ``: 텍스트를 기울임꼴로 표시
  * ``: 텍스트 크기를 픽셀 단위로 설정
  * ``: 텍스트 색상을 지정



## 리치 텍스트 사용 시 주의사항

리치 텍스트를 사용할 때는 다음과 같은 점에 주의해야 합니다:

  * 태그의 시작과 종료를 정확히 맞춰야 합니다.
  * 중첩된 태그의 종료 순서는 시작 순서의 반대여야 합니다.
  * 텍스트의 가독성을 유지하기 위해 적절한 스타일을 선택해야 합니다.



`TextComponent`의 `FontColor`, `FontSize`, `Bold` 등의 프로퍼티를 활용하여 텍스트의 기본 스타일을 설정할 수 있습니다.

## 리치 텍스트의 고급 활용

리치 텍스트는 `UI 에디터`와 결합하여 더욱 정교한 텍스트 효과를 구현할 수 있습니다. `TextComponent`의 고급 기능을 활용하여 사용자 경험을 개선하고 텍스트를 최적화할 수 있습니다. 예를 들어, `OutlineColor`와 `DropShadow`를 사용하여 텍스트의 가독성을 높일 수 있습니다.

리치 텍스트를 통해 텍스트의 시각적 표현을 극대화하고, 사용자에게 더욱 매력적인 UI를 제공하세요.
TouchReceiveComponent의 터치 영역 좌표 알아보기

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

# TouchReceiveComponent의 터치 영역 좌표 알아보기

> TouchReceiveComponent의 TouchArea의 WorldPosition에서 LeftTop과 RightBottom 좌표를 계산하는 방법을 설명합니다.

## TouchReceiveComponent의 개념 이해하기

TouchReceiveComponent는 엔티티를 터치할 수 있도록 하며, 터치 시 발생하는 다양한 동작을 제어할 수 있는 기능을 제공합니다. 이 컴포넌트는 주로 게임 개발에서 플레이어와 상호작용이 필요한 엔티티에 사용됩니다. 터치 영역은 `TouchArea`와 `Offset` 속성을 통해 정의되며, `AutoFitToSize` 속성을 통해 런타임에 자동으로 크기와 위치가 조정될 수 있습니다.

## TouchArea의 좌표 변환 필요성

터치 영역의 좌표를 월드 좌표계로 변환하는 것은 매우 중요합니다. 이는 게임 엔진이 로컬 좌표를 사용하여 엔티티의 상대적 위치를 정의하기 때문입니다. 하지만, 실제 게임 내에서는 월드 좌표를 사용하여 정확한 위치를 파악해야 하므로 변환이 필요합니다. 이 변환은 `TransformComponent`의 `ToWorldPoint` 메서드를 통해 이루어집니다.

## 좌표 계산의 실제 사용 사례

게임 개발에서 터치 영역의 좌표를 정확히 계산하는 것은 UI 요소와의 충돌 감지, 터치 이벤트 처리 등에서 필수적입니다. 예를 들어, 플레이어가 특정 오브젝트를 터치했을 때 발생하는 이벤트를 처리하거나, UI 요소가 터치 영역과 겹치지 않도록 배치하는 데 사용됩니다.

## 터치 영역 좌표 계산 방법

TouchReceiveComponent의 터치 영역 좌표를 계산하는 구체적인 방법은 다음과 같습니다:
    
    
    Method:
    CalculateTouchAreaBounds()
        local transform = self.Entity.TransformComponent
        local touchReceiver = self.Entity.TouchReceiveComponent
        
        -- TouchReceiveComponent의 속성들을 가져옴
        local touchArea = touchReceiver.TouchArea
        local offset = touchReceiver.Offset
        
        -- Offset을 고려한 터치 영역의 네 모서리 좌표 (로컬 좌표계)
        local corners = {
            Vector3(offset.x - touchArea.x/2, offset.y + touchArea.y/2, 0),  -- LeftTop
            Vector3(offset.x + touchArea.x/2, offset.y + touchArea.y/2, 0),  -- RightTop
            Vector3(offset.x + touchArea.x/2, offset.y - touchArea.y/2, 0),  -- RightBottom
            Vector3(offset.x - touchArea.x/2, offset.y - touchArea.y/2, 0)   -- LeftBottom
        }
        
        -- 각 코너를 월드 좌표계로 변환 (Scale, Rotation, Position 모두 적용)
        local worldCorners = {}
        for i, corner in ipairs(corners) do
            worldCorners[i] = transform:ToWorldPoint(corner)
        end
        
        return {
            LeftTop = worldCorners[1],
            RightTop = worldCorners[2],
            RightBottom = worldCorners[3],
            LeftBottom = worldCorners[4]
        }
    end
    

## 계산 과정에서 발생할 수 있는 문제와 해결책

  * AutoFitToSize 속성: 이 속성이 true로 설정된 경우, `TouchArea`와 `Offset`이 런타임에 변경될 수 있습니다. 따라서, 터치 영역의 좌표를 주기적으로 업데이트하는 것이 중요합니다.
  * Transform 변환: 엔티티의 `Scale`, `Rotation`, `Position`이 변경될 때마다 터치 영역을 재계산해야 합니다.



## 결론 및 추가 자료

TouchReceiveComponent의 터치 영역을 월드 좌표로 변환하는 과정은 게임 개발에서 필수적인 작업입니다. 이 과정을 이해하고 구현하면, 더욱 정교한 UI 및 상호작용을 설계할 수 있습니다. 추가적으로, 와 에 대한 공식 문서를 참조하여 더 깊이 있는 정보를 얻을 수 있습니다.