Unity Animators and UI

Unity does a lot of things well, and a lot of things not so well. But one of the features I'm rapidly becoming enamored with is the animation system.

Now to the untrained eye the animation system might seem only useful for importing animations for 3D models, and it works for that. One nice feature is you can even tweak those animations once imported into Unity (that said, I wouldn't bother, your modeling suite probably has superior animation capabilities, like proper skinning and rigging, but if you need to patch something real quick it's handy!)

But beyond models, the animation system can do so much more. Did you know you can animate basically anything? And I mean anything. Want nicer UI? Whack some animations on it. Want your AI to do some interesting stuff? Animate your parameters. The state based machine that comes with the animation system is seriously powerful stuff, and being able to smoothly tween and use curves to animate basically anything is a great feature. So today lets just talk about one of these. (I love this system so we'll come back to it in future I'm sure.)

Animating UI is a good easy place to start, and can add loads of polish to your game. What's nicer than having smooth transitions, dropdown menus and other pretty stuff? I'll mostly skip over the basics, Unity themselves probably have a far better tutorial than I could write, so I'll hit the ground running, smash out some quick principles and hot tips and I'll let you do the legwork if you don't understand the basics. (I'd rather have a brief tutorial that loses a few people than a mighty tome that alienates even more)

So lets assume you have a basic canvas operation underway with a button or two. If you hit CTRL+6 you'll open the animation panel. Then, you can create a new animator + animation with the create button:

So now we've added an animation, I'm gonna create 2 clips, an idle and a hide animation. You can totally do more but for demo purposes there's no need.

 

So when you have the animator open, there's a little record button. This thing is amazing. Unbelievably cool. When you're recording, everything you do to your object will be keyframed. EVERYTHING, this is nuts. To start with I'm just gonna add a rotation:

So that adds a simple wobble to my menu. It's a little tacky, but you get the idea.
Now for some crazy stuff, I said you can animate anything and I mean anything. Check this out:

With the record button on I've clicked on the interactible bool for the button component. This keyframes the change, so when this animation plays it'll set the bool to whatever I choose, in my case I disable it. Once you press the button I want it to prevent you pressing another one while we animate and change scene.

Once animations are done, I jump into the animator (up top Window->Animator) which is where you can set up your transitions etc. I add a trigger called 'hide' (go parameters, then there's a + button) and then set up a transition between the two states. Then I set the transition trigger to be hide, and ensure that 'has exit time' is unticked. (Has exit time basically waits for the current animation to end before transitioning, but we want the animation to interrupt)

So once that's all set up we have a working animator and a working set of animations. Now comes the really cool part. I'm sure you've slogged through making fancy menus and the code can just get obscene, triggering this triggering that, setting things up moving them around. Well hooking this up is about as easy as it gets.

I'm gonna assume you've used buttons before to call events and stuff so I'll keep it brief. I've set it up here so it contacts some script (I just made a basic menu script which loads a level on command after 1 seconds, a 4 or 5 liner) but what I've also done is contact the Animator attached to our menu. Then, I've called it's "SetTrigger" function, feeding in "hide", which is identical to doing it in code, but we did it without even opening a script, which in my eyes is pretty damn sweet.

So the end result is we have a nicely animated menu, for basically no code effort and all up it took maybe 10 minutes? Obviously you can polish this up, my example is pretty damn tacky if I say so myself but with a little work you can make beautiful looking menus for little effort, using the basic stuff I've shown you here it's possible to make some really advanced stuff.

I know this was pretty crash course, honestly I'm not the tutorial type. If you get lost of have a question drop a comment down below and I'll try and get back to you. It's the nice cooperation between Unity's systems like this that make me really enjoy working in the engine, at first glance I wouldn't think animations could be so versatile but they interact really nicely with basically everything else in the engine and honestly it's just so damn convenient. You can save a lot of time and make your game seem way more slick.