Spine Animation

Game developement

Short description

This article describes the process of animating a character using Spine.

Character preparation

In order to animate a character in Spine, it must first be broken down into its individual parts. The character is divided at its joints so that each body part can be animated individually. Using a script (Photoshop to Spine), the individual parts are saved as PNGs.

Character in Photoshop
Screenshot of Character in Photoshop

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

Creating a JSON file in Photoshop
Screenshot of creating a JSON file in Photoshop

Spine

The JSON file is now imported into Spine and then opened.

Import files into Spine application
Screenshot of import in Spine

You then have to click on the “create” symbol at the bottom left. The bones are then drawn.

Are you ready to bring your game vision to life? Contact us today to learn more about how we can help you successfully bring your ideas to life with our game development services!

Let's Go!
Create Bones in Spine
Screenshot of creating the character's bones in Spine

IMPORTANT

It is also important to ensure that the character's “bones” are positioned correctly so that the joints can rotate optimally. It is also important to ensure that the bones are drawn from the correct origin. This prevents the bones from being connected to 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. Another important aspect is to name the bones in the hierarchy according to the corresponding body parts so that there is no confusion. Furthermore, the body parts in the hierarchy list should be dragged and dropped into the bones. This connects the body parts to the bones and they now move with them.

Correctly named bones in the hierarchy, Part 1
Correctly named bones in the hierarchy, Part 2
Screenshot of bones named after corresponding body parts in Spine's hierarchy

The model is now rigged. Then you have to click on “setup” at the top left, which will open the animation view.

Animation view in Spine
Screenshot of the animation view in Spine

All bones are then selected and the four keys (rotate, reposition, scale and compress) are activated. Activation works by clicking on the red box symbols next to the four parameters. The boxes are green at the beginning and turn red when clicked. They are responsible for automatically setting new keyframes at this point as soon as something is changed in the animation. From here you can animate freely. It is best to set the start, end and middle frames first and then correct them manually in between.

Here are a few more helpful tutorials that we can recommend to you:

Questions & Wishes

We hope you like our article and would like to invite you to share your thoughts and questions on the topic with us. If you have any questions, comments or feedback on the content of this article, please don't hesitate to let us know in the comments section. We're always happy to hear from our readers and engage in meaningful discussions about game development.
Just ask us anything you want to know and we'll do our best to provide the answers you're looking for. Thank you for your support and we look forward to hearing from you!

Comment form

Write comment

* These fields are required

Comments

Comments

No Comments

More exciting articles

Don't leave your idea in your head, bring it to life and share it with the world. Start your own game development project today!

LET'S GO!