Creating Spine animations with Affinity Designer

A quick overview demo of how to create, export, rig and re-skin a Spine animation.

I had a friend who swore that Trap Door was made with the use of invisible gloves which modelled the characters in real time. And he probably still does.

We all carry around childhood misconceptions.

Before getting into Game Development I had a few ideas about how games are actually made. Not just from rabidly playing NES and MegaDrive games in the 90’s, I remember seeing a “how video games are made” on HOW 2 or Blue Peter.

When starting on BIG Bad Spanish my idea was to create all our assets in Photoshop and then either manually animate frame by frame and export them there or export them to After Effects, animate then use an extension to create a sprite sheet.

The animations in the BIG Bad Spanish demo were done that way. It works but the amount of messing it took is silly.

Draw in Photoshop> Export> After Effects> Export Sprite Sheet> Unity works but it’s not flexible.

And here’s where I deserve a smack in the head. I’ve had Spine installed for ages but never took the time to learn it “because I was too busy making the game”. What a dope.

The new workflow is sickeningly efficient.

Create assets in Affinity Designer> Export to Spine> Spine> Unity

And it's not just how fast it is. Using Spine has a bunch of other benefits.

Here’s a simple example. Get the .afdesign source file here.



Let’s go through the steps nice and slow like.

Step 1

This is a basic character template. We’re going to export to Spine, rig it, animate it then re-skin the character.

Let me stress that this is a super fast and sloppy demo. We’ll make a another demo including hooking Spine animation into Unity.

Step 2

Switch to the Export Persona, select the layers and hit ‘Create Slices’


Giphy

Click the Slices tab beside Layers and select Spine JSON from the Batch Builder dropdown.

If you click Continuos Export then every change you make in Affinity Designer will immediately appear in Spine. It’s so slick.

Click ‘Export Slices’

Step 3

Now each part of your character has been exported so we have to import into Spine. The JSON file we exported is what will help import all the bits in at the same positions.

Click “Import Data” and select your JSON file.

You’re going to see the big red MISSING placeholders. So at the very bottom on the right hand side, point Images to the folder where you exported your bits.

To move your little dude to the centre of the screen just select the root bone and then Translate move him across

Step 4

Now rig him. We won’t go into how Spine works here but it’s really straight forward: draw a bone for each limb then assign each limb to a bone. So your ‘skeleton’ is now rigged.

Step 5

Switch to Animate and create your animation. In the video I made a stupid tilting wobble.

The animation for the skeleton can be reused on any character you want and you can easily reskin it. In the video you’ll see how I scribbled him into a Smurf and thanks to Affinity's Continuous Export it instantly updates. No refreshing or anything.

So that’s an extremely quick overview of how to create a character in Affinity Designer, export it to Spine and animate a character for a game.

We used this process to create, rig and animate three views of over TWENTY Woodland Run characters in just a couple weeks.

Another handy use for Spine: You can use them as videos.

We figured out that we can export Spine cycles as .movs with a solid green background and then use Chroma Key to kill the green. 

You can see some a Blocker walking behind The Witch in this preview trailer. Also the scene where the baddies are running and Finbar the bear is inside the crystal ball. They're all exported from Spine.

UPDATE: Spine 3.6 now allows export with alpha so no need for messy Chroma Key. Check out the massive Spine update here. 

Cheers,

Bob @clamnuts

Like this post? Try our game!

Woodland Run is now available on iOS and Android.

Woodland Run Available on the App Store Woodland Run Available on the Play Store