As part of our Tangle Tower stream for #LudoNarraCon, I did a short look at our animation system, since it’s one of the things I’m most proud of as the game's programmer.

I’d like to show it in a bit more detail, so here we go!

THREAD (1/20)
#MadeWithUnity #GameDev #IndieDev
After @SFBDim and @ungapants have finished designing (or redesigning!) a character, the first step toward animation is picking poses. They both did a lot of pose sketching, here are some of Adam’s for Detective Grimoire (2/20)
The final poses are decided, and @SFBDim then draws each pose as vectors in Flash. We’ve been using Flash to make games for 18 years now, with no signs of stopping. These days though, we only use it for art/animation, not the full game! (3/20)
At this point, we imported PNGs of these static poses into our Unity project, and picked a random pose for each dialogue section, to give a feel for the characters. I added bobbing to show when they’re talking, while the audio is above a certain level (4/20)
Then our animator @jharrisanim steps in. After sketches to get a feel for the shape of each character, he roughs out animations for each final pose, also in Flash. You’ll notice in these and @SFBDim’s poses, there are three head variants per pose, to get more out of each (5/20)
Once the roughs are agreed on, @jharrisanim works on the final vector versions of each animation, in Flash of course! This is the longest step by far, and Jonathan is incredibly talented, so it was always exciting to see each character come to life (6/20)
As well as multiple head positions per animated pose, we have nest timelines of eyes and mouths, 11 of each, which can be set independently to provide 121 combinations. But now we have a problem. How do we play Flash animations, nested ones at that, inside of Unity? (7/20)
Luckily, I have a solution. One that I’ve been working on for 7 years now: the FlAn exporter! I first built it for Detective Grimoire back in 2012, it’s been used in every single game that SFB Games has released since then. Yes, even that one. Here’s the simple interface (8/20)
The FlAn exporter pulls apart a swf (Flash’s output format) into individual parts, and saves them as PNGs as well as a data file that has everything you need to reconstruct the animations from those parts. This is much, MUCH smaller in filesize than simple PNG sequences (9/20)
But even then, 1000s of individual PNGs is wasteful, when we can pack them all into one BIG spritesheet. Unity supports tight sprite packing, with pre-generated meshes. The wonderful TexturePacker tool handles all of this for us - as you can see, no space is wasted (10/20)
And here is the result. Each character fits into a single 4096x4096 spritesheet, and honestly they’re all beautiful. Rivers of hands and hair and limbs, all that a character is and can be in one picture. When Unity imports it, it comes back out as individual Sprites (11/20)
In Unity, I’ve also written a FlAn player, which interprets the animation data file and reconstructs using the sprites. It creates a single mesh, and depending on which frame each nested timeline is showing, it writes to the mesh with data from the Sprite meshes (12/20)
Here’s the same animation with the UV data from the Sprites too, in this case being shown with the red and green channels. As an aside, I know that plenty of other folks have similar solutions that they’ve developed over the years, but having your own is always nice! (13/20)
And of course we can start pulling in the colour data from the sprites. Here’s just the alpha channel, but keeping the UV mapped to the red and green channel. When you see parts flickering, that’s slightly different versions being drawn from all around the spritesheet (14/20)
And here’s the animation with alpha and colour from the spritesheet. When we export the PNG parts, we manually balance the size of the parts to fill the spritesheet as much as possible. That way, the final animation is as high-quality as we can manage (15/20)
You might have noticed that Grimoire’s brown-on-beige ensemble is a bit lost against the similarly coloured background. It would be tricky to make sure that all characters are different colours to all backgrounds, so we added a white outline with a shader. Problem solved. (16/20)
The characters looked a bit too static at the ends of poses, so we added a ‘boil’ to the shader to keep them alive, breathing. We made it 10fps vs the animation’s 30fps, and the random Perlin displacement has 2 octaves, 1 large to move parts around, 1 small to pinch lines (17/20)
Imported animations are nice, but now we need to sequence them! I built a tool using Unity’s timelines that allows @SFBDim to use the animations to ‘perform’ conversations. I generate simple random timelines first for Adam to refine, timed based on text or audio length (18/20)
There’s a window to help show/edit which pose, eyes and mouth are being shown on a frame, each of which can be controlled independently – thanks nested timelines! Another big advantage over simple PNG sequences. The talking mouths even have their own internal timelines (19/20)
Now @SFBDim just has to timeline all 385 conversations…

And this is the end result. A lot of work to get here from pretty much the whole team, but I really think it paid off, and we’re very happy with the way it looks in the game!

END THREAD (20/20)
Thanks everyone who enjoyed our workflow! Folks liked the Grimoire spritesheet, so here are some more.

Penny’s my fav, I love how the packer found matching curves on the sleeves to tessellate so perfectly, how it packed smaller sprites between hair blobs to form strange faces
Pointer spends a lot of time gesturing wildly, so his spritesheet is almost entirely hands and arms. Hands are notoriously tricky to draw, so I’d like it noted that @jharrisanim absolutely nailed hundreds of hands, most only shown for a split second. Sorry Jonathan.
And here’s Flora. She barely moves in the game, apart from the one beautiful animation where her hair blows in the wind. This spritesheet is almost entirely that hair. @jharrisanim took over a week to finish this one animation, and it shows. We try to use it in all our trailers!
Oh go on, one more...

Sally has her eyes closed here in the full heads. That's to keep her expression neutral, blinking almost, until the point in each animation we switch to the settable eyes and mouth. That way we can animate into any expression and still have it look natural!
EXTRA BONUS CONTENT!

At some point, I was going to show how the animations are made of pieces by 'exploding' them outwards. So I added the feature to the FlAn player.

In the end, it didn't end up being that illustrative, too messy, so I dropped it.

But, uh, it could do this...
You can follow @SFBTom.
Tip: mention @twtextapp on a Twitter thread with the keyword “unroll” to get a link to it.

Latest Threads Unrolled: