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