# 7. Rigging in Sprite Editor

## Key Requirements for MYTY Kit

#### ✅ Do not modify the avatar PSB file after rigging.

**✅ Rigging must be completed for every single sprite, including those in the animation groups.**

**✅ All bone names must start with 'bone'.** ex) bone\_root, bone\_head, bone\_eyes...

## What is Bone?

![](https://667382355-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZT6KDsWarcdCAiEJZ3TV%2Fuploads%2FCs6zdfvFndZpWvtcctsg%2FScreen%20Shot%202022-06-14%20at%201.28.29%20PM.png?alt=media\&token=004c55c5-6edc-4667-a146-3bff9935a74b)

* Bones and their joints help the avatar move, like a real human. Bones are attached to an avatar to give a systematic way of creating poses and animations.
* A Skeleton refers to a group of bones. Skeletons have a hierarchy of bones, and there is always only one root bone. A root bone can have multiple children bones. All bones except the root bone must have at least one parent bone, and can have children bones of their own.

## What is Rigging?

![](https://667382355-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZT6KDsWarcdCAiEJZ3TV%2Fuploads%2FCLFMwIJmMVXNDQnQUFXC%2Frigging.gif?alt=media\&token=ec3da1bd-8e0f-4eca-97ef-5be43c9daea7)

* Rigging is the process of binding bones to modeled data. MYTY Kit currently supports the creation of 2D versions of NFT Avatars. So for us, rigging is defined as binding bones to a 2D sprite.
* Since it's difficult to manually manipulate the vertices or polygons of an image (mesh), we transform an image through its rigged skeleton.
* It's important to place joints in the right place so that the skeleton has the intended range of motion.

## What is Weight?

![](https://667382355-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZT6KDsWarcdCAiEJZ3TV%2Fuploads%2FHxLxfI6NntJkdSyQULRW%2Fweight.gif?alt=media\&token=325cd3eb-eff3-4cf6-890b-966f200f33c4)

* Weight is a tool that visually indicates how much influence a bone has on a particular vertex.  An image vertex is shown in the color(s) of its connected bone(s).
* If multiple bones are connected to one image, the image will be shown in a gradated combination of the colors of its connected bones. This gradation represents each bone's relative influence. 
* You can use the Weight Brush or Weight Slider to modify the relative weights.

## What is Mesh?

* Mesh is a polygon that the Unity makes the image deformation. Read more details on the below page.

{% content-ref url="7.-rigging-in-sprite-editor/mesh-in-unity" %}
[mesh-in-unity](https://myty.gitbook.io/myty-kit/make-animation/7.-rigging-in-sprite-editor/mesh-in-unity)
{% endcontent-ref %}

{% hint style="info" %}
**What do Bones, Geometry, and Weights mean?** Refer to the following Unity pages.

👉 [Skinning Editor](https://docs.unity3d.com/Packages/com.unity.2d.animation@4.2/manual/SkinEdToolsShortcuts.html)

👉 [Tutorials](https://docs.unity3d.com/Packages/com.unity.2d.animation@4.1/manual/CharacterRig.html) 
{% endhint %}

## Open the Sprite Editor

{% embed url="<https://youtu.be/5uBldwkgMn4>" %}

1\. After selecting the PSB file in the <mark style="color:purple;">`Project window`</mark>, go to the <mark style="color:purple;">`Inspector window`</mark>, and under the General section, click on the <mark style="color:purple;">`Open Sprite Editor`</mark> button. This will display which Sprites the avatar is made of.

![](https://667382355-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZT6KDsWarcdCAiEJZ3TV%2Fuploads%2FqFVCctipNS3SVUkOqa4m%2FScreen%20Shot%202022-06-13%20at%203.35.42%20PM.png?alt=media\&token=503e9a4c-5875-4f92-ae62-7057e57740d2)

![](https://667382355-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZT6KDsWarcdCAiEJZ3TV%2Fuploads%2FQOMigt5aQQbKYVCmqcBJ%2FScreen%20Shot%202022-06-13%20at%203.36.20%20PM.png?alt=media\&token=f3c06648-e458-42e3-abbd-afea5ec49dfb)

2\. Near the very top of the window, click on <mark style="color:purple;">`Sprite Editor ▼`</mark> and select <mark style="color:purple;">`Skinning Editor`</mark> to start rigging.

![](https://667382355-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZT6KDsWarcdCAiEJZ3TV%2Fuploads%2FxdV1RLY68gdcdIPjVPOr%2FScreen%20Shot%202022-06-13%20at%203.37.02%20PM.png?alt=media\&token=b92f14a3-b23c-4475-bea1-ea18f69598c1)

## Show/Hide sprites

1. When you click the <mark style="color:purple;">`Visibility tab`</mark> in the upper right corner, you will see the PSB file's Bone and Sprite information.

   <img src="https://667382355-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZT6KDsWarcdCAiEJZ3TV%2Fuploads%2FNL2CsKuJoQhcJI2Di7GV%2FScreen%20Shot%202022-06-13%20at%203.50.09%20PM.png?alt=media&#x26;token=e114bcd4-2c15-4159-adb3-1c1c65958a60" alt="" data-size="original">
2. You can show or hide sprites by clicking the eye icon in front of them.

   <img src="https://667382355-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZT6KDsWarcdCAiEJZ3TV%2Fuploads%2F1mxoRpAfC0rhk0P6Y5n7%2FScreen%20Shot%202022-06-13%20at%203.49.09%20PM.png?alt=media&#x26;token=27e9736e-92b1-422a-a6cc-e12a2e852952" alt="" data-size="original">

## Create Bone

{% embed url="<https://youtu.be/0yH-wKuv1bE>" %}
Tutorial Video - Bone Rigging
{% endembed %}

1. Go to the <mark style="color:purple;">`Bones`</mark> section of the left tool tab, and click <mark style="color:purple;">`Create Bone.`</mark>
   1. Think of the human skeleton as a standard.
   2. Make the skeleton as simple as possible.
   3. Bones should be created bottom -> up, starting at the inferior edge of the body. For example: spine (body) > skull (head).
   4. Click the start point of the spine (hip-end), drag up, and click the endpoint (neck-end). Next, make the skull bone.
   5. You can exit from creating the next bone in a series by right-clicking.
   6. You can create a child bone by clicking <mark style="color:purple;">`Create Bone`</mark> and hovering over the parent bone.
   7. Give bones a descriptive name for easy management. **Keep in mind the word "bone" must not be deleted.** **Only the number after ‘bone’ can be changed.** \
      For example: bone\_1 -> bone\_body.&#x20;
2. As a rule of thumb, the body is the main axis, to which the neck, head, and arm bones are attached.

## Auto Weight

{% embed url="<https://youtu.be/IKP0QCsVFQc>" %}
Tutorial Video - Auto Weight and Edit Weight
{% endembed %}

1. Show sprite(s) that you want to set weight(s) for.
2. In the <mark style="color:purple;">`Weights section`</mark> of the left tool tab, click <mark style="color:purple;">`Auto Weights`</mark> to automatically set weight(s) to the visible sprite(s) based on the positional relationship between the sprite(s) and the bone.
3. In the <mark style="color:purple;">`Pose section`</mark> of the left tool tab, click <mark style="color:purple;">`Preview Pose`</mark> and move a bone to confirm that its bound sprite(s) move as you had intended.
4. Repeat steps 2 and 3 for each sprite group.
5. If you have sprites with incorrect weights, see the [Edit Weight section](#edit-weight-with-weight-slider-or-weight-brush) below.

{% hint style="danger" %}
**Sprites in the Animation folder (sprites to be used for frame animation) must also have bone weights set.**
{% endhint %}

## Preview Pose

If you click Preview Pose on the left panel, you can preview the movement of the avatar by moving the bones one by one.

![Testing bone rigging using the Preview Pose tool](https://667382355-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZT6KDsWarcdCAiEJZ3TV%2Fuploads%2Fy7svueAtja7P5mh8OOnV%2Fpreview.gif?alt=media\&token=40faddf9-ee20-419d-8a95-4c1af5d3e8e6)

## Edit Weight with `Weight Slider` or `Weight Brush`

If you use the Auto Weight function, sprites are automatically bound and weighted to bone(s) close to the sprite. While this will save us a lot of time, unintentional bone binding may sometimes occur. In this case, you change the weights manually by using the <mark style="color:purple;">`Weight Brush`</mark> or <mark style="color:purple;">`Weight Slider`</mark>.

### Weight Brush

1. Select the <mark style="color:purple;">`Weight Brush`</mark> from the <mark style="color:purple;">`Weights section`</mark> of the left tool tab.
2. Select Component > Select Bone to Weight > Color all vertices that should follow the Bone.
3. Check movement using Preview Pose.

![How to use the Weight Brush](https://667382355-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZT6KDsWarcdCAiEJZ3TV%2Fuploads%2F3B6SdaI4Kq0YMyqfJL90%2Fweight_brush.gif?alt=media\&token=1e221b94-2807-4472-aec4-ed8fddb81319)

### Weight Slider

1. Select the <mark style="color:purple;">`Weight Slider`</mark> tool from the left tool tab.
2. Select the applicable sprite and bone. In the <mark style="color:purple;">`Weight Slider window`</mark> on the right, slide the <mark style="color:purple;">`Amount`</mark> up to 1.
3. This ensures that all selected vertices are weighted 100% to the bone.

![How to use the Weight Slider](https://667382355-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZT6KDsWarcdCAiEJZ3TV%2Fuploads%2F7dKcoR1ABqQLsU94ncPi%2Fweight_slider.gif?alt=media\&token=389a2277-b32d-441f-aa62-0fd1dbb85ac8)

{% hint style="info" %}
**For more detailed description of the Skinning Editor, refer to Unity's** [**Official Manual**](https://docs.unity3d.com/Packages/com.unity.2d.animation@2.2/manual/SkinningEditor.html)**.**
{% endhint %}

## Save Sprite Editor

1. Click ‘Apply’ in the upper right corner to save the bone setup and rigging information.

   ![](https://667382355-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZT6KDsWarcdCAiEJZ3TV%2Fuploads%2FmabpIU1VP4rjkonMNFJu%2FScreen%20Shot%202022-06-18%20at%201.49.20%20AM.png?alt=media\&token=89286332-693a-4eae-8231-3551a33f679f)

## Apply physics in hair bones

* If you want to apply gravity and various physics to a specific bone, refer to Unity's [Official Manual](https://docs.unity3d.com/Manual/PhysicsOverview.html).
* The GhostsProject Avatar below used the <mark style="color:purple;">`Rigid Body Component`</mark> and the <mark style="color:purple;">`Character Joint Component`</mark> to make its hair bones vibrate along with head movements.

![GhostsProject Avatar with physics applied to its hair bones](https://667382355-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZT6KDsWarcdCAiEJZ3TV%2Fuploads%2FewHoA6N8xpYXYlJW0HpB%2FAllControlelr.gif?alt=media\&token=fd34887d-f33b-4cbf-b82e-801692ccab2f)

{% 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 %}