엔티티 구간 이동시키기

# 학습 과정 소개

엔티티에 동작을 만드는 세 가지 Tween Component의 개념을 이해합니다. 컴포넌트를 이용해 크리에이터가 원하는 엔티티 운동 방향과 폭을 조정할 수 있습니다.

##### 참고 가이드

[엔티티의 위치, 크기, 회전 조정](/docs?postId=82)

# Tween Component 소개

Tween Component를 이용하여 엔티티에 운동성을 만들고, 세부 설정을 조정할 수 있습니다. 운동 성질에 따른 세 가지 컴포넌트가 있으며, 상황에 맞게 단독으로 사용하거나 조합하여 사용할 수 있습니다.

Tween Component 종류는 다음과 같습니다.

[{"Tweener":"TweenFloatingComponent","운동 형태":"원점을 기준으로 부유 운동"},{"Tweener":"TweenLineComponent","운동 형태":"원점에서 목적지까지의 선형운동"},{"Tweener":"TweenCircularComponent","운동 형태":"원점을 중심으로 원운동"}]

> Tip. 복수의 컴포넌트를 적용하면, 하나의 컴포넌트만 동작하거나 오작동하는 버그가 생길 수 있습니다. 엔티티에 Tween 컴포넌트 중 하나만 사용할 것을 권장합니다.

# TweenFloatingComponent

TweenFloatingComponent는 엔티티를 제자리에서 떠다니는 듯한 움직임을 만들 때 사용합니다. 엔티티의 원점 기준으로 상하로 움직입니다. 진폭과 사이클 시간을 조정하여 이동 거리와 속도를 조절할 수 있습니다. [png](16351333195647fd5eb29ccc348b394047a70d19da000) TweenFloatingComponent의 프로퍼티를 살펴봅시다.

[{"이름":"TweenType","설명":"Linear가 기본값입니다. 부유운동방식 종류별 설명은 하단의 참고자료를 참고하세요."},{"이름":"OneCycleTime","설명":"진폭 값을 왕복하는 시간입니다. 입력값이 커질수록 느리게 운동합니다."},{"이름":"Amplitude","설명":"엔티티의 원점으로부터 위아래로 이동하는 거리를 설정합니다. 입력값이 커질수록 이동 거리가 멀어집니다."},{"이름":"AutoStart","설명":"활성화하면 게임 시작 시 자동으로 운동이 시작됩니다."},{"이름":"AutoDestroy","설명":"활성화하면 운동이 끝나고 자동으로 해당 컴포넌트가 삭제됩니다."},{"이름":"SyncType","설명":"컴포넌트가 동기화되는 곳을 서버와 클라이언트 중 선택합니다. Default: Server에서 동작하며 모든 Client에게 동일하게 보입니다.ClientOnly: 해당 Client에서만 동작하고, 보입니다."}]

#### 적용하기

  1. 엔티티에 TweenFloatingComponent를 추가합니다. 프로퍼티 에디터 창에서 TweenFloatingComponent의 프로퍼티 값을 각각 다음과 같이 입력합니다.  
[png](16462833345885523a1977e4446a99b1974de5d14eb58)
  2. [gif](16351278266829a1fa2002d524f72bbeedbf7d481793b)



> Tip. 진폭 1의 값: 육안으로 정확하게 확인이 어려우나, 그리드의 세로 한 칸이 0.6이므로 약 2칸으로 가늠할 수 있습니다.

# TweenLineComponent

원점을 기준으로 목적지까지 선형 운동을 하게 만들 때 사용합니다. 목적지까지 편도, 왕복 운동 여부와 더불어 가·감속, 도달 시 튕김 등 운동 방식을 설정할 수 있습니다. [png](1635133344807543aac086f39472eaa343a3655f848d4) TweenLineComponent의 프로퍼티를 살펴봅시다.

