애니메이션 만들기

# 학습 과정 소개

애니메이션 클립 에디터를 이용해 기존의 메이플스토리 월드 애니메이션을 편집하거나 직접 제작한 애니메이션을 월드에 활용할 수 있습니다. 애니메이션 클립 에디터의 구성과 사용 방법을 알아봅시다.

# 애니메이션 클립 에디터 소개

[png](1689298030106bf128b54e6924786b59a8721b26d23cf)

[{"숫자":"\u0001","설명":"[새로 열기], [추가하기] 버튼으로 불러온 스프라이트가 배치됩니다."},{"숫자":"\u0001","설명":"타임라인에 추가한 스프라이트들이 차례로 재생되며 초록 십자선을 기준으로 애니메이션 재생 위치를 확인할 수 있습니다.상단의 Scale 슬라이더를 조절하여 축소하거나 확대해 볼 수 있습니다."},{"숫자":"\u0001","설명":"편집, 제작한 리소스를 저장하기 위해 사용합니다. 이름: 필수 값으로 이름이 없으면 저장되지 않습니다. 카테고리: 애니메이션 클립이 저장될 카테고리를 선택합니다. 저장 시 선택한 카테고리로 Resource Storage에 저장됩니다.설명: 저장할 애니메이션 클립의 설명을 작성할 수 있습니다."},{"숫자":"\u0001","설명":"애니메이션이 순서대로 나열되는 타임라인 창입니다. 재생 순서는 왼쪽에서 오른쪽입니다.스프라이트 순서를 변경하거나 복사할 수 있습니다. 재생 위치(Offset)을 변경할 수 있고, 재생 속도를 조절할 수 있습니다."},{"숫자":"\u0001","설명":"RUID 복사: 저장한 애니메이션 클립의 RUID를 복사합니다. 업로드: 편집, 제작한 애니메이션 클립을 저장합니다."}]

# 리소스 불러오기

