LeanTween Unity Tutorial - Animate Game UI by Tweening

animating new elements in your game using unity's traditional animation system may reduce the performance of your game especially if you have a ui element animating the entire time like this color wheel in the background but unity fixed this issue before its 2020 release but even though it doesn't have performance problems i find it so easy to create and manage a ua system using tweens than the traditional animation system by training you are just defining two states through code and the ui element will animate from one state to another in a given period of time there are so many cleaning libraries available in the asset store but in this video i'm gonna use lean twin so i have this project set up with a canvas and inside it i have made a level success screen this is basically separated images of this ui what we are going to do is we are going to animate this whole scene from this to this so if you're making an android game and you want a good looking level success screen with animations that is also very well optimized then you can download this project from my github repo and use it wherever you want but wait understanding how i made this will make you even better at creating any type of ui animations for your game so make sure you stick to the very end of this video with that said let's dive into the implementation part so in the project i have put all the ui elements that i'm not gonna animate inside a game object and the ui elements i'm gonna animate inside another game object i have also put the level success screen right outside of all groups and also background image and rotating color wheel inside another canvas cool now let's import the lin queen package from the asset store i have already added to the my assets okay to control every tween using one script we need to make game object and attach the script to it so make a game object called tween and attach a new script to it i'm calling it ui tween double click and open it in visual studio delete this update method and make a serialized field of type game object write the names of every ui element we're gonna animate so we have a back panel a play button a replay button three stars i'm naming it star one star two and star three and we have score coins gems color before rotating in the background and lastly level success all right now let's do some linkedin scripting the structure of a link to encode will be linkedin dot the function and inside the parenthesis the parameters the function takes most functions will have a time period for completing the twin which will be the last parameter inside the brackets you can clamp other functions to this like set delay which delays the calling of same code and oncomplete which takes in a function which calls after the completion of the execution of same code so here as soon as the scene starts we need to rotate the color wheel and show that level success box so to do that type lean green dot rotate around in the brackets color wheel the direction which i am giving is vector 3 dot forward and the angle i am giving it minus 360 which will rotate it to the clockwise direction and the time period to rotate i'm giving it 10 seconds i need this color wheel to rotate the entire time so to do that type set loop clamp save that head back to unity drag and drop the color wheel inside the slot and click play now our color wheel is rotating next we need to pop out this level success from the sender and nicely place it on the top of the panel so i am disabling the panel right now get back to vs code and type lean twin dot scale inside the bracket level success comma the scale our game object we want to animate too i'm giving a 1.5 scale on x y and z comma the duration i'm giving it 2 seconds let's set a delay of 0.5 seconds and set knees type each type will give more character to your animation than just animating from one frame to another it's a technique used by animators to enhance the feel of the animations for example out of the two animations on the screen which one feels more lifelike the second one right same kind of behaviors can be achieved in limiting using each type i will leave a link to a github page where you can choose which kind of movement you want for your ui elements by looking at these small examples select one and type set ease inside brackets lean twin dot i have selected ease out elastic save that and get back to unity drag and drop our level success screen to the slot position our level success at the sender and set the initial size which is zero zero zero now hit play cool that ease type is really matching with the situation next let's move the level success panel to the top of the back panel and reduce the size for moving type move local inside the brackets type game object comma new position which i have already written out the values comma the duration i'm also setting a delay and nice type i'm using easy note cubic cool let's also reduce the scale to one save that get packed unity and hit play everything works fine next i'm gonna make a function called level complete and inside it i'm writing codes for back panel just like i have done for level success you can find all the quotes from the lean twin documentation which i have dropped the link in the description below i'm calling this function after the level success animation i have already tested the timings that's why i'm putting every value directly if you are animating a new ui you may have to test with different values as well save that drag and drop all the ui elements and set all the initial states position alpha and rotation now hit play cool and lastly i am animating the stars and making a non-complete function inside level complete set its initial scale and hit play there you go this is your ui animation using lean twin lean twin is a powerful tool and it's so easy to manage an entire ui system using lean twin i have also animated the ui i have created in my start menu video link to download that also will be in the description below thanks to justfinker for supporting me on patreon as always like comment share and subscribe if you haven't already and i will see you in my next video [Music]

Channel: Pixelbug Studio

Views: 36,029

Keywords: leantween, uitweening, tweening, uianimation, unity, unityui, ui, game, androidgame, casual, startmenu, menu, unitymenu, unitystartmenu, playbutton, optionsbutton, quitbutton, gamedevelopment, indiegamedevelopment, unitygamedevelopment, anchors, pivots, uniunity, userinterface, canvas, uicanvas, panel, button, textmeshpro, indiegamedeveloper, madewithunity, tutorials, unitytutorials, indiedev, indiegame

Id: K_bJvKXjCmU

Length: 7min 27sec (447 seconds)

Published: Sat Jan 29 2022