Use Skeleton Resource

# Course Introduction

You can play various animations in MapleStory Worlds using Skeleton resources created by creators.

# Registering Skeleton Resources

**Only resources that were created with Spine 4.1 can be added as Skeleton resources in MapleStory World. Adding Skeletons to Resource Storage requires png, atlas, skel files that need to be imported in one folder, and other files can't be included.

[png](17641465058783591e788b6144e72beac49549043fcdc)

  1. Create a resource in Spine 4.1.
  2. Select Resource Storage - My Resources - Skeleton and press the [+] button.
  3. Select a resource folder that you want to add.



#### Notes

  * Only resources created with Spine 4.1 can be registered.
  * Resource registration requires png, atlas, skel files.
  * Registration will fail if there are files other than png, atlas, skel.
  * Up to 8 png files can be included in a single skeleton resource.
  * The png file size can be up to 4,096*4,096.



# Utilizing Skeletons

Use [SkeletonRendererComponent](/apiReference/Components/SkeletonRendererComponent) when using a skeleton resource in a world and use [SkeletonGUIRendererComponent](/apiReference/Components/SkeletonGUIRendererComponent) when using it in UI. Use the properties of both components to play the animation or use functions to control the animation as the creator sees fit.

  1. Add SkeletonRendererComponent to entity.
  2. Add the RUID for the Skeleton resource that the creator added to SkeletonRUID.
  3. Change the property value to play the desired skin and animation.



## Main Properties

#### AnimationNames

Add the AnimationNames value and set the animation play order. Will play in sequence starting with AnimationNames no. 1. [png](1764146578340778f661831ad441894e15bfd64eed436)

#### SkinNames

Add the SkinNames value to set a skin. When using Skeleton resources with various skins, you can usse a combination of skins to play an animation with a single entity. [png](17641465585439341bd4463404e948916b8fcd67bc851)

#### Loop

The animation will repeat in a loop when Loop is set as true.

# Skeleton Animation Control

## Adding Animations

Add an animation with the `AddAnimation()` function. You can set multiple properties by using the `AddAnimation()` function unlike the AnimaitonNames property. The `AddAnimation()` function receives [SkeletonAnimationClip](/apiReference/Misc/SkeletonAnimationClip) as a parameter. `SkeletonAnimationClip` shows an animation's detailed properties. Use this parameter to set the animation track number, name, loop time, speed, etc.

#### SkeletonAnimationClip

`SkeletonAnimationClip` displays the animation's detailed properties. The following are the main properties. Please refer to [SkeletonAnimationClip](/apiReference/Misc/SkeletonAnimationClip) for details.

[{"Name":"Alpha","Description":"The mix ratio with other tracks. The default value is 1."},{"Name":"Delay","Description":"The wait time until the animation starts playing in units of seconds."},{"Name":"MixDuration","Description":"The time mixed with the previous animation when transitioning to a new one in units of seconds."},{"Name":"TimeScale","Description":"Animation play speed. The default value is 1."}]

## Adding Tracks

Add multiple tracks using TrackIndex. TrackIndex is the animation play track number, and you can play multiple animations simultaneously by adding animations to a track. The creator can add tracks with the number of choice. For example, a talking animation can be on track 2 and a gun shooting animation on track 3 to show the animation of walking while firing a gun.

> Tip Track 1 is used in the AnimationNames property, so it can be set as a TrackIndex.\

The TrackIndex has the property of higher number tracks saving over the lower number tracks. For example if a walking animation is added to track 2 and a firing animation to track 3, even if the walking animation has the sprite moving its arms, the firing animation on track 3 shows sprite holding out it arms, so it will show track 3's firing animation.
    
    
    @Component
    script AnimationInitializer extends Component
        @ExecSpace("ServerOnly")
        method void OnBeginPlay()
            local skel = self.Entity.SkeletonRendererComponent
            
            local walk = SkeletonAnimationClip()
            walk.TrackIndex = 2
            walk.AnimationName = "walk"
            skel:AddAnimation(walk)
            
            local shoot = SkeletonAnimationClip()
            shoot.TrackIndex = 3
            shoot.AnimationName = "shoot"
            skel:AddAnimation(shoot)
        end
    end
    

## Emptying Tracks

Use the `SetAnimation()` function to empty the track and add an animation. If there is an animation being played in the emptied track, the `MixDuration` will also applied at once while transitioning to a new animation.

## Adding Empty Animations

Add empty animations using the `AddEmptyAnimation()` and `SetEmptyAnimation()` functions. Empty animations are usually used as a transition effect between two animations. Both functions receive `SkeletonAnimationClip` as a paraemeter and ignores `AnimationName`. If the ShootEnd animation is transitioned to the Walk animation like below, the transition time can be freely modulated with MixDuration by using the `SetEmptyAnimation()` function.
    
    
    @Component
    script AnimationTrackClearer extends Component
        @ExecSpace("ServerOnly")
        method void OnBeginPlay()
            local skel = self.Entity.SkeletonRendererComponent
            
            local shootEnd = SkeletonAnimationClip()
            shootEnd.TrackIndex = 3
            shootEnd.MixDuration = 0.5
            skel:SetEmptyAnimation(shootEnd)
        end
    end
    

## Removing Animations

Remove animations using `ClearTrack()`. Erase animations that are playing using the `ClearTrack()` function. But in this case, the animation will transition immediately, which may look like a sudden and unexpected change.
    
    
    @Component
    script AnimationTrackClearer extends Component
        @ExecSpace("ServerOnly")
        method void OnBeginPlay()
            local skel = self.Entity.SkeletonRendererComponent
            
            skel:ClearTrack(3)
        end
    end
    

## Adding Attachments

Add or remove attachement from slots using the `SetAttachment()` function. You can add a goggle attachment like in the example below.
    
    
    @Component
    script GoggleAttacher extends Component
        @ExecSpace("ServerOnly")
        method void OnBeginPlay()
            local skel = self.Entity.SkeletonRendererComponent
            
            skel:SetAttachment("face", "goggle")
        end
    end
    

## Removing Attachments

When removing attachments, deliver nil to `attachmentName`, the second argument for the `SetAttachment()` function.
    
    
    @Component
    script FaceDetacher extends Component
        @ExecSpace("ServerOnly")
        method void OnBeginPlay()
            local skel = self.Entity.SkeletonRendererComponent
            
            skel:SetAttachment("face", nil)
        end
    end