Spine Breakdown – 4 Directions Animation

In Nugget & Penny, supporting characters can move, face, and interact in 4 different directions. The process of creating and animating a 4–direction character can be time–consuming and exhausting, but thanks to our workflow and Spine support for broad tools, we optimized the process.

Voxel G8 animations.

This character, known as Voxel G8, has 3 different animations: Idle, fly, and look–down. Because Voxel G8 is symmetric, I only need to create two directions and can mirror its animations using a script to save time.

This image below is the character’s Photoshop file, As you can see, I have organized all the parts of the drone in separated folders. I am using PhotoshopToSpine script to export the character's layers to Spine. 

Download the PhotoshopToSpine script

We describe our intentions to the script by using tags, such as [folder] and [slot], which I used in this file.

Voxel G8 idle animation, from Nugget & Penny

[folder] tag for creating a new folder inside the images folder the script creates, and [slot] tag for creating a new slot inside our Spine project.

I created two folders with the [folder] tag for the two directions, south–east, and north–east. Under the folders with the [slot] tag, I placed the desired attachments. Most of the attachments have two versions, one for each direction, so I retain the same name schema.

Photoshop layers for Spine Animation
Voxel G8 Photoshop hierarchy.

After exporting the PSD file and importing the json file created by the script, I began placing the bones. In the SETUP mode, I choose to display the drone's south–east direction. For the north–east direction, I keyframed the relevant attachments and made some changes to the position of the shoulder bones. I have named this animation – NE.

Voxel G8 mesh, inside Spine.

To create the subtle 3D illusion, I added a mash to body attachment and bound it to 2 bones – face-control and back–control. I tweak and modify the number of vertices, their position, and their's weight until I got it right.

We frequently use the following assets and highly encourage you to check them out!

Each animation I completed, I duplicate and combine with the keyframes of the NE animation I saved before. After a few adjustments, I had a north-east version for each animation.

Hey! Before you move on...

If you want to ask, comment or suggest — I would love to hear from you! for more, and be sure to subscribe to for the latest tutorials.