Developer Insights

  Complex animations and cinematics in Unity2D


Developer: Juicy Beast
Location: Montreal, Canada          
Game Title: Burrito Bison: Launcha Libre
Game Genre: Launch, Arcade
Framework: Unity 2D
Release date: November 10, 2016
 
For Burrito Bison: Launcha Libre we knew we wanted big, complex and well animated opponents on the ring, after all the feature was in previous installments. However, it was the first time we ventured in the fabulous world of complex animations in Unity and we had to consider several new solutions.
Burrito Bison: Launcha Libre complex animations in Unity with gaf
 

Solution 1: Spritesheets

By far the easiest: export each image from Flash and put it into a spritesheet. But with opponents as big as 300x500px with 10 seconds worth of animation, it would mean a couple of 4000x4000 atlas images or 1FPS animations to make it bearable for that poor RAM. These and any combo of compromise in between are obviously out of the question.

 

Solution 2: Use an in-house Flash exporter

The exporter was made and all, but it could only export animation with little complexity and couldn’t do many features, it would limit us in what we could do and using it is not flexible, improving it would be an option, but an expensive one.

 

Solution 3: Use Spine

Spine is a great animation software that can export for Unity. It is flexible and allows for easy and professional work. As we began to learn a little about the software, we realized we were way more comfortable in Flash (we come from a flash background). Really learning to do professional work on it would be expensive for the time and money we had available. It is a viable solution but we wanted an easier one.

 

Solution 4: Use Unity’s animation module

Haha! No.

Seriously, it seemed to be less flexible than Spine, less friendly too for the complexity of what we had to do and we knew very little about it, we still used it for some simple animations in the game.

 

Solution 5: Use a Flash exporter from the asset store

To my knowledge there are currently 2 that work very well. Tried both of them and we found a winner: GAF.

 

GAF: give swf, receive result.

First time I used GAF I was wowed. Without knowing anything about it, I just put our company’s previously made flash intro bumper animation in the machine and it gave me back a working GameObject with the full animation in all its 5-6 levels of nesting, transparency masks, color transformations and skewing glory.

 

You must know that I fantasized about rendering this animation in-engine instead of resorting to video files since we made Toto Temple for all the consoles. Encoding for 8 different platforms is really a pain and then implementing it in 12 different ways is even worse.

 

We used GAF over its competitor for several reasons:

  • Simple support of Masks

  • Support of color changes

  • Ease of use on preparation, export/import and use of the result

  • Can determine the maximum sampling size to optimize sprite sheets

  • The animation can be exported as a GameObject that use exactly the same hierarchy and logic as any GameObject.

 

This last feature is what really sealed the deal. With this feature we could easily make animated dynamic pages and add custom behaviour to elements of the animation, all that using Unity’s common logic.

 

JuicyBeast using GAF Converter for Burrito Bison

This GAF animation has no sprite, all that you see are GameObjects added in the animation within Unity.
 
Burrito Bison animated character with gaf

You can see that the collider follows the bunny, I just added a collider to one of the animated sprites and I now have a moving character!

 

This is magic, but it comes with its lot of quirks

First of all, the events are exported, this is awesome! But GAFs exported event system is really not an event system. To be able to use its event system as an event system, I had to create a shell script that would collect and “listen” to all the events and relay them to actual listeners.

 

Also, to get consistent results I had to create one .swf per exported animation, with the animation on the root level of the .swf

Also, updating an animation after you change the hierarchy, remove or add a sprite resulted in broken exports, I had to delete everything and restart. To help me in this, I created a script that would help me transfer the custom infos from one GAF object to the new one. Not a perfect system but better than nothing.

 

Also, as it is quite heavy on the process and in garbage collect, I don’t recommend using this for items that appear regularly in gameplay or simple animations, it is more for special elements that need complex animations than a solution that fits all needs.

 

Despite its flaws, I am literally awed by GAFs magic. If you want to make fluid and beautiful 2D animations for Unity and you are pretty fluent in Flash, GAF is your solution.