How do I create a Unity animation

Bone-Based Unity 2D Animation Introduction

In this tutorial, we will focus on the bone-based 2D animation tools provided by the Unity Engine. The main idea is to present and teach the basics of 2D animation so you can apply it to your own games. In this post we set up the project, define the assets and make the first preparations for the animation.

Before we start the tutorial, we'd like to thank Chenguang (DragonBonesTeam) for providing the game art that was used to create this tutorial series.

Who is this tutorial for?

This tutorial is primarily aimed at two groups of game developers:

  • Those who are not at all familiar with oneness.
  • Those who are familiar with Unity are not familiar with the Unity 2D engine and tools.

We'll assume that you have some programming skills so we won't go into depth on the code. Of course, in order to follow this tutorial you will need to download Unity.

To get a quick start with Unity, follow our previous tutorial as you learn about the Unity 2D environment and its tools and features. We strongly recommend doing this if you are unfamiliar with Unity.

Final preview

This demo shows the animated kite we are aiming at:

Project setup

Start Unity and create a new project by selecting New project… of the file Menu. The Project assistant will appear. Now create a new one 2D Project followed by a new folder named (in your financial assets Directory).

Now that you have organized the project folder, you can import the game assets. You can find them in the Assets folder of this tutorial's GitHub repo. (You can only click Download ZIP on the last page if you're unfamiliar with GitHub.) Note that this folder contains assets for the entire series of tutorials. So there are some that you won't be using until later.

Bone animation vs sprite atlases

Before proceeding, compare the following two images:

In the first picture, the dragon is divided into several body parts (head, body, arms, etc.). In the second, the ninja is shown in multiple poses, with a sequence of poses for different actions. So you can clearly imagine how the avatar will move in your game.

We call the ninja sprite a Sprite sheet or Sprite Atlas. This type of sprite was very popular in the classic 2D games and is still very common to this day.

The dragon sprite requires a newer 2D animation technique that is usually called bone based animation. As the name suggests, animation is done on a bone basis, with each body bone being able to have a specific action or animation. With all the main body parts of the character separated, developers can create the animations right in the engine. This new animation technique is very similar to that used in 3D animation.

In this tutorial, we will focus on bone-based animation. Note, however, that Unity doesn't true bone based animation so we're going to simulate it.

Prepare the sprite for animation

Drag the sprite file into the editor and drop it on the folder Sprites Folder as follows:

Before a character is ready to be animated, you need to add one to the project. Create a folder in your financial assets create a new scene and save it as in this folder. By the end of this step you should have:

Now in the ProjectSelect the Sprite tab, then check this out inspector Panel:

As you can see in the Sprite mode Property in the inspector, the Sprite mode is set to single. This means that when creating a new sprite, the engine will use the entire texture as a whole. We separated the body parts, we don't want that. So we have to change that Sprite mode of single to Several

If you change the option, a new button will be labeledSprite editor appears:

Currently the Sprite editor The slicing tool does not work well on compressed images. To get the best result for the animated sprites, you'll need to change this format Value on the bottom of theinspector Tab from the default option, Compressed, to True color. Then click Apply.

Now select the dragon sprite and click on Sprite editor Button. A new window is going to be opened:

In the upper left corner of the window you will find the disc Button. Click on it and another menu will appear:

In this menu you can change the parameters for the splitting of the sprite by the engine. When you put the slices on Automatic, The engine tries to recognize the different parts of the figure that you have in the picture. You can define a minimum size for the slices, a pivot (the point around which the slice rotates), and one of three methods:

  • Delete existing ones replaces existing panes.
  • Clever tries to create new slices while keeping or adjusting the existing ones.
  • For sure adds new slices without changing the existing ones.

You can also hire Art Parameters too Grid. This gives you other options:

As in the automatic mode, you can select the pivot point of the sprite, but you also have the option of defining the pixel size. This value determines the height and width of the tiles in pixels.

For this picture, select the option Automatic Mode and press the disc Button. The result should be similar:

As you can see, the editor has divided the different parts of the sprite into different rectangles. These are the parts that you will be using to build your character. As mentioned above, this is not a perfect bone animation, but each part is animated separately.

If you double-click in one of the generated rectangles, a pop-up window will open with the properties of that particular part of the sprite:

You can change the name of the generated sprite, its position, size and pivot point. You can also change the position and size values ​​by dragging the blue dots on the corners of the rectangles. The blue circle in the center of the selected rectangle indicates the pivot point.

