#spine #animation

4-Direction Animation Breakdown – Voxel G8

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.

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.

[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

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.

Thanks for reading!

I would love to hear your thoughts, let me know if you found it helpful or have any questions over at Twitter. Be sure to follow our YouTube channel for more tutorials of Spine and Unity.