Spine Breakdowns 4 Direction Robot

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.

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. 

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

[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.

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.

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.

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.