Home » Uncategories » What Should the Tail Animations Look Like in Folder

What Should the Tail Animations Look Like in Folder

In this tutorial, we will focus on the bone-based second animation tools provided by the Unity engine. The master idea is to present and teach the fundamentals of 2D blitheness in order for you lot to apply it to your own games. In this mail, we'll set upward the projection, define the assets, and do the initial preparations for the animation.

Before we start the tutorial, we would like to thank Chenguang (DragonBonesTeam) for providing usa with the game art used to produce this tutorial series.

Who is This Tutorial For?

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

Those who are unfamiliar with Unity at all.
Those who are familiar with Unity, but non the Unity second engine and tools.

We presume that you have some programming skills, so nosotros won't cover the code in depth. In social club to follow this tutorial, y'all volition of course demand to download Unity.

For a quick start using Unity, follow our previous tutorial that introduces you to the Unity 2nd surroundings and its tools and characteristics. We strongly recommend that you do this if yous are not familiar with Unity.

Last Preview

This demo shows the blithe dragon nosotros're aiming for:

Project Setup

Launch Unity and create a new project by selecting New Projection... from the File bill of fare. The Projection Wizard will appear. Now, create a new 2D project, followed by a new folder called Sprites (within your Assets directory).

Now that y'all have the project folder organized, it's time to import the game assets. You can find them in the Assets folder of this tutorial's GitHub repo. (You can just click Download ZIP on the latter page if you're not familiar with GitHub.) Notation that this binder includes assets for the whole tutorial series, and then in that location are some that yous won't use until subsequently on.

Os Animation vs Sprite Atlases

Before moving on, compare the following ii images:

In the kickoff image, the dragon is divided into several body parts (head, body, arms, then on). In the 2nd, the ninja is shown in several poses, with a sequence of poses for different actions. This lets you lot clearly imagine how the avatar will movement in your game.

The ninja sprite is what we phone call a sprite sheet or sprite atlas. This type of sprite was very popular on the classic 2d games, and it'due south even so very common today.

The dragon sprite requires a more recent 2D blitheness technique, normally called os-based animation. As the name suggests, the animation will be on a per-bone footing, where each body bone tin have a specific action or animation. Having all the master trunk parts of the character separated allows the developers to create the animations directly in the engine. This new animation technique is very similar to what is used in 3D animation.

In this tutorial, we're going to focus on os-based animation. However, note that Unity does not practice true bone-based animation, so we will simulate it.

Preparing The Sprite For Animation

Drag the sprite file to the editor and drop it on the Sprites folder, like so:

Earlier any character is set for animation, you need to add a Scene to the project. Create a Scenes folder in your Avails directory, and then create a new scene and salvage information technology as Test.scene within this binder. At the finish of this stride, you should have something like this:

Now, nevertheless in the Projecttab, select the dragon sprite, then look at the Inspector panel:

As yous can come across in the Sprite Mode property in the Inspector, the Sprite Fashion is set to Single. This means that the engine volition utilise the entire texture equally a whole when creating a new sprite. Since we have the torso parts separated in the dragon, nosotros don't want that to happen. We therefore demand to change the Sprite Manner from Single to Multiple.

When you change the option, a new button labelledSprite Editor appears:

Currently, the Sprite Editor slicing tool does not work well on compressed images. In lodge to ensure the best result for the animated sprites, you lot demand to change the Format value on the bottom of theInspector tab from the default selection, Compressed, to Truecolor. Then, click Utilise.

Now, select the dragon sprite and click the Sprite Editor push button. A new window will pop up:

In the upper left corner of the window, you will discover the Slice button. Click on it, and some other menu will pop upward:

This menu allows you to change the parameters of how the sprite will exist sliced past the engine. If you set up the slices to Automatic, the engine volition try to detect the different parts of the character yous have in the image. You can define a minimum size for the slices, a pivot (the point around which the piece rotates) and one of three methods:

Delete Existing will supersede whatsoever existing slices.
Smart will endeavor to create new slices while retaining or adjusting the existing ones.
Safe volition add new slices without modifying the existing ones.

You lot can also set the Type parameter to Filigree. This will requite yous other options:

As in the automatic mode, yous tin can select the pivot point of the sprite, but you lot as well have an choice to ascertain the pixel size. This value determines the height and width of the tiles in pixels.

For this particular image, select the Automated mode and press the Slice push. The result should exist similar to this:

As you can meet, the editor sliced the diverse parts of the sprite into different rectangles. These are the parts y'all are going to apply to build your graphic symbol. As mentioned to a higher place, this will not exist a perfect bone animation only each office will exist animated separately.

If you lot double-click in i of the generated rectangles, a pop upwardly panel will open up with the properties of that particular part of the sprite:

You lot tin can change the proper noun of the generated sprite, its position, its size, and its pivot indicate. You tin can also change the position and size values by dragging the bluish points on the rectangles' vertices. The blue circle on the center of the selected rectangle indicates the pivot signal.

