Spine - first steps

Hi Habr!

Relatively recently, the collection of money for a new tool for igrodels was completed at the kickstarter, but this was not covered in Habré. Spine — a program for creating skeletal 2D animations. This tool will be of interest not only to indie developers and novice game designers, but also to experienced market players. The ease of use and attractive design create the impression of magic on the screen.
')
All interested in asking for a cat (a lot of pictures).

Why did I write this tutorial, if the official site already has detailed training videos? Basically, to increase the Spine community at the expense of the Russian-speaking audience, because the larger the community, the more dynamic the project develops and the faster problems are solved. And of course I want to share little tricks and tricks when creating animation and integrating it into the game code.

1. Preparation for work

Download and install the trial version . Here, we have access to all functions, except for exporting projects, but this is more than enough for us to create an impression.
Of course, we will not repeat here the ready-made examples from the assembly, but rather we carve our own Frankenstein for the soul.
Open your favorite image editor and draw what later should walk, jump and perform other gestures. PNG file format with a transparent background. I am an artist from the word bad, but this did not prevent me from painting one sweet, charming creature.



Now the task is more complicated. It is necessary to break our picture into separate images of parts of bodies that will move relative to each other. Here the main thing is to take into account how the images will overlap each other and, accordingly, make cuts with rounded edges and smooth blurry colors.



Thus, we have a folder where the drawings of the parts of the body lie - the flesh of our monster, as well as the original image. And now the fun begins.

2. Preparing the assembly table

Run Spine. In the main menu, execute the New project command.
In the hierarchy window, select the Images item and use the Browse button to select our folder with images.



Drag the full image of the character in the workspace, as a model for creating bones. You can increase the transparency of this image to make it clear that this is a template.

4. Putting the skeleton

Bones are the main means of transporting our images in animation. Bones have a clear hierarchy, always headed by a root bone. The meaning of the hierarchy is that when you move the older bone, all the younger ones move accordingly.
Choose the root bone


and then the create new bones tool

After the root, select the pelvis bone with the upper bone (pelvis), and create it by simply clicking on the desired location in the image. All the others will rotate around this bone. We create other bones by dragging the cursor (Drag-and-drop) from the end of the highest bone to the required size. It is desirable, but not critical, for the bone to match the length of the body part.
The hierarchy of the bones is as follows.

5. Sew meat to the bones — the monster is almost ready

Now each bone needs to be matched with an image of a part of the body. Select the image file and click on the Set Parent button.



The cursor acquires a new outline and we can click on the bone to which this image will be attached. We can rotate (Rotate), translate (Translate) and scale (Scale) our images and bones, making sure that they are correctly positioned according to the pattern.



And everything should look like this in the end:



Now that bones and meat are in place, our Frankenstein is ready to come to life. You've probably already noticed that turning the parental bones turn and children, it's time to apply it in the animation.

6. Revitalizing —IT'S ALIVE

Push the switch and go into animation mode .
Every self-respecting Frankenstein should be able to walk. Select the Animations line in the hierarchy window, click on the New Animation button and create an animation with the name walk.



Now it's time for creative experimentation. Neither you nor I are pro animators (they don’t need this post, they have plenty of their monsters), but we need to make four key frames of our animation. Call Cthulhu, try Google - any means for expanding consciousness is good.
Turning and moving the bones, set the body to the initial position from which the movement will begin. Select all the bones and fix the changes by clicking on the yellow keys next to the buttons to rotate, move, scale.



The first keyframe should appear on the time stamp in the Dopesheet window. White, green, blue and red sticks show the changes we made. To select them all, you need to click on the topmost white stick in the walk row.



Select the entire first frame, copy it and move the pointer to a new place in the timeline (8 for example), where we insert this frame. Now we have two identical frames on the zero and on the eighth division. Now you need to change the frame in the eighth division as if the body moved and fix the changes.



Now that we have fixed the new changes, Spine will move the images smoothly from the first frame to the second. These movements are indicated by gray horizontal lines on the timeline.
Copy these two frames and paste them into 20 and 28 divisions, respectively. Now you just need to swap the right and left limbs. Where the right leg was, the left leg became, where the left hand was the right arm and vice versa.
At 40 division, just copy the very first frame in order to make the animation looping.



Click on the play button (pull the switch) and now our monster comes to life. This is not yet Disney, but we are already approaching the level of the Masha's fairy tales. In the playback properties, you can set the speed and method of playback.



Now the animation is ready, it remains only to export it in the format we need.
There are three types of export: data, images and video. The first type includes json and bin. In this form, our animation is transferred to the game project using the Spine runtime - a special API for working with Spine animation.
For fans of hardcore time-lapse or gif animations, you can export the project as a sequence of frames (jpeg, png) or record everything in gif format. It is also possible to submit animations like avi or QuickTime video. But all these functions, alas, only in the full paid version ($ 60).

6. Manage our monster

What is the use of our monster, if it stupidly goes directly without paying any attention to anyone. It's time to integrate our animation with the game project. Here you need to give examples of the code, tell what comes from where and where, the new article will be typed. I will write if anyone is interested.

In the program, you can manage any aspects of the animation, bones, images.
In the Spine runtime laid a lot of useful features, such as mixing animation. So that after one animation the other does not start suddenly, they mix in a certain way and go smoothly into each other.
Each bone can be attached to the physical body, which will move along with the bone and interact with the game world. I myself still do not know all the possibilities of this magic tool, but I hope to find out.
Not to mention the beautiful and understandable source code Spine runtime, which, if desired, you can change a little by yourself.

In order not to be unfounded, I present my pet to the human court: ( .jar and .exe ). Run better from the command line, play with arrows.