You are here: / en / tutorials / character-animation-with-spine2d

2D Animationen with Spine

In this article you can learn how to animate a character (or figure) using Spine. Spine is a tool from Esoteric Software. We use Spine mainly for 2D animations.

1 - CREATION OF A CHARACTER

To animate a character, it must first be created. On the left is a character called "Squiller". It is a very mean squirrel.

The image shows the gray squirrel, which was split into individual sprites so that it can be animated in Spine

2 - PREPARATION OF THE CHARACTER

In order to animate a character in Spine, it must first be divided into its individual parts. The character is divided at its joints so that each body part can be animated individually..

The screenshot shows a JSON file for Spine in Photoshop. Here a check mark was set at

3 - CREATE JSON FILE

It is important to create a JSON file, because Spine needs this format to load the file correctly.

The screenshot shows the settings of Spine and which button has to be pressed for the import

4 - IMPORT INTO SPINE

Now the JSON file is imported into Spine and then opened. Then click on the "Create" icon at the bottom left. After that, the bones are drawn in

The screenshot shows how the bones of the character are named in Spine

5 - Bones in Spine

Care must be taken to ensure that the character's "bones" are correctly seated so that the joints can rotate optimally. It should also be noted that the bones are drawn starting from the correct origin. This prevents the bones from being linked at the wrong joint. For example, the upper arm should be connected at the torso and not at the hip, otherwise it will be drawn starting from the hip bone..

The screenshot shows the animation view based on a gray squirrel

6 - NOTE NAMING IN SPINE

It is also very helpful to name the bones in the hierarchy after the corresponding body parts so that there is no confusion in Spine. The individual sprites in the hierarchy list should also be dragged and dropped into the bones. This will connect the sprites to the bones and allow them to move together.

When the step has been completed, the model is now rigged.

The screenshot shows how to set keyframes in Spine. The focus is on the keyframe menu

7 - SPINE ANIMATION VIEW

Now you have to click on "Setup" in the upper left corner, which will open the animation view in Spin

The screenshot shows the setting of keyframes in Spine in the general view

8 - SET KEYFRAMES IN SPINE

Now all bones can be selected and the four keys (rotate, reposition, scale and compress) can be activated. The activation works with a click on the red box symbols next to the four parameters. The boxes are green at the beginning and turn red when clicked. The boxes are responsible for the fact that as soon as something is changed in the animation, new keyframes are automatically set at this point.

An article from Danielle Kern und Can Aygül written on 12.08.2020

OPEN QUESTIONS?

Did you like the article? Feel free to share, quote or recommend our articles. If you have any questions, feel free to contact us or leave a little feedback. We look forward to hearing from you!

Contact now