[{"프로퍼티 명":"TweenType","설명":"기본값은 Linear입니다. 다른 모양의 운동 방식을 선택할 수 있습니다.선형운동 종류별 설명은 하단의 참고자료를 참고하세요."},{"프로퍼티 명":"Duration","설명":"목적지까지 도달하는 데 걸리는 시간을 의미합니다."},{"프로퍼티 명":"StopType","설명":"운동 종료 방식을 선택합니다.Oneway : 엔티티가 편도로 움직이며 목적지에 도착 후 운동을 종료합니다.OneRoundTrip : 엔티티가 목적지를 반환점으로 삼아 왕복 운동을 합니다. 1회 왕복 후 운동을 종료합니다.RepeatRoundTrip : 엔티티가 목적지를 반환점으로 삼아 왕복 운동을 반복합니다."},{"프로퍼티 명":"UseReturnTweenType","설명":"활성화하면 엔티티가 반환점을 돌며 별도로 설정한 방식으로 운동합니다."},{"프로퍼티 명":"ReturnTweenType","설명":"종료 방식을 OneRoundTrip\/RepeatRoundTrip으로 선택한 경우 반환점을 돌아올 때의 운동 방식을 설정합니다.리턴운동 종류별 설명은 하단의 참고자료를 참고하세요."},{"프로퍼티 명":"ReturnDuration","설명":"목적지에서 원점으로 이동하는 데 걸리는 시간을 의미합니다."},{"프로퍼티 명":"DestinationCoordinateType","설명":"엔티티가 운동할 때 목적지를 인식하는 방식입니다. Relative : 목적지 위치를 상대 좌표로 인식합니다. Absolute : 목적지 위치로 입력한 값을 절대 좌표로 인식합니다."},{"프로퍼티 명":"Positions","설명":"운동 방향의 목적지를 여러 개 추가할 수 있습니다. 목적지 개수는 [png](163452458863504f49c7a23aa4a41af56b5b4611a6daf) Scene에서 별도로 표시되지 않습니다.Size : 목적지 개수를 의미합니다. 0부터 시작하며 Size에 입력한 값만큼 목적지가 추가됩니다.[ 숫자 ] : 목적지의 위치를 X, Y 좌표로 입력합니다. [1] 의 좌표가 엔티티의 첫 번째 목적지이며 다음 수를 향해 이동합니다."},{"프로퍼티 명":"Interpolation","설명":"점들의 보간 방식을 결정합니다. 점이 2개 이상일 경우 유효하게 동작합니다.None: 기본값으로 보간하지 않습니다.SplineTypeA : SplineTypeA 형태의 보간을 합니다. 중간 점의 경우 반드시 해당 점을 지나지 않을 수 있습니다. *보간: 점과 점을 연결한 직선을 따라 엔티티가 이동할 경우 움직임이 부드럽지 않습니다. 이를 보완하기 위해 곡선으로 완만하게 만들어 움직임을 부드럽게 만드는 것을 뜻합니다."},{"프로퍼티 명":"AutoStart","설명":"활성화하면 게임 시작 시 자동으로 운동이 시작됩니다."},{"프로퍼티 명":"AutoDestroy","설명":"활성화하면 운동이 끝나고 자동으로 해당 컴포넌트가 삭제됩니다."},{"프로퍼티 명":"SyncType","설명":"컴포넌트가 동기화되는 곳을 서버와 클라이언트 중 선택합니다.Default: Server에서 동작하며 모든 Client에게 동일하게 보입니다.ClientOnly: 해당 Client에서만 동작하고, 보입니다."}]

#### 적용하기

  1. 엔티티에 TweenLineComponent를 추가하고 다음과 같이 설정합니다.  
[png](1646283379788c89d5799ffb74e478c8d62d6db6be1e2)
  2. [gif](1635128047869e1e7391ce85e4e7989395243e2590395)



# TweenCircularComponent

원점을 기준으로 원형 운동을 하게 만들 때 사용합니다. 회전 수, 속도, 반경을 설정할 수 있습니다.

TweenCircularComponent의 프로퍼티를 살펴봅시다.