For this sprite, it is safe to allow Unity to create the individual sprites automatically. However, in more than complex sprites y'all may desire to ascertain the sprites manually. You can do this by clicking and dragging the left mouse button over the image to define a rectangle.

Once yous release the mouse push button, Unity volition create a sprite from that rectangle.

You can press the Trim button to adjust the rectangle to the sprite. Then, just echo this process to all the sprites y'all want to generate.

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

Adjusting the Pivot Points

The next thing to exercise is to adjust the pivot points on the various generated sprites. This pace is very important for the animation.

Basically, you need to to drag the pin point to the area where the sprite volition join the parent body part. For example, you want to move the head's pin near to the neck area. This will brand certain that, when you lot animate the character, all movements, for example the rotations, will orient around that point, allowing the character to movement in a realistic way. If you left the pivot points in their original places, you lot would terminate up with strange animations, since the grapheme would not be able to motion in a realistic way.

Call up of the pivot points of the members every bit the joints of a doll. In guild for the doll to motion, the joints must be correctly placed, right? The same rules apply for the pivot points.

To motion the pivot point, elevate the bluish circle at the center of each sprite to the correct place (which is the bespeak where information technology should connect to the parent body part). In the following prototype y'all can run across the head pin in its correct place:

The tail part should look like this:

Did y'all get the idea? Great! Repeat the process for the remaining parts. (Yous can leave the pin for the black spot in its center; we'll explain more well-nigh this in the side by side department.) Remember, you want a dragon animation, non a Frankenstein animation.

Once you're finished, clickApply:

If you take a quick look at the folder where you have the sprites, you will be able to meet that the dragon sprite now has an pointer next to information technology:

Press the arrow and you will be able to see all the parts that comprise our dragon character separately:

Assembling the Character

Now that you accept your character sliced into dissimilar sprites, you tin can start placing the sprites into the scene. Since the dragon is equanimous of several body parts, you need to build the graphic symbol.

The outset matter to do is drag the black dot of the dragon sprite to the scene. This object will work as a eye of mass for your graphic symbol. Later on, you will focus your attention there; nevertheless, for now, just know that this is the base for your graphic symbol.

At present, take the torso of the dragon and place it over the black dot, like so:

Echo this process until you have assembled your dragon. By the end information technology should look something like this:

You finally have your dragon fix—however, as you lot may discover, it looks weird. Some parts that should be under the body are over it, or vice-versa. That happens considering we added the dragon parts without any specific order.

Earlier we solve that consequence, let'due south turn the dragon sprite into a single game object. As you may take noticed, right now the several parts of the dragon work as individual game objects—you need to grouping them into a single game object before you lot can start to breathing them.

In order to correctly group all the sprites, employ the sprite with the black dot every bit the main game object; all the other body parts should be grouped under the sprite mass. Just drag a sprite on to the black dot sprite within the Hierarchy to group it under the black dot.

On the side by side image you can see how the sprite hierarchy should look like after you have grouped the game objects.

Before moving on, rename your base game object to Dragon. When yous move theDragon game object, you tin can now move all the parts of the character on the scene.

But what if you want to motility merely ane single sprite? For case, if you want to movement merely the hand, you know that the arm is connected to the hand, so, if you lot move it, all the hand should move besides, correct? If y'all try to do this, you will see that is non the example. When you select the arm and motion it, the remaining parts of the body stay still. Then, in order to movement the complete body part, yous need to create a hierarchy inside your sprite.

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

Regarding the bureaucracy, think of the graphic symbol equally a tree, with roots, a trunk, and branches. The blackness dot acts like the root of the tree; when y'all move it, all the grapheme body moves. Later the root comes the trunk; in this case, your trunk will be the body of the character, so this volition exist the next sprite in the hierarchy. All the other body parts are branches of the tree. However, you lot can notwithstanding have branches of branches like, for instance, in the tail—the Tail Tip is a branch of the Tail, and so on..

Organize the sprites of your character following this bureaucracy:

Now, if you movement the upper arm, all the parts of the arm volition follow. Great, isn't it?

Re-Ordering the Sprites

Earlier you can start animating the character, there is still i concluding detail we demand to accept care of. As we discussed, the sprite parts are not beingness fatigued in the correct society. To solve this, you must modify the value of the Club in Layer parameter for each private sprite.

In lodge to be sure that the tutorial is successful, please use the following values for each Sprite:

Dragon: 0
Body: 3
Head: 4
Left Leg: 4
Left Upper Arm: 5
Left Arm: four
Left Hand: 5
Correct Leg: 1
Right Upper Arm: 2
Correct Arm: 1
Right Hand: 2
Tail: 4
Tail Tip: five

By the end, your dragon should look something like this:

To finish this office, just eye your graphic symbol to the screen. Exercise this by changing the Transform values of the center position to (0, 0, 0).

Next Time

This concludes the get-go part of the serial. You now have a 2D character with the correct sprite gild and hierarchy.

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

References

Dragon sprite sail: used with permission from Chenguang from DragonBonesTeam
Japanese Ninja/Shinobi sprite sheet from 36peas.