[{"index":"Resource Storage","0":"

Scene 옆의 Resource Storage 혹은 Panels - Resource Storage를 선택합니다.MSW 리소스 - animationclip에서 원하는 애니메이션 클립의 콘텍스트 메뉴를 엽니다.[png](16456960832992162cfc946dc41b5bcea1ba1916207e5)Make Animation Clip을 선택하면 AnimationClip Editor가 열리고 선택한 애니메이션 클립의 모든 스프라이트가 불러와집니다.<\/ol>"},{"index":"AnimationClip Editor","0":"Window - Animation Clip Editor - 새로 열기 버튼을 누릅니다.[png](1645696224908f637e6221fe64268b998d7c5f1441f03)불러오려는 애니메이션 클립을 선택합니다.선택한 애니메이션 클립의 모든 스프라이트를 불러옵니다.<\/ol>"}]

> Tip. 애니메이션 클립을 Resource Picker에서 고를 때 이미지 위에 마우스 커서를 올려놓으면 애니메이션이 재생됩니다. [gif](16456955254226df46c48334d46d3ba67812d1387132b)

# 오프셋 조정하기

메이플스토리 월드에서 제공하는 애니메이션 클립들의 오프셋 위치는 다릅니다. 어떤 애니메이션 클립은 RUID 값을 입력했을 때 생각했던 것과 다른 곳에 배치될 때가 있습니다. 이는 리소스마다 오프셋 값이 다르기 때문입니다. 특정 애니메이션 클립을 자주 사용한다면 애니메이션을 편집해 오프셋 위치를 정중앙으로 맞출 수 있습니다. 오프셋을 정중앙으로 변경하면 엔티티 배치를 수월하게 할 수 있습니다.

        1. 타임라인의 이미지 중 하나를 선택해 초록색 가로, 세로 선이 교차하는 지점에 맞게 Offset 값을 조정합니다.
        2. 가장 첫 번째의 이미지를 선택하고 Shift 키를 누릅니다.
        3. 스크롤바를 움직여 마지막 이미지를 선택합니다.
        4. Offset의 Y 값에 -70을 입력합니다.
        5.  [재생] 버튼을 눌러 이미지가 선의 교차 지점에서 재생되는지 확인합니다.
        6. 편집한 애니메이션의 이름을 입력하고, [업로드] 버튼을 눌러 저장합니다. [gif](1689290777042f5a94f531c2c4e9ba9aba655904df826)

오프셋은 색다른 움직임을 표현할 때도 활용할 수 있습니다. 프레임 전체를 수정하는 것이 아니라 특정 프레임 오프셋의 Y값만 변경한다면 점프하는 듯한 애니메이션을 만들 수도 있습니다.

# 프레임 속도 조절하기

하나의 프레임이 재생될 시간을 조절해 같은 스프라이트로 제작한 애니메이션의 재생 속도를 조절할 수 있습니다. 재생 속도 값은 수가 커질수록 느리게 재생됩니다.

[{"index":"0.3","0":"[gif](1647569448836918d836f9ef04519bab4799a6bc03399)"},{"index":"2.0","0":"[gif](1647569468680d2f96a8611664549b55bddc28babe088)"}]

        1. 타임라인의 가장 첫 번째 이미지를 선택하고 Shift 키를 누릅니다.
        2. 스크롤 바를 움직여 마지막 이미지를 선택합니다.
        3. Delay 값에 0.3을 입력합니다.
        4.  [재생] 버튼을 눌러 애니메이션 재생 속도를 확인합니다.
        5. 편집한 애니메이션의 이름을 입력하고, [업로드] 버튼을 눌러 저장합니다.  
[gif](1689291732468cb763ecbdec1468d9de2d7ce1153afcc)

# 프레임 조정하기

프레임은 애니메이션이 되는 이미지를 늘어놓았을 때 하나의 스프라이프(이미지)를 프레임이라 칭합니다. 타임라인에서는 맨 왼쪽의 스프라이프가 첫 번째 프레임이 되고, 맨 오른쪽의 스프라이프가 마지막 프레임이 됩니다. 프레임을 선택해 애니메이션 재생 순서를 조정할 수 있습니다. 또한 MSW 클립 리소스에 MSW 스프라이트를 추가하거나, 제작한 스프라이트를 추가해 기존과 다른 독특한 애니메이션을 만들 수 있습니다.

프레임 조정은 스프라이트를 선택한 뒤 원하는 위치로 드래그하거나 버튼을 눌러 진행할 수 있습니다. 프레임 조정 버튼 아이콘은 다음과 같습니다. [png](1645703702067ee94dc82642b43f4bfd7039e24970f47)

[{"아이콘":"\u0001","설명":"선택한 스프라이트를 복제해 타임라인 마지막에 추가합니다."},{"아이콘":"\u0001","설명":"선택한 스프라이트를 맨 앞으로 옮깁니다."},{"아이콘":"\u0001","설명":"선택한 스프라이트를 한 칸(프레임) 앞으로 이동시킵니다."},{"아이콘":"\u0001","설명":"선택한 스프라이프를 한 칸(프레임) 뒤로 이동시킵니다."},{"아이콘":"\u0001","설명":"선택한 스프라이프를 맨 뒤로 옮깁니다."}]

#### 변신하는 애니메이션 만들기

하나의 애니메이션 클립과 여러 장의 스프라이트를 추가해 모습이 변하는 몬스터 애니메이션을 만들어봅시다. [gif](164578012706467425729618e4962bbc03bb827cbf967)

        1. [새로 열기] 버튼을 눌러 MSW 리소스 - monster - animationclip-4440를 선택합니다.   

        2. [추가하기] 버튼을 눌러 monster - sprite-171514, 171518, 171541, 171544를 선택합니다.   

        3. 스프라이프를 추가한 뒤, 드래그하여 프레임을 원하는 위치로 움직입니다. [gif](1689294966234e70238ff30c74c5bbc6c42c0ee62b076)   

        4. 이름을 입력하고, 카테고리를 NPC로 변경한 뒤 [업로드] 버튼을 누릅니다.   

        5. Resource Storage - animationclip에서 추가된 애니메이션 클립을 확인합니다. [png](1689295304237077c76fcb909452bab8c1ed6a261d075)   


# 나만의 애니메이션 만들기

직접 여러 장의 스프라이트를 제작해 나만의 독특한 애니메이션 클립을 제작할 수 있습니다. 직접 제작한 스프라이트가 없다면, 아래 파일을 받아 진행해봅시다. $$attachFile {"name":"Frame.zip","url":"https://mod-file.dn.nexoncdn.co.kr/storage/DOCs/Frame.zip"} $$

        1. Resource Storage - 내 리소스 - sprite - npc를 선택합니다. 선택한 폴더로 크리에이터의 스프라이트가 저장됩니다.   

        2. 검색창 왼쪽의 [+] 버튼을 눌러 파일을 불러옵니다. 

> Tip 한번에 여러 장의 파일을 불러올 수 없습니다.   
> 

        3. Window - AnimationClip Editor 창을 열고, [추가하기] 버튼을 클릭합니다.   

        4. Resource Picker - 내 리소스 - sprite - npc에서 스프라이프를 하나씩 선택해 추가합니다. [gif](1689296780181013da160eb024e48bcf68417deccac15)   

        5. 추가한 스프라이트를 선택하고, 타임라인에 추가합니다.   

        6.  [재생] 버튼을 눌러 애니메이션을 확인합니다. [gif](1689297597848ccfa98fa15054d1a8154e1f7a734a087)   

        7. 이름을 입력하고, 카테고리를 npc로 변경한 뒤 업로드를 누릅니다. [png](1689297700213a70ed35a06484eeebae59aac566e2eee)