[{"프로퍼티 명":"Radius","설명":"원점을 기준으로 입력한 값만큼 멀어져 원운동을 합니다.숫자가 클수록 중심에서 멀어집니다.","Unnamed: 2":"nan","Unnamed: 3":"nan"},{"프로퍼티 명":"Speed","설명":"입력한 숫자가 클수록 엔티티가 빠르게 원운동을 합니다.","Unnamed: 2":"nan","Unnamed: 3":"nan"},{"프로퍼티 명":"LookAtCenter","설명":"활성화하면 엔티티 사각형 테두리 윗변이 중심점을 바라보고 회전합니다.","Unnamed: 2":"nan","Unnamed: 3":"nan"},{"프로퍼티 명":"Degree","설명":"입력한 각도만큼 회전하고 멈춥니다. 0을 입력하면 멈추지 않고 계속 원운동을 합니다.","Unnamed: 2":"Radius","Unnamed: 3":"원점을 기준으로 입력한 값만큼 멀어져 원운동을 합니다.숫자가 클수록 중심에서 멀어집니다."},{"프로퍼티 명":"IsClockwise","설명":"어느 방향으로 회전할지 정의합니다. true인 경우 시계 방향으로 회전합니다.","Unnamed: 2":"가 삭제됩니다.","Unnamed: 3":"nan"},{"프로퍼티 명":"AutoStart","설명":"활성화하면 게임 시작 시 자동으로 운동이 시작됩니다.","Unnamed: 2":"nan","Unnamed: 3":"nan"},{"프로퍼티 명":"AutoDestroy","설명":"활성화하면 운동이 끝나고 자동으로 해당 컴포넌트가 삭제됩니다","Unnamed: 2":"nan","Unnamed: 3":"nan"},{"프로퍼티 명":"SyncType","설명":"컴포넌트가 동기화되는 곳을 서버와 클라이언트 중 선택합니다.Default: Server에서 동작하며 모든 Client에게 동일하게 보입니다.ClientOnly: 해당 Client에서만 동작하고, 보입니다.","Unnamed: 2":"nan","Unnamed: 3":"nan"}]

#### 적용하기

  1. 엔티티에 TweenCircularComponent를 추가하고 다음과 같이 설정합니다.  
[png](164628347830889af06e47ea34c718e77f29897772157)
  2.  [시작] 버튼을 누른 뒤 테스트해 봅시다.  
Radius 값만 입력하면, 엔티티는 반경을 따라서만 회전합니다.  
LookAtCenter을 적용한다면 엔티티 사각형 테두리 윗변이 회전 반경에 붙어 회전 기준점을 바라보며 회전합니다.  




[{"기본 회전":"[png](1635132897859b8a88490ede14cf3ab4961b279af2fbc)","LookAtCenter 적용":"[png](16370579280376c43e57eec704eaea6bac377ce481b5c)"},{"기본 회전":"[gif](16351329567296ac3abbf46b64488b31bd416bd566412)","LookAtCenter 적용":"[gif](16351329728073d33972360c648cd9e11a4c70eb1c05f)"}]

# 참고자료 - Ease Type

장난감의 태엽을 감아 지면에 놓았을 때의 모습을 관찰한 기억을 떠올려봅시다. 멈춘 상태에서 천천히 움직이기 시작해 일정한 속도로 이동하다가 점점 느려지며 멈추는 모습을 관찰 할 수 있을 것입니다. 일상에서 만나는 사물은 대부분 속도를 시시각각 바꾸며 움직입니다. 그래서 계속 똑같은 속도로 움직이는 로봇은 오히려 어색하게 보입니다. 메이플스토리 월드에서는 엔티티가 자연스럽게 움직이도록 엔티티의 운동 속도와 반동을 다르게 설정할 수 있습니다. 메이커에서 지원하는 타입은 10가지이며, 각 3가지 변형이 있습니다. 아래 표를 참고하여 적절하게 이용하시길 바랍니다.

종류: Quad, Expo, Cubic, Quart, Quint, Circ, Sine, Elastic, Bounce, Back

변형

  * Ease Out : 빠르게 움직이기 시작해서 마지막에 감속하며 목적지에서 멈춥니다
  * Ease In : 느리게 움직이기 시작하다 가속하며 목적지에서 멈춥니다
  * Ease In-Out : 느리게 움직이기 시작해 중간 구간에서 빠르게 움직이다, 감속하며 목적지에서 멈춥니다.



[png](1635132999893719a42ed301645e8afcf19bb1a302ea9)