# Basics of Avatar Animation
{% hint style="info" %}
MYTY Kit supports both **bone animation** and **frame animation**.
{% endhint %}
## Avatar decomposition
#### ✅ To make an avatar move, we must first decompose it.
* For example, to make the eyes blink, we need to separate the original image into an image of the face and an image of the eyes. Similarly, to make the hair move, we need to separate the original image into an image of the hair and an image of the head.
#### ✅ Define which parts you want to give movement to, and decompose them into layers.
* Each decomposed layer (sprite) can be [bone-animated](#bone-animation) by “implanting” bone(s) into it ([**rigging**](https://myty.gitbook.io/products/kit/before-you-begin/myty-kit-glossary)).
#### ✅ In addition to giving movement to an existing image, you can display a different image altogether.
* Image layers sets are organized by the [**Sprite Library**](https://myty.gitbook.io/products/kit/before-you-begin/myty-kit-glossary), and can be [frame-animated](https://www.notion.so/1-Prepare-illustration-PSB-7043e3500ec64067a8f193b608ec8828).
## 🦴 Bone animation
* Bones can be “implanted” to an avatar to simulate **human-like joint movements**.
### To use Bone animation…
1. Define parts that you want to give movement to, and decompose them into layers.
2. If you’d like to bind more than one bone to an image layer, use the **“Bone Weight”** function.
#### 👉 See more details
{% content-ref url="../../make-animation/7.-rigging-in-sprite-editor" %}
[7.-rigging-in-sprite-editor](https://myty.gitbook.io/products/kit/make-animation/7.-rigging-in-sprite-editor)
{% endcontent-ref %}
## 🎭 Frame(Sprite) animation
* When the user makes a particular movement, a corresponding image (sprite) is is displayed. This is useful when the desired animation requires a change in the frame’s graphic elements.
* For example, you can set a different graphic (sprite) for the avatar’s `default Eyes&Mouth`and the `Laugh eyes&mouth`. When the user laughs, the `default Eyes&Mouth`will be changed to the `Laugh eyes&mouth` graphic.
### To use Frame animation
1. For frame animation to work properly, all involved layers must be organized a certain way.
2. In the example above, we will frame animate the Eyes and the Mouth.
3. Decide which will be the default sprites (for when the person has a neutral expression) and which will be the animation sprites (for when the person is actively talking or blinking etc).
4. Keep the default sprites under the `Face > Eyes`, and the `Face > Mouth` folders (groups). This will result in the following three layers: \
Face > Eyes > DefaultEye\_R (layer)\
Face > Eyes > DefaultEye\_L (layer)\
Face > Mouth > DefaultMouth (layer)
5. Create a new root folder (group) called Animation, and create children folders (groups) that mimic the organizational hierarchy of the three layers in the previous step. This will result in the following folders: \
Animation > Face > Eyes > DefaultEye\_R (folder)\
Animation > Face > Eyes > DefaultEye\_L (folder)\
Animation > Face > Mouth > DefaultMouth (folder)
6. Move all animation sprites and a copy of the default sprites to their respective folders. This will result in the following ten layers: \
Animation > Face > Eyes > DefaultEye\_R > DefaultEye\_R, AngryEye\_R, SmileEye\_R (layers)\
Animation > Face > Eyes > DefaultEye\_L > DefaultEye\_L, AngryEye\_L, SmileEye\_L (layers)\
Animation > Face > Mouth > DefaultMouth > DefaultMouth, SmileMouth, LaughMouth, AngryMouth (layers)
How can I setup the default sprite of still image which will be applied in Sprite Animation?
* The last (bottom) image in each group of the animation directory is set to a default image. You can’t change it as you import a PSB file.
{% hint style="danger" %}
All image layers and folders under the “Animation” folder must retain the same organizational hierarchy as the original it was duplicated from.
{% endhint %}
## 🌟 Is this your first time with avatar animation?
### MYTY Kit’s recommendation for decomposing original images
#### Naming
* All folders and image layers should be named in English
* It’s a good idea to choose a case or a combination of cases, and stick to it. For example, a combination of the **CamelCase** and **snake\_case** would result in “Layer\_Name,” as seen in the images above.
* For parts that come in left-right pairs, distinguish between “Layer\_Name\_L” and “Layer\_Name\_R”
#### Order
* The order of folders and image layers in the Layers Panel defines the position of each layer, and determines if a particular layer appears behind or in front of other layers.
* If a layer is at the top of the stack, the objects in the layer will appear in front of all other layers.
#### Grouping
* Group layers belonging to the same part together.
* For example, you can make layer groups in the following fashion: (The exact order and naming is at your own discretion)
* Hair
* Accessaries
* Face
* Body
* Head
{% hint style="success" %}
**Have a question or an idea?** \
If you have a question to ask or an idea to share, participate in the [MYTY Kit Community](https://discord.com/invite/myty). We’d love to hear from you.:smile:
{% endhint %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://myty.gitbook.io/products/kit/getting-started/1.-prepare-illustration-psb/basics-of-avatar-animation.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.