For this sprite, it is certain that Unity will automatically create the individual sprites. However, in more complex sprites, you may want to define the sprites manually. To do this, click with the left mouse button on the image to define a rectangle.

As soon as you release the mouse button, Unity creates a sprite from this rectangle.

You can press the button Trim Button to adapt the rectangle to the sprite. Then repeat this process for all of the sprites that you want to generate.

Since the automatic mode works well for this image, you don't have to define the sprites manually.

Adjusting the pivot points

Next you need to adjust the pivot points of the various generated sprites. This step is very important for animation.

Basically, you need to drag the pivot point into the area where the sprite will connect to the parent body part. For example, you might want to move the pivot point of the head close to the neck area. This ensures that all movements, e.g. For example, if you animate the character, orient the rotations around this point so that the character can move realistically. If you leave the pivot points in their original positions, you will get strange animations as the character cannot move realistically.

Think of the pivot points of the limbs as the joints of a doll. In order for the doll to move, the joints need to be in the right place, right? The same rules apply to the pivot points.

To move the pivot point, drag the blue circle in the center of each sprite into place (where you want it to connect to the parent body part). In the following picture you can see the head joint in place:

The tail section should look like this:

Did you get the idea Great! Repeat the process for the remaining parts. (You can leave the pivot point for the black spot in the center; we'll explain more about that in the next section.) Remember, you want a dragon animation, not a Frankenstein animation.

When you're done, clickApply:

If you take a quick look at the folder the sprites are in, you can see that there is now an arrow next to the dragon sprite:

Press the arrow to see all the parts that make up our kite separately:

Assemble the character

Now that you have cut your character into different sprites, you can insert the sprites into the scene. Since the dragon is made up of several body parts, you need to build the character.

First, drag the black point of the dragon sprite onto the scene. This object works as a Center of mass Later on for your character you will focus your attention there. But for now, you know that this is the basis for your character.

Now take the body of the dragon and place it over the black point as follows:

Repeat this process until you have assembled your kite. In the end it should look something like this:

You finally have your kite ready - but as you may notice, it looks weird. Some parts that should be under the body are above or vice versa. This is happening because we added the kite parts in no particular order.

Before we solve the problem, let's make the dragon sprite a single game object. As you may have already noticed, the different parts of the kite function as individual game objects. You need to group them into a single game object before you can start animating.

To group all the sprites correctly, use the sprite with the black dot as the main game object. All other body parts should be grouped under the Sprite mass. Just drag a sprite onto the black dot sprite in the hierarchy to group it under the black point.

On the next picture you can see what the sprite hierarchy should look like after you have grouped the game objects.

Before proceeding, rename your base game object to. If you move the game object you can now move all parts of the character on the scene.

But what if you just want to move a single sprite? For example, if you just want to move your hand, you know the arm is connected to the hand. So if you move your hand, all your hands should move too, right? If you try to do this, you will find that it doesn't. As you select and move the arm, the rest of the body parts stay still. In order to be able to move the entire body part, you need to create a hierarchy in your sprite.

To make this process more intuitive, rename the body parts (by right clicking and selecting) Rename) with their respective names like:

Think of the character as a hierarchy as a tree with roots, a trunk, and branches. The black point behaves like the root of the tree; When you move it, the entire character body moves. After the root comes the trunk; In this case the body is the body of the sign. So this is the next sprite in the hierarchy. All other parts of the body are branches of the tree. However, you can still have branches of branches, e.g. B. in the tail is a branch of, and so on ...

Organize your character's sprites according to this hierarchy:

If you now move the upper arm, all parts of the arm follow. Great isn't it?

Reorder the sprites

Before you can animate the character, there is one last detail we need to take care of. As mentioned earlier, the sprite parts are not drawn in the correct order. To solve this you need to change the value of Order in the shift Parameters for each individual sprite.

To ensure the tutorial is successful, use the following values ​​for each sprite:

  • Dragon:
  • body:
  • head:
  • Left leg:
  • Left upper arm:
  • Left arm:
  • Left hand:
  • Right leg:
  • Right upper arm:
  • Right arm:
  • right hand:
  • tail:
  • Tail tip:

In the end, your kite should look something like this:

To finish this part, just center your character on the screen. Do this by changing that Transform Middle position values ​​to ().

Next time

This concludes the first part of the series. You now have a 2D character with the correct order and hierarchy of sprites.

If you have any questions or feedback on what we've covered so far, feel free to leave a comment below.

References

  • Dragon Sprite Sheet: Used by the DragonBones team with permission from Chenguang
  • Japanese ninja / shinobi sprite sheet made from 36 peas.