Making Animations

# Course Introduction

You can edit existing MapleStory Worlds' animations using the animation clip editor or use your own animations in the World. Let's learn how to configure and use the animation clip editor.

# Introduction to the Animation Clip eEitor

[png](16892985632978ba85c6b5a034b8b98f424cf6cc68de5)

[{"Number":"\u0001","Description":"The sprite's loaded via [Open New], and an [Add] button will be placed."},{"Number":"\u0001","Description":"The sprites added to the timeline are played sequentially, and you can check the animation playback position based on the green crosshairs.The Scale slider at the top can be used to zoom in or out."},{"Number":"\u0001","Description":"Used to save edited and created resources. Name: Name is a required value. It cannot be saved without a name. Category: Select the category where the animation clips will be saved. When saving, the selected category is saved in Resource Storage.Description: You can write a description of the animation clip to be saved."},{"Number":"\u0001","Description":"A timeline window where animations are listed in order. Play order is from left to right.You can change the order of sprites or copy them. You can change the playback position (Offset) and control the playback speed."},{"Number":"\u0001","Description":"Copy RUID: Copies the RUID of the saved animation clip. Upload: Saves edited and created animation clips."}]

# Load Resources

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

Select Resource Storage or Panels - Resource Storage next to Scene.In MSW Resource - animationclip, open the context menu of the desired animation clip.[png](1656418775124de43bfb325a942cab8e9a51e7c2be9c9)Select Make Animation Clip to open the AnimationClip Editor and load all sprites of the selected animation clip.<\/ol>"},{"index":"AimationClip Editor","0":"Click the Window - Animation Clip Editor - Open New button.[png](1645696224908f637e6221fe64268b998d7c5f1441f03)Select the animation clip you want to load.Loads all sprites of the selected animation clip.<\/ol>"}]

> Tip When an animation clip is selected in the Resource Picker, the animation plays when the mouse cursor is over the image. [gif](16456955254226df46c48334d46d3ba67812d1387132b)

# Adjusting Offset

The offset positions of animation clips provided by MapleStory Worlds are different. For some animation clips, the RUID value is sometimes placed in a different place from where it was supposed to be. This is because each resource has a different offset value. If you use a particular animation clip frequently, you can edit the animation to center the offset position. Changing the offset to center can make placing entities easier.

        1. Select one of the images on the timeline and adjust the Offset value to match the intersection of the green horizontal and vertical lines.
        2. Select the first image and press Shift.
        3. Move the scrollbar to select the last image.
        4. Enter -70 for Y value of Offset.
        5. Press  [Play] to see if the image plays at the intersection of the lines.
        6. Enter a name for the edited animation and click [Upload] to save. [gif](1689290777042f5a94f531c2c4e9ba9aba655904df826)

Offset can also be used to display unusual movements. You can create a jump-like animation by changing the Y value of given frame offsets instead of changing the entire frame.

# Adjusting the Frame Speed

You can control the playback speed of animations created with the same sprite by adjusting the duration of one frame. The larger the play speed value is, the slower the playback.

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

        1. Select the first image in the timeline and press Shift.
        2. Move the scrollbar to select the last image.
        3. Enter 0.3 for the Delay value.
        4. Press  [Play] to see the animation playback speed.
        5. Enter a name for the edited animation and click [Upload] to save.  
[gif](1689299519528e874a0e831b04b028175d0f44ee42afd)

# Adjusting Frame

A frame is a single sprite (image) when the images to be animated are arranged. In the timeline, the leftmost sprite becomes the first frame, and the rightmost sprite becomes the last frame. You can adjust the animation playback order by selecting frames. You can also add MSW sprites to the MSW clip resource or add your own sprites to create unique animations that are different from the original ones.

Frames can be adjusted by selecting a sprite and dragging it to the desired location or pressing the button. The frame adjustment icons are as follows. [png](1645703702067ee94dc82642b43f4bfd7039e24970f47)

[{"Icon":"\u0001","Description":"Duplicate the selected sprite and add it to the end of the timeline."},{"Icon":"\u0001","Description":"Moves the selected sprite to the front."},{"Icon":"\u0001","Description":"Move the selected sprite one space (frame) forward."},{"Icon":"\u0001","Description":"Move the selected sprite back one space (frame)."},{"Icon":"\u0001","Description":"Move the selected sprite to the very back."}]

#### Creating Transforming Animations

Let's add a single animation clip and several sprites to create an animation of a transforming monster. [gif](164578012706467425729618e4962bbc03bb827cbf967)

        1. Click [Open New] and select MSW Resource - monster - animationclip-4440.   

        2. Click [Add] and select monster - sprite-171514, 171518, 171541, 171544.   

        3. Add a sprite and drag to move the frame to the desired location. [gif](1689294966234e70238ff30c74c5bbc6c42c0ee62b076)   

        4. Enter the name, change Category to NPC, and select [Upload].   

        5. See the added animation clip from Resource Storage - animationclip. [png](1689299814441db559f684d9d4fdcb61dc2446c450b38)   


# Making My Animation

Create your own sprites to create your own unique animation clips. If you do not have your own sprite, download the file below and follow along. $$attachFile {"name":"Frame.zip","url":"https://mod-file.dn.nexoncdn.co.kr/storage/DOCs/Frame.zip"} $$

        1. Select Resource Storage - My Resources - sprite - npc. The creator's sprites are saved to the folder you choose.   

        2. Click the [+] button on the left side of the search bar to load the file. 

> Tip Multiple files cannot be loaded at once.   
> 

        3. Open the AnimationClip Editor window via Window and select [Add].   

        4. Select and add sprites one by one from Resource Picker - My Resources - sprite - npc. [gif](16893001407289c394805a7554de291f015ca115e2d24)   

        5. Select the added sprite and add it to the timeline.   

        6. Press  [Play] to see the animation. [gif](168930039655358decfac3af84d658e8a18fcbbcf34b9)   

        7. Enter the name, change Category to NPC, and select Upload. [png](16893005211903635451de29d4a9598420363cd213774)