Why you should use code to animate your UI in Unity.

hailer I'm Matt and welcome to game deaf guide UI is super important it's the literal interface between the user and your game many of us want our UI to look and feel great so you're probably going to want to animate some of those sweet sweet transitions if you're a new developer using unity or perhaps you're an artist and you're doing some UI work at some point you're probably going to open the animator and start working on some of those a forementioned sweet sweet transitions don't do it no really if you have any animation on your UI at all you're updating your layout every single frame even if nothing happens it's incredibly expensive to your games performance so what's the alternative well it's tweening if you've never heard of it before tweening is essentially a term to refer to the in-between so a tween would be the animation that occurs in between two points it's an extremely efficient way to animate things and it's much easier to manage than having a thousand animation clips bogging down your project I'm not even kidding when I say with one simple component you can more or less animate the entire majority of your UI while I could do an entire video on writing your own tweening library there are plenty available on the asset store that works straight out of the box for the purposes of this video we're going to be using my personal favorite lean tween lean tween is a free tweening library that I've been using pretty much since I started using unity to animate something with lean tween you simply call the class and then the type of between you want to perform I've attached this component to a box which I want to scale in as it closes so I'll simply call lean tween scale and set the point to 0 a third iteration of half a second and then here's why I love lean tween so much I'll chain a non complete command to destroy the UI element once it's finished animating let's suppose we want to chain other UI to pop up when this closes we can just thread our tweens and control an entire sequence of annoying UI pop-ups using lean tween and delays you should be able to see that a tweening library is extremely flexible and as I said it's not only great for UI but we can also use a tweening library like this to control other objects in our game here's a bunch of objects and I want to simulate them falling from the sky and bouncing I could do that with physics but it's unnecessarily expensive and tweening them would be much cheaper so here we've got a component that moves the objects down with the ping-pong method meaning that our UI will animate to its point and then animate back in Reverse however you animators out there might be pointing out that it's kind of characterless and that using an animator component is much better because you can customize curves well don't fret tweening library got you covered in lean tween we can set a nice type so let's set a few different ones on our objects we can also define a custom curve if these aren't good enough now there's much more character and as you can see if we add easing into our UI scaling component it also adds much more character to our popup box let's suppose we expose more of the features of our tweening library to this component things like duration and delay this way we can have the exact same zoom script on multiple UI elements in our canvas but with some variation of settings they all behave slightly differently with this process you can hopefully see the potential of how you can take a library like this further into a master component for animating your UI elements and game objects by code for my own projects I've written a custom UI tweener component that handles different common tweening types I might want such as moving zooming or fading a canvas group the component takes an input or between type and then processes the settings on the component into a suitable tween it makes adding that UI polish super super easy as I can add it as soon as I'm done designing my UI element it's an extremely fast and easy way to get that sweet sweet polished UI feeling without having to lift a finger so remember between your UI dont animate it and that's pretty much it for this guide if you want to learn more about optimizing UI for your game I highly suggest watching this talk from Ian Dunn door at unite 2017 it's a 50 minute talk about improving performance with half of the talk dedicated to work arounds and gotchas for unities UI system i'll be covering a few of them in the future but it's definitely reckon watching for any unity UI artists or designers among you if you've enjoyed this video be sure to hit the like button and leave a comment and of course if you're interested in more game dev tips tricks and tutorials be sure to subscribe I'll see you next time thanks for watching you

Channel: Game Dev Guide

Views: 226,257

Keywords: unity, learn, games, gamedev, how to, making games in unity, tutorial, unity tutorial, learning unity, unity3d tutorial, programming, making games, ui, better ui, optimise ui, unite 2017, lean tween

Id: Ll3yujn9GVQ

Length: 5min 2sec (302 seconds)

Published: Mon Apr 08 2019