Pro UI Animation using DoTween simple codes - Unity Engine Tutorial

the user interface is a great indicator of how polished is your game so instead of just activating or deactivating your menus you can create high quality and efficient animations for your video game using only one tool which called do tween that is performant and provide a great results so if you're aiming to bring your menus to live this video is for you this is ramis altabah from binary lunar and let's get started [Music] let's start by creating a new unity 2d project and name it ui animation dutween to start building our menus we need some assets and i found for you some cute and nice user interfaces which are for free on unity as a store the sweetland gui and the cute cartoon mobile gui and of course we need the dutween package which will be used for coding our ui animations so first things first we start by creating our canvas which will contain or all our ui so let's right click ui canvas include inside that we will create one button to call our for example shop panel so let's create ui image and try to find a nice button that suits a shop and inside it we can put an icon which is an icon shop of course we can align that to the top left and do some padding on the x on the on the y and change the width and the height a bit to be more visible on the screen now let's create our shop panel which is simply also again just an image we change the width and the height to something suitable then we find some nice button which is sliced to fit any size of panels then inside the shop panel i created another canvas which will hold all the buttons or the images of the shop content you need to have a great component to easily organize all your buttons or your images inside one container which is called grid layout group so we will use that to auto arrange all the buttons or the items inside our shop panel to demonstrate that let's create one image then duplicate it 10 times then go back to the grid layout set the patting to 10 on left right top button maybe increase the cell size to 200 and check this awesome results now we can just delete the additional nine buttons and focus on one image and inside it we put an icon then we duplicate it again nine times to get again ten items after choosing a suitable icons for each one [Music] then we can use this nice image for the title of the shop panel and fill it with a text using the text mesh pro and finally we can create the exit button simply as we did for the shop button by adding image and an icon for that image and in the end we add button component for both the exit button and the shop button so simply any game creator will assign those two functions after disabling the shop panel we go to the shop button and on click we can activate the shop button again and then on clicking on the exit button we disable the show panel but this mechanic is really boring and give bad impression about your video game so let's add some magic by adding some dutween codes to our game so let's create a new script ui manager and let's add some properties we will make simple animations related to the position and the alpha of our panel so we will control the y position of our rect transform and we will control the alpha on the canvas group and since we will be using dutween we need to add the dj.dutwin or training library by adding this code using dg.tweening let's remove the start and the update methods because we will not use them and we will use our custom functions let's add the following parameters we need a public float fit time to control the fading in and fading out for each panel we will create we need a reference to our canvas group and a reference to our rect transform the canvas group we will access the alpha to control the alpha of the panels and using direct transform we will control the y position because what i want to do is make the panel goes from bottom to up while fading in then the opposite now let's create the public function which is called panel fade in we need to make sure that the canvas group alpha is zero and the direct transform local position is minus one thousand to make sure that we move the panel from bottom to up then we do do anchor position to make it go back to the zero position which is the start position and we add an easing using the dutween which make a great animation for the panel once i save this code i'll show you the results soon and finally we make an animation also for the alpha to fade in so we call the canvas group dot do fade to one one means visible zero wins totally invisible and we add the fading time which is one second in our case currently now we need to do the opposite by creating a public function panel fed out we can copy all the codes we created in the page in and reverse the values so we need to make sure that the canvas group alpha is one and the position is zero when we start then we do the movement on the y-axis and we fade out after that we need to add the panel fade in function to the shop button and we add the panel fade out function to the exit button on our shop panel of course we don't need to forget to drag the references to our shop panel canvas and the shop panel ready to transform for the for the codes to work now let's save head to play and check our buttons when we click the exit button the panel fades out when we click the shop button the panel fades and pops in with a nice animation now let's add some cute animations to all the buttons or the items inside the shop panel for that we need to create a list of game objects and name it items and we create i enumerator items animation so we do for each item in our items we set the scale to zero because we want them to be shrinked or not visible in the screen then we want them to pop up each item one by one so we do items dot transform dot local scale not position as i made a mistake here equals to vector zero then again for each item in our items list we do item.transform.2scale to one f which means the original size of each item using our fade time which is one second and additionally we add set ease to ease dot based on my selection i found that the outbounds will provide the best results of animations and of course not to let all the items pop up at the same time we can add yield return wait for seconds and set the time to wait between each item and the next item popup and finally we need to do those animations when we fade the panel in so we call the start routine and we call the item animation i enumerator there save the file and go back to unity now drag all the items you want them to be animated to the items list in the inspector hit play and enjoy all those nice animations to all the items inside our shop panel and as a final extra step we can add sound effects for our items animations by adding an audio source to our to our ui manager and giving reference to that by either making it public and the drag and drop the sound manager there or by making it a private audio source and giving it a reference in the start function and finally we can create an audio clip and name it pop-up sound effects then go down to the items animation and simply add this one line audiosource.play1 shot pop-up sound effect oops i forgot to add a reference for our audio source in the start function so let's add a start function and make a reference to our audio source by typing it's equal to get component audio source save the script then drag an audio clip to this pop-up sound effect then hit play and enjoy this great results and that's it for today's video if you enjoyed and found this video useful don't forget to hit like subscribe and the notification bell so you don't miss the next videos and of course we are deeply thankful to all our supporters on patreon for their generous support and keeping encouraging us to do more quality content till next video see you soon you

Channel: Binary Lunar

Views: 34,727

Keywords:

Id: PsFarJG4IrU

Length: 12min 35sec (755 seconds)

Published: Thu Jun 23 2022