Evelyn GameDev Logo
Published on

Using Sprite Bone Animation [unity2d / Sprite]

Authors
  • avatar
    Evelyn
Using Sprite Bone Animation [unity2d / Sprite]

Please share this article if you like!

Hello! I'm Evelyn.

icon of 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.

demo

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.
photoshop big document data

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
ko-fi download page

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.

Importing 2D Sprite

Next, import the 2D PSD Importer.

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

Importing PSD Importer

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

Importing a PSD file

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.

Opening Sprite Editor

Then, change the display mode to Skinning Editor.

Now let's create bones.

Crate 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.

Auto geometry

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.

bone influence

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.

drag and drop character to hierarchy

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.

animation controller and animation

Now it's time to edit the animation.

editing an animation

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

activate Loop time

Summary of Sprite Bone

How was it?

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

demo

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

icon of Evelyn
Use Sprite Bone Animation to create your own games!

I love you for reading to the end.

Please share this article if you like!