Breathing Life into Your Characters

Quick Introduction to Spine

Hey guys, today I’ll be walking you through basic Spine animation tools and showing you how to bring your characters to life with a simple setup. We will be making a simple walk cycle of this fabulous Nutcracker.

Importing Exports into SPINE

First of all you want to have some PNG exports ready in a folder so that you can set them up in SPINE. When opening the SPINE program for the first time, you should be greeted with this window displayed below. This is the SETUP mode as indicated at the top left corner of the screen.

You can create new projects by pressing Cmd+Shift+N on the keyboard or by clicking on the Spine logo at the top left corner of your window to display a drop down menu. Clicking on New Project will do what it says.

Next, in your Hierarchy on the right, you want to highlight Images. At the bottom of the Hierarchy you should see Path with an icon of a folder on the right. Clicking on that folder will allow you to browse through and navigate your folders. We will be selecting the folder where our Nutcracker has been exported. After doing so, all your images within that folder will be displayed under Images in your Hierarchy.

You’ll want to drag the images over into your workspace and place the pieces together as displayed below:

Make sure you place your character just above the Root. Think of the root as the center of gravity, or ground plane. It’s not important if you just want to animate, but your developers will bless you if you do this.

Dragging the PNG exports into the workspace will create Slots. Make sure you rename these slots accordingly to make the workflow easier. For instance, I would rename the slot for the upper left arm as Arm_Upper_L.

Rigging the Character

Now that we have the PNG exports setup, it’s time for us to rig the character with Bones. At the bottom left corner of your workspace you should see a Tools tab with three icons. Click on the Create new bones icon or press N on your keyboard. Now, just click and drag to create bones on your character.

When creating bones, make sure you keep Parenting in mind. For instance, when you are creating bones for arms, you want the parent bone to be the body, not the leg or head. This applies to the eyes too, you want those bones to be connected to the head, not the arms, otherwise when you move the arm bone, the eyes will move along with it. Once done, you should have something like this:

Make sure you also keep your bones named to make the workflow easier. For instance for my upper left arm, I would rename my bone to bone_arm_upper_L.

Now that everything is set, we can start dragging the Slots over to the Bones. This is where the naming of Bones and Slots comes into play. You don’t have to shuffle through the numerous elements in your Hierarchy and instead you just need to drag Arm_Upper_L slot into the bone_arm_upper_L bone. Once done, your Hierarchy should look something like this:


Now that we have finished setting up our Nutcracker, it is time to animate him! Click on the Setup at the top left corner of the screen. This will switch us over to Animate mode, which will allow us to start bringing our character to life! Once in Animate mode you should be greeted with this screen:

To start animating, we must first create an animation. By default an empty animation should be created automatically called Animation. You can create more animations by clicking on the Animations in the Hierarchy and then clicking on the New Animation button located at the bottom of your Hierarchy.

We’re going to start by creating our main big keyframes first by manipulating bones using this Transform tool.

Everytime you move anything and want to save those changes on the Timeline, you Key them using these Key icons displayed below. This is called Keyframing:

If you move your character’s bones and browse over to different frames without Keyframing your changes, then the bones that you have transformed in said frames won’t have those changes applied.

Start by Keyframing all your bones into the first frame. Simply highlight all your bones in the workspace without selecting the root. Do this by dragging across your character while holding the left mouse button. Proceed to clicking the Key icons for Rotate, Translate and Scale on your Transform tool. Notice how Keyframing your frame will automatically make little vertical rectangles appear on your Timeline. This means that your character has been Keyframed.

Now that you have created your first major keyframe, it’s time to work on our second major keyframe.

Move your mouse over to any later frame on the Timeline. I usually like to work in intervals of five when setting up my major keyframes.

Notice that after moving onto a new frame, your character bones reset to its’ initial pose. This is because nothing is tweened yet. Tweening is when a transitioning animation is placed in between two Keyframes automatically usually in the form of transformation.

Begin by transforming your bones accordingly. I transformed the bones of my Nutcracker using move and rotate. The results are displayed below:

Play around with the tool to get a feel for it. Think of this as posing an action figure in a walking stance. Once you are satisfied with the result, Keyframe it in to make sure the changes are kept.

Finally, we want our Nutcracker to return to its’ initial pose so that the animation can loop smoothly. We can easily do this by Copying and Pasting our first keyframe and placing it after the second keyframe in the Timeline. You can select your keyframes by clicking on one of the small rectangles in your Timeline. Copy the keyframe by hitting Cmd+C on your keyboard, select an empty frame after your second major keyframe on the Timeline and hit Cmd+V on the keyboard to paste the contents.

Now that we have our three major keyframes, we can adjust them on the Timeline until we feel comfortable with the animation speed. Select your keyframe with the left mouse button. Now, still holding your left mouse button drag the whole keyframe back and forth on the Timeline as you see fit. You can press the Play forward button on the left side of your Timeline, or the D button on your keyboard to preview your animations.

Keep adjusting your keyframes until you are satisfied with the animation. Spend more time and use the things you just learnt to spice up the animation by adding subtle bounces to add more weight to the movement.

Once done, save your project by pressing Cmd+S on your keyboard. Name your file and save it anywhere on your computer. Finally, we are going to export our file in GIF format.

Exporting your Animation

Press Cmd+E on your keyboard to open up the Export window.

On the left side of the window under Image, select GIF and click on the folder button opposite of Output file. Select a desired folder and click Save. This should return you to the Export window. Click on Export located at the bottom right corner of the window, et voila. You have successfully created and exported an animated GIF of your character!

Don’t forget to tap and hold 👏 and to follow DaftMobile Blog (just press “Follow” button below)! You can also find us on Facebook and Twitter.

Like what you read? Give Jackson Nguyen a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.