It is much more convenient and powerful than AE for character animation!
Dress-up animation Recently, 2D character animation is needed in the project, not just simple character animation, but also to support users' dynamic dress-up, which is difficult to achieve with AE. So, this time I will use a new software called spine, a software specialized in 2D animation. Today's article will give a detailed introduction to the process of using this software. It is recommended to bookmark and learn one more skill.
The project is very urgent. From the time I heard about this software to the delivery of the manuscript, it only took a few days. As a result, it took me about 4 hours in total from downloading the software to learning to use it in the project. I believe that everyone can learn it in 1 hour after reading my article! So don't worry, this software is not difficult, and it is definitely more convenient and easy to use than the AE bone plugin duik, so I especially recommend everyone to learn this software and make some interesting animations.
Although I heard about this software for the first time, it is already a very mature software in the game field, but it is more used in 2D games, and there are still quite a few game companies recruiting spine. animation talent.
When I saw the name of this software for the first time, I thought it was a typo, I thought it was spline, and then I found out that the two are actually completely different software. Spine can easily make 2D character animations and can export json files for direct use in games, while Spline is a 3D design software. The positioning of the two is completely different.
Spine can realize many complex animation effects, such as interactive animation, transition animation, grid deformation, sequence frame, skin change, reverse dynamics, hybrid animation, path constraint animation, animation clipping, etc.
The animation made by spine is small in size and high in precision
http://zh.esotericsoftware.com/spine-demos
Of course, this set of tutorials takes a long time. If you want to quickly learn to read my article today, you should be able to quickly grasp the essentials.
The overall production process of spine animation is divided into 4 steps:
Here I will use a case that I made after spending a few hours studying to demonstrate to you. The work is still relatively rough, and the general production process is good.
In this step, you need to think about what kind of animation you want to make, draw a dynamic storyboard, and determine the visual elements. When drawing a character, remember to layer the parts of the body that need to be animated, including the decorative elements. The layering is for the second step of splitting and cutting.
In the process of spine, it is used to call it dismantling, which is actually similar to cutting pictures in the UI. It is to cut the elements that need to be animated, and then use a spine PS export plug-in to export, so that animation design can be performed in sping. This link is roughly divided into several small steps:
Resources exported from PS can be directly opened in spine by importing data. The first step in the spine is to set the grid of the cutting resources. After the grid is allocated, the binding and weight distribution can be performed. Similar to the distribution of vertices in 3D modeling, the more points there are, the more delicate the animation can be, but at the same time the harder it is to adjust. For places that need to turn surfaces and deform more, you can distribute more grid points. For example, I hope that the animation of the legs can be more delicate, and more points should be allocated. The animation of the stickers is less, so just add points to the edges. When doing strokes, try to wrap the object as tightly as possible, and don't extend too much to avoid unnecessary performance consumption.
After the mesh distribution is completed, the bone binding can start, which is somewhat similar to the 3D process, except that it has changed from 3D to 2D, so the corresponding difficulty is much lower. Because I have experience in 3D binding, it is very simple to understand here. On the contrary, if you think the 3D binding process is difficult to understand, you can use this software to learn the concept of binding weight. From 2D to 3D, I believe it will be easier to master.
Create a skeleton for the model. I usually start with the waist to create a root bone, and then create bones for the body as needed. For the human body, you can imagine the position of each joint in your body to create bones. I suggest that you can name the bones while creating them, otherwise you will have to find out which bone corresponds to which one later, which will be more troublesome.
There is a little trick when creating the parent-child relationship of bones. Select the bone that needs to be the parent, and then create it. The bone can be automatically used as a subset.
The blue sticks in the picture are the bones.
After the bone is created, you can select the corresponding grid for binding, and then click the left mouse button to select the bone that needs to be bound. The principle is that you choose which bone you want to affect it, and you must pay attention to the range of influence.
After selecting, press the space to confirm the binding, and then spine will automatically assign a weight, but this weight is often problematic, so each vertex needs to be checked.
Select the problematic vertices and redo the manual weight distribution. You can select the point that needs to be modified and drag the mouse up and down to modify the weight. After each modification, it is necessary to test whether there is any problem, and adjust it a little bit until all the weights are ok.
Note that the weight of this step must be carefully brushed, because it will directly affect the subsequent animation. If the K is not careful enough, repeated modifications may occur, which is a waste of time.
The purpose of making an IK controller is mainly for the convenience of animation, such as a walking animation. If there is no IK, you may need to adjust multiple bones. On the one hand, it is difficult to adjust naturally, and on the other hand, it will be very troublesome.
Similar to the IK controller in 3D, it is very convenient to animate after completion. You only need to adjust IK to control the movement of multiple bones at one time. But in the spine, it should be noted that only the IK chain of up to 2 bones can be set at a time, so the hierarchical relationship of IK must be done well.
Everything is ready, we finally came to the animation part. Animation in spine is actually similar to AE's K-frame (K-frame is the basis for animation in most software, such as 3Dmax, maya, c4d, blender), and it is very simple to operate. But if you want to do a good job in animation, you mainly rely on the grasp of animation rhythm and aesthetics, and software skills are secondary.
There are also a few steps here, which I studied when I was doing the demo:
First K the big key actions, such as the first and last frames and intermediate frames in the loop action, and then gradually increase the details from big to small. Remember to turn on the automatic keyframe first to prevent forgetting the K frame when there is an adjustment action in the middle, then select all the bones, press command+L to face all the bones for K frames, and press D to play. In fact, the operation here is very similar to that in 3Dmax. I recently spent a day learning the animation module of 3dmax, and then used 3dmax to do 3D animation, and spine to do 2D animation. The principles are the same.
When the K shape is large, sometimes there will be problems with the order of the layers. You can re-adjust the order of the layers in the order of the layers.
After K has finished the basic movements, you can add details to it. Put some main actions in place, and then preview to see if there are any gaps, and if there are gaps, they need to be repaired.
At this time, you may find that some weight details are problematic. At this time, you need to go back to the setting state to adjust the weight.
Because the spine will help you do the automatic ease-in and ease-out, but sometimes you may want to adjust other animation curves. In this step, you can slowly optimize according to your needs.
Sometimes the state changes too much, and it is difficult to achieve it through the weight. The easiest way is to improve it by supplementing the image. The layers in the spine can also be K-frame. Put two state pictures in the same slot, and use the key (key frame) on the left to perform K frames. These icons with green keys represent K frames.
Sometimes you want to use a picture to realize the face-turning, this operation will be a little troublesome, you can do it by supplementing the picture. If you don't want to complement the image, you can also simulate turning the face by adjusting the vertices. This is a slightly advanced operation. If you are interested, you can find a tutorial by yourself.
Finally, after the resources are roughly completed, you can experience the details of the animation as a whole and improve it, such as wrong frames, adjusting the rhythm, and so on.
5. Export
Spine can export a variety of animation formats, including gif, mov, etc. Of course, if you want to develop later, you usually export json. There are many settings here, and it is easy to step on the pit. When exporting Spine resources, sprite images may be scattered across several images, so when the developer opens the file, only one of them can be identified, resulting in dislocation of image resource links. This is a pit I encountered at the time. The reason for the problem is Max width/height: the maximum page size of the output image. If the picture is larger than this value, it will be output in multiple pages. This size is too small, modify the maximum size so that all the sprite images can be combined into one image.
Finally, let's look at the final animation effect. It is rough and simple, just as an example:
Summarize
Finally, let’s summarize that when learning a new software, you must be good at applying it to your familiar knowledge system. For example, the production process of this animation software is very similar to the 3D process in the stage of binding weights, so you can use the existing Knowledge makes quick connections.
It has never been difficult to learn software. The difficulty is to learn a knowledge system that can be transferred quickly. I have been exposed to a lot of new software recently. I have been using C4D before, and because of work, I have to master 3dmax and maya in a short period of time. It takes about 1 day of learning time for 1 software, and then I have to quickly used in the project. The understanding of software as a tool is even more profound. You can’t learn software just to learn software. You should use it as a tool to realize your design ideas. The most important thing is to cultivate your ability to learn quickly.
.svg)
.jpg)
