Spine 2D animation

Relatively recently, on the kickstarter, the fundraising for a new tool for game makers was completed, but this was not covered in our blog. Spine 2d animation is a program for creating skeletal 2-dimensional animations, apparently. This tool will be of interest not only to indie developers and novice game designers, but also to experienced market players. Ease of use and eye-catching design creates the impression of magic happening on the screen!

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

1. Preparation for work

Download and install the trial version. All functions are available to us here, except for exporting projects, but this is more than enough for us to make an impression.
Of course, we will not repeat here ready-made examples from the assembly, but rather we will sculpt our own Frankenstein for the soul.
Open your favorite graphic editor and draw what should later walk, jump and perform other body movements. PNG file format with 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 difficult. It is necessary to split our picture into separate images of body parts that will move relative to each other. The main thing here is to take into account how the images will be superimposed on each other and, accordingly, make slices with rounded edges and smooth blurred colors.

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

2. Preparing the assembly table

Launch 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 pictures.

Drag the full character image onto the artboard as a reference for creating bones. You can increase the transparency of this image to make it clear that this is a template.

3. Assembling the skeleton

Bones are the main vehicle for our images in animation. Bones have a clear hierarchy, always headed by the root bone. The meaning of the hierarchy is that when the senior bone is moved, all junior ones move accordingly.
Selecting the root bone and then the Create new bones tool

Select the pelvis with the eldest bone after root, and create it by simply clicking on the desired place in the image. All the others will revolve around this bone. The other bones are created by dragging the cursor (Drag-and-drop) from the end of the older bone to the required size. It is desirable, but not critical, for the bone to be of the same length as the body part.

To be continued…