Published on

Using Sprite Bone Animation [unity2d / Sprite]

Authors
  • Evelyn
    Full-time IndieDev.
    I'm Japanese, so please forgive me if my English is strange.

Please share this article if you like!

Hello! I'm Evelyn.

I'm working on a Unity 2D project, and I want to animate a sprite character.

For those of you who have such problems, I will show you how to do Sprite Bone animation.

Using Sprite Bone technology, I created the following animation.

There are also videos explaining the process, so please watch Youtube if you have trouble understanding some parts from the text information alone.

So, let's get started!!!

Table of Contents

Importing packages

Since we will be using the Psd importer, we will need a Photoshop big document file.

Be careful, a psd file will not do.

This time uses a PSB file, so if you are using Photoshop, try it out with your own.

If you don't have a Photoshop subscription, you can download it from the Description Area or the url in the comments section. You can download it for free.

\ Download link /
Get Photoshop file

The first step is to create a new project. I will create a 3D project, but you can use 2D, Universal Render Pipeline, or anything else.

Next, bring up the Package Manager.

Bring up the Unity Registory and search for 2D. Since I created a 3D project, I will import a 2D Sprite.

Next, import the 2D PSD Importer.

Unity will now be able to handle the Photoshop Big file format.

Now that the package import is complete, drag and drop the file into UnityEditor.

Setting the Bones

When you extract the imported file, you will see that sprites are stored in each layer. Display the Sprite Editor from the Inspector.

Then, change the display mode to Skinning Editor.

Now let's create bones.

When you are done creating the bones you need, click Auto Geometry to tie the bones to the Sprite.

Let's select each sprite and click Generate for Selected.

The last step in the bone settings is to click on Bone Influence to adjust the bone that will affect the sprite.

Select the sprite, and increase or decrease the bone from the Bone Influences item displayed in Visibility.

Now that we've adjusted the bones, it's time to apply the animation!

Drag and drop the character's Sprite file onto the hierarchy to add it and center it on the screen.

In the child element of the character, the bone we just created has been added.

Let's open the root child element and further center the top body of the bottom body.

Bring up the Scene window and try rotating the top body bone.

We have successfully rotated the upper body of the character.

Applying animation

We will move the image by applying animation to these bones.

Select the character and click the Add Component button in the Inspector to add an Animator.

Next, create an Animator Controller by right-clicking in the project window.

We'll name it CharAnimator.

Also, right-click in the project window to create an Animation and name it Idle.

Now it's time to edit the animation.

Finally, select Idle in the Animation Clip and activate Loop time in the Inspector. Run the editor to confirm.

Summary of Sprite Bone

How was it?

Using the Sprite Bone animation we learned, we can also create the following animation.

You can make a regular 2D game, but it would be interesting to bring a 2D look to a 3D game, like Paper Mario!!

Use Sprite Bone Animation to create your own games!

I love you for reading to the end.

Please share this article if you like!