사다리와 로프 활용하기

# 학습 과정 소개

캐릭터가 사다리나 로프를 타면 수직으로 올라갈 수 있습니다. 이는 사다리나 로프의 동작과 연관된 ClimbableComponent가 있기 때문입니다. 이 컴포넌트를 활용하면 사다리, 로프뿐만 아니라 다른 오브젝트에서도 등반할 수 있습니다. 또한 크리에이터가 원하는 대로 등반 영역이나 등반 속도를 조절할 수 있습니다. 관련된 컴포넌트로 ClimbableSpriteRendererComponent도 있습니다. 이 컴포넌트는 사다리나 로프와 같이 머리, 몸통, 꼬리 형태의 스프라이트를 그리기 위한 용도로 사용됩니다. 이번 시간에는 위의 두 가지 컴포넌트를 살펴봅시다.

##### 참고 API Reference

[ClimbableComponent](/apiReference/Components/ClimbableComponent) [ClimbableSpriteRendererComponent](/apiReference/Components/ClimbableSpriteRendererComponent)

# ClimbableComponent

[ClimbableComponent](/apiReference/Components/ClimbableComponent)는 등반 액션과 관련된 사항을 설정합니다. ClimbableComponent의 프로퍼티를 살펴봅시다.

[png](16626264079829a7791304acd40db8bcb63b170f65d22)

[{"프로퍼티 명":"Collider","설명":"Edit 버튼을 누른 후 등반 영역을 조절할 수 있습니다."},{"프로퍼티 명":"AllowHorizontalMove","설명":"자유로운 등반 이동 여부를 설정합니다. true일 경우 X, Y 축 모두 이동 가능합니다."},{"프로퍼티 명":"ClimbableAnimationType","설명":"캐릭터의 등반 애니메이션을 설정합니다. Ladder 또는 Rope를 선택할 수 있습니다."},{"프로퍼티 명":"IsUseDefaultObjectBoxSize","설명":"등반 영역 설정을 스프라이트 크기에 맞출지 설정합니다. 메이커 편집 모드에서만 동작합니다. true일 경우에 Boxsize, BoxOffset을 자동으로 스프라이트 크기에 맞게 설정합니다. false일 경우 Boxsize, BoxOffset을 임의로 설정할 수 있습니다."},{"프로퍼티 명":"SpeedFactor","설명":"등반 시 X, Y축 속력에 곱해지는 가중치입니다. 값이 클수록 이동 속력이 빨라집니다."}]

# ClimbableSpriteRendererComponent

[ClimbableSpriteRendererComponent](/apiReference/Components/ClimbableSpriteRendererComponent)는 사다리나 로프의 스프라이트를 설정하고 길이를 조절할 수 있습니다. 사다리나 로프는 ①머리, ②몸통, ③꼬리 부분으로 이루어져 있는데 그 길이를 늘리면 몸통 부분의 스프라이트가 반복되며 늘어납니다. [png](166262931403925ecbf22b49a4917b916676ac2835e47)

ClimbableSpriteRendererComponent의 프로퍼티를 살펴봅시다. [png](167568565117370e633f438a04a19b05285b2f9cc1902)

[{"프로퍼티 명":"FlipX","설명":"Sprite의 X축을 기준으로 반전 여부를 결정합니다."},{"프로퍼티 명":"FlipY","설명":"Sprite의 Y축을 기준으로 반전 여부를 결정합니다."},{"프로퍼티 명":"IgnoreMapLayerCheck","설명":"SortingLayer에 Map Layer 이름을 지정했을 때 자동 치환을 수행하지 않습니다."},{"프로퍼티 명":"MaterialId","설명":"랜더러가 사용할 머티리얼의 ID를 지정합니다."},{"프로퍼티 명":"OrderInLayer","설명":"같은 Layer 내의 우선순위를 결정합니다. 수가 클수록 앞에 보입니다."},{"프로퍼티 명":"SortingLayer","설명":"2개 이상의 Entity가 겹쳤을 때 Sorting Layer에 따라 보이는 우선순위가 결정됩니다.  Map Layer 이름으로 지정하면 해당하는 Sorting Layer로 변경됩니다."},{"프로퍼티 명":"SpriteRUID","설명":"사다리 몸통에 사용할 Sprite RUID를 설정합니다."},{"프로퍼티 명":"TiledSize","설명":"Y값을 변경해 사다리의 세로 높이를 설정 할 수 있습니다. X값 변경은 지원하지 않습니다."},{"프로퍼티 명":"Color","설명":"Sprite에 색깔을 씌웁니다. 기본 흰색일 경우에 원본의 색이 나옵니다."}]

> Tip. 엔티티가 ClimbableComponent와 ClimbableSpriteRendererComponent를 모두 포함하고 있다면 등반 영역을 수동으로 조절할 수 없고, 무조건 오브젝트의 BoxSize를 등반 영역으로 사용합니다. 

# 오브젝트를 사다리처럼 활용하기

  1. 사다리처럼 활용하려는 오브젝트를 월드에 추가하겠습니다. 오브젝트를 추가하려는 map의 콘텍스트 메뉴로 들어가 Create Entity - Create Empty를 선택합니다. [png](168619968509130d481ace9ef49e19fb609ae4446ab5e)   

  2. 생성된 EmptyEntity의 이름을 Net로 변경합니다.   

  3. Net의 프로퍼티 에디터에서 Add Component를 눌러 TransformComponent를 추가합니다. [png](166303145507485459a1a3bf34f75be561c8837b6c2dd)   

  4. Net의 프로퍼티 에디터에서 SpriteRendererComponent를 추가하고, 그물 SpriteRUID를 입력합니다. 그러면 아래와 같이 그물 오브젝트가 나타납니다. 
     * SpriteRUID : 3f5d1c1eddf9428e8ca1c5581f1453d4 [png](16630319308118bab7fbc64d8412a843c3f7964e0b419)   

  5. Net의 프로퍼티 에디터에서 ClimbableComponent를 추가합니다.   

  6. IsUseDefaultObjectBoxSize의 체크박스를 해제해 false로 설정합니다. 이후 Collider - [Edit] 버튼을 눌러 등반 영역을 조절하면 IsUseDefaultObjectBoxSize의 BoxOffset과 BoxSize가 설정됩니다. [png](16630324973683251945ba48b41b1a2dfacdca51c87e6)   

  7. AllowHorizontalMove를 True로 설정하여 X, Y축 모두 이동 가능 하도록 설정해줍니다.   

  8.  [시작] 버튼을 누른 뒤 테스트해 봅시다. 캐릭터가 그물을 타고 오르락내리락 하는 것을 확인할 수 있습니다. [gif](1663033197084cc25b9e0220d41339699fa7de794d565)