아바타의 외형 변경과 활용

# 학습 과정 소개

아바타 구성을 살펴보고, 아바타의 장비를 교체하는 방법을 알아봅니다. 아바타의 구성을 이해해 새로운 방식으로 아바타를 활용할 수 있습니다.

# 아바타

DefaultPlayer의 프로퍼티 에디터에는 AvatarRendererComponent와 CostumeManagerComponent가 있습니다. [png](1639736344111420c42a85e1c4f678dbdd11dabf7ee64)

  * AvatarRendererComponent
    * 복장 정보를 가져와 아바타를 그리는(Rendering) 역할을 합니다.
  * CostumeManagerComponent
    * 복장 정보를 가지고 있습니다.
    * 프로퍼티에 특정한 값을 지정하지 않았다면 유저 개개인이 장착한 옷의 정보를 가져와 보여줍니다.
    * 만약, 크리에이터가 제작한 맵에 모두 동일한 무기를 가지고 싸우길 원한다면 CostumeManagerComponent에서 복장을 지정합니다. 월드를 실행했을 때 AvatarRendererComponent가 지정된 복장 정보를 가져와 월드에 접속하는 모든 유저에게 같은 무기를 적용합니다.



아바타는 Body와 Face로 나누어져 있고, AvatarRoot의 하위에 위치합니다. Body에는 AvatarBodyActionSelectorComponent가, Face에는 AvatarFaceActionSelectorComponent가 자동으로 함께 구현됩니다. 두 Selector 컴포넌트는 어떤 애니메이션을 재생할지 AvatarRendererComponent에게 전달하는 역할을 합니다. [png](163972976884316a24d6b6a37457aaa19b6fa1e57fdd7)

#### 아바타 장착 규칙

CostumeManagerComponent의 프로퍼티 값을 변경해 아바타에 특정 아이템을 장착할 수 있습니다.

  * 피부, 모자, 망토, 코트, 귀 장식, 귀, 눈 장식, 얼굴 장식, 얼굴, 장갑, 헤어스타일, 롱코트, 한손무기, 하의, 신발, 보조무기, 두손무기 모두 변경할 수 있습니다.
  * 다만, 장비는 아래의 규칙에 따라 장착할 수 있기에 중복으로 장착할 수 없는 항목이 있습니다. 
    * 상하의와 한벌옷은 중복으로 착용할 수 없습니다.
    * 한손무기 혹은 보조무기는 양손무기와 중복으로 착용할 수 없습니다.
    * 동시 착용이 불가능한 아이템을 같이 입력했다면 한벌옷, 두손무기만 출력됩니다.



크리에이터가 UseCustomeEquipOnly 프로퍼티를 [png](16346176985962dcc6fd403f34978b50521f0a8329013) 비활성화한 상태라면, 모든 유저는 자신의 아바타를 기준으로 변경된 복장만 장착하게 됩니다. 만일 모든 유저를 같은 아바타 상태로 입장하게 하고 싶다면, UseCustomeEquipOnly를 [png](16346176407708cb3de01eaaf48a68ab2dd6fe1b1183f) 활성화해야 합니다. 롱코트만 값을 지정하고, UseCustomeEquipOnly 활성 상태를 다르게 하면, 아래와 같이 적용됩니다.

[{"index":"UseCustomeEquipOnly 비활성","0":"[png](1656037430966b3ed208e362047fd96fc353a923d5694)"},{"index":"UseCustomeEquipOnly 활성","0":"[png](165603717861326007c18880e4f3ab95ec987302d4b82)"}]

# 아바타에 색 입히기

AvatarRendererComponent의 `SetColor` 함수와 확장한 TriggerComponent를 사용해 특정 엔티티와 유저가 닿으면(충돌하면) 유저가 빨간색으로 변하게 합니다.

  1. BaseEnvironment - NativeScripts - Component - TriggerComponent를 선택합니다.   

  2. TriggerComponent의 콘텍스트 메뉴를 열고 Extend를 클릭합니다. [png](1687754755702bcecc1f59a204f3ca931773a1849464d)   

  3. 확장한 스크립트 이름을 변경하고, 아바타와 부딪힐 엔티티에 컴포넌트를 추가합니다.   

  4. 아래와 같은 스크립트를 작성합니다.


    
    
    @Component
    script AvatarReddenTrigger extends Component
        override method void OnEnterTriggerBody(TriggerEnterEvent enterEvent)
        __base:OnEnterTriggerBody(enterEvent)
    
        -- 오브젝트와 충돌한 대상(플레이어)을 받아옵니다.
        local player = enterEvent.TriggerBodyEntity
    
        -- 오브젝트와 충돌한 대상에게 AvatarRendererComponent가 없다면 색은 변하지 않습니다.
        local avatarRenderer = player.AvatarRendererComponent
        if avatarRenderer == nil then
            return
        end
    
        -- 오브젝트에 부딪혔을 때 플레이어에게 씌울 색을 지정합니다(빨간색).
        avatarRenderer:SetColor(1.0, 0.0, 0.0, 1.0)
        end
    end
    

[gif](1656037221622eb2a951c9c6a4efc8911926e1553490b)

> TIP TriggerComponent를 확장했기 때문에 OnEnterTriggerBody 함수를 추가하면 앞에 [png](1640768458649f5cbcbca48d348adb5f4cb490510b822)가 붙습니다.

# 아바타 옷 바꾸기

CostumeManagerComponent의 `SetEquip`을 이용해 아바타가 특정 엔티티와 닿았을 때 크리에이터가 지정한 의상으로 모습을 변경합니다. 특정 엔티티에 닿으면 아바타의 의상을 아래의 RUID로 바꾸는 예제를 살펴봅시다.

[{"Parts":"모자","RUID":"08346b77089b468baa34389b2bf299c7"},{"Parts":"롱코트(한벌옷)","RUID":"0858e3dba9fb4fd3a20273cdeddff5ce"},{"Parts":"한손무기","RUID":"2f921322114549da9ef5725e980a28c9"}]

  1. BaseEnvironment - NativeScripts - Component - TriggerComponent를 선택합니다.
  2. TriggerComponent의 콘텍스트 메뉴를 열고 Extend를 클릭합니다. [png](1687754755702bcecc1f59a204f3ca931773a1849464d)
  3. 확장한 스크립트 이름을 변경하고, 아바타와 부딪힐 엔티티에 컴포넌트를 추가합니다.
  4. 아래와 같은 스크립트를 작성합니다.


    
    
    @Component
    script CostumeChangeTrigger extends Component
        override method void OnEnterTriggerBody(TriggerEnterEvent enterEvent)
        __base:OnEnterTriggerBody(enterEvent)
    
        -- 오브젝트와 충돌한 대상(플레이어)을 받아옵니다.
        local player = enterEvent.TriggerBodyEntity
    
        -- 오브젝트와 충돌한 대상에게 AvatarRendererComponent가 없다면 복장은 바뀌지 않습니다.
        local costumeManager = player.CostumeManagerComponent
        if costumeManager == nil then
            return
        end
    
         -- 바뀔 장비의 RUID를 입력합니다.
        costumeManager.CustomCapEquip = "08346b77089b468baa34389b2bf299c7"
        costumeManager.CustomLongcoatEquip = "0858e3dba9fb4fd3a20273cdeddff5ce"
        costumeManager.CustomOneHandedWeaponEquip = "2f921322114549da9ef5725e980a28c9"
        end
    end
    

[gif](16560372660016a0c0a7f65d346e1aa7d166ed839ec13)

# 아바타를 다르게 활용하기

AvatarRendererComponent와 CostumeManagerComponent를 활용해 새로운 아바타를 만들어 사용할 수 있습니다. 몬스터, 포탈, NPC 혹은 크리에이터만의 특별한 엔티티로 제작할 수 있습니다. 이때 TransformComponent, AvatarRendererComponent, CostumeManagerComponent 총 3가지는 필수 컴포넌트입니다. 필수 컴포넌트와 더불어 다른 네이티브 컴포넌트를 추가하거나, 크리에이터가 제작한 새로운 컴포넌트를 추가해 활용합니다.

#### 아바타 모양 포탈 만들기

[png](16397077408772b3142d25d454ec2811260ef4c5400d5)

  1. Workspace - MyDesk의 콘텍스트 메뉴에서 Create Model를 선택해, 새로운 모델을 만듭니다.   

  2. 새로운 모델에 TransformComponent, AvatarRendererComponent, CostumeManagerComponent를 추가합니다. [png](16397058202122eac734eedb14d1fb88237289b257b05)   

  3. CostumeManagerComponent에 복장 정보 RUID를 입력해 크리에이터의 아바타와 다른 모습의 아바타를 만듭니다. 

[{"Parts":"Body","RUID":"504244b76e654f5db23dc62693106bc8"},{"Parts":"Cape","RUID":"0c40fcbc25844082981d2f4ca04ee383"},{"Parts":"EyeAccessory","RUID":"e3846cade85f4a04a603a9a8f5f705d4"},{"Parts":"Face","RUID":"0b67e20c585145b7b50bdce28386bef0"},{"Parts":"Glove","RUID":"43e864f8cd77466db4d0d7d342e72410"},{"Parts":"Hair","RUID":"0521135d1c234f10ab5c1c02b1aed813"},{"Parts":"Longcoat","RUID":"1141b91758e54052ac1f39cfb0680574"},{"Parts":"Shoes","RUID":"ad81534ee2e34e4b98e312517ca3e192"}]

[png](16397063807041913c00c619e43c980832b999591973c)   

  4. PortalComponent과 NameTagComponent를 추가합니다. [png](1639707712623152a28523dd74a3e8b5f5140fe31ba9b)



##### 참고 가이드

  * [캐릭터 초기 속성 편집](/docs?postId=48)
  * [다른 위치로 이동하는 포탈 만들기](/docs?postId=90)
  * [엔티티에 이름표 붙이기](/docs?postId=29)