Benoit Fouletier

Patch Animation Pipeline (with Unity)

Posted on June 26, 2014

Ahoy there, long time no see! I’m Ben the Programmer, back for another tech fix.

Here’s a quick timelapse to show off our brand new animation pipeline.
Note that this animation has been made by Paul Clarissou, our almighty animator intern.
YouTube Preview Image

What we have here basically, is a classic puppet rig: a skeleton with various sprites attached to the bones, except these sprites can be attached to multiple bones and be deformed accordingly.
The concept is very similar to the animation tool that was used on Rayman Origins and Rayman Legends (and later Child of Light, I suppose, except they went 3D for their main character).

This type of sprite is called a patch (think of it like this: if a Bezier curve is a line, a Bezier patch is a surface).
Patches are trivial to setup compared to 3D rig with vertex weights etc, and (most of the time) get twisted in a pleasing, organic way, which is perfect for the look we aim for in Seasons After Fall.

What’s also nice about 2D rigs is that, when you want a different pose, or when a patch get twisted too much, it’s super easy to swap it for another one more appropriate for the pose. All it takes is a talented artist to draw it (which we have), and it’s much faster to do than 3D modelling, painting, etc… sprites are cheap!

Lastly, it’s possible that we might need flip-book animations on some patches, like sub-animations for only a certain body part, like they used for example on Broken Age (mostly for the characters faces). While our editor doesn’t really support it elegantly right now, the system makes it totally feasible.

For this tool, we tried to build as much as possible upon Unity‘s existing animation features: the animation timeline with its dope sheet and curve views, and Mecanim controllers for blending (not shown here, but we already use it for the main character).
While we evaluated some third-party solutions, some in-Unity but based on vertex-skinning (basically 3D rigs flattened to 2D: yuck!), others using external tools with importers etc.
I felt it was important to have the animation in-engine to have true WYSIWYG, prevent artifacts like “oh well it looks fine in the tool but in the engine the characters’ sitting on his head and his elbows are broken” (always fun to debug, those!), be able to apply real in-game materials and effects, etc.

Also, having custom animation format would mean not being able to use Unity’s blending, and I wanted to give Mecanim a chance. So far I’m not sure I’m a 100% in love with Mecanim, we’ll see as we use it more, but if it comes to that we can always fallback to legacy. That’s a story for another technical post I suppose!

Oh and we also reused our Photoshop pipeline to make it a breeze to import complete PSD layouts and seamlessly convert layers to sprites, then patches, keeping their relative position and draw order.

See you in the comments or on Twitter @benblo42 if you have questions or whatever!

From Photoshop to Unity

Hello world! My name is Ben, and I’m a code addict.
This is my first time here, so on behalf of the Swing Swing Submarine team I’d like to welcome myself to this blog, yay!

With Tetrobot and Co done and Seasons after Fall starting, I want to use this transition time to share some of the tools and techniques that we’ve developed during Tetrobot and Co. Today: some Photoshop magic!

The menus of Tetrobot and Co were fairly (ridiculously?) complex, with multiple layers, many animated elements, doors opening and closing, and seamless screen transitions, so we knew a traditional, square-buttons-on-a-static-background UI system wouldn’t cut it. We had to make it easy for Géraud, our illustrator, to design as much as possible in Photoshop, and bring it effortlessly to Unity, animation-ready.
The basic idea: he draws as usual in Photoshop, using as many layers/groups/etc as he needs, and when importing the PSD files in Unity we extract each layer into a PNG, as well as the extra data (layer size, position, and depth, mostly). We also replicate the group structure, so with one click of a button we end up with a Unity hierarchy that is an exact match for the Photoshop layout.
Then when he changes the PSD, he only has to regenerate the textures, and can optionally also synchronize the scene.

main menu in Photoshop

The main menu in Photoshop

main menu in Unity

The main menu in Unity

Continue Reading