Which one do you think looks more impressive and professional? First, let's take a look at the game's state before using DOTween, and then let's take a look at its state after adding animations to the UI objects using DOTween In this Unity tutorial, we will make an example of how to animate UI objects using DOTween. Initially, I had planned to make this example using LeanTween. Then I realized that DOTween is more preferred than LeanTween. Anyway, I first made slight changes to the UI design. And I added the levels menu we previously created to the game. You can check out these videos for detailed information
about the levels menu. Hello, dear friends 👋 Welcome to Rehope Games. If you wish, let's start with the DOTween installation. Open the Unity Asset Store website. Search DOTween. Here you will see two different versions of DOTween. The free version is enough for us. Click on Add to My Assets. Then go back to Unity. Open Package Manager. You can see the DOTween package under My Assets. Click on the Import button. The import process
will take a few seconds. Then a new window will open. Click on the button. And click on the setup button. Wait a few seconds at this stage. Here you can remove
modules that you will not use. Then click on the apply button. And wait for the installation to complete. If you wish, you can later access the DOTween panel
from the tools bar. After the installation is complete, you can see the DOTWeen folder in the project panel. I opened the level 1 scene
and started the game. As you can see, when I press the pause button, the pause panel suddenly opens, and when I press the resume button, it suddenly disappears. Let's take a quick
look at the pause menu. As you can see, there is a pause button here, and when we press it, the pause menu
object becomes active. The pause menu
consists of a dark panel, a pause panel, and buttons. I added a click event to the buttons using
the pause menu script located in the pause menu object. Let's take a quick look at the pause menu script. Pressing the pause button activates the pause menu, and time stops. Pressing the resume button deactivates the pause menu, and time continues. So how do we make the opening of the pause menu more impressive? I will move the pause panel off-screen. So I'm going to change the Y Position of the pause panel's RectTransform. When the player presses the pause button, I will move the pause panel on-screen And when the player
presses the Resume button, I will move the pause
panel off-screen again. Namely, when the player
presses the pause button, we will adjsut the y-axis
value of the RectTransform for the pause panel to 0, and when the player
presses the Resume button, we will set it to 750. We'll make this change smooth
and animated using DOTween Let's see how to use
DOTween for UI animation. Go back to the pause menu script. I will create two new functions named PausePanelIntro and PausePanelOutro. When the pause button is pressed, I will call the 'PausePanelIntro' function. And when the Resume button is pressed, I will call the 'PausePanelOutro' function. We have to add the Tweening
library to use DOTween. I will create a RectTransform variable to control the pause panel's position. To use DOTween, we start by specifying the 'DO' key, and then we choose
the method we want to use. I want to change the Y
position of the pause panel. First, we specify
the target Y position. Then we determine the time it takes to reach this target. I will copy this method and change the target position. Save the script and go back to Unity. Drag and drop the
pause panel object to this slot. Set the variables. topPosY is the position value when the pause panel is off-screen. middlePosY is the position value of the pause panel
when it's on the screen. I will set the default position of the pause panel to topPosY. And set the tween duration. I will disable the
pause menu by default. ok start the game. When I pressed the pause button, the pause menu became active. But the pause panel did not move to the middle of the screen. The reason for this is that since we stopped time, the animation movement also stopped. Let's disable time stopping and start the game again. As you can see, the pause panel animation worked but the game continues. Let's solve the problem quickly. We can make the animation independent of time
with the SetUpdate method. As you can see, the game stopped but the animation moved. When I press the resume button, the pause panel suddenly closes without any animation movement. Because we disable the object without waiting
for the animation to end. I will use Asynchronous programming to solve the problem. So I will make a few minor
changes to the function. We must use the AsyncWaitForCompletion method to make DOTween animations asynchronous. In this case, after the DOTween animation is completed, the pause menu object will have 'SetActive' set to 'false'. save and go back to unity. As you can see, when I press the resume button, the animation is completed first and then the object becomes disabled. You can change the
tweenDuration as you want. As you can see, when the pause menu is opened, the background suddenly darkens. Let's improve the opening animation of the pause menu a little more. We can smooth the
transition into darkness. So, I am going to add a Canvas Group component
to the dark panel. And I will change the Alpha value of the component using DOTween. Create a new variable for
the CanvasGroup Component. We’ll use the DOFade function of DOTween to
control the Alpha value. Copy this code and change the end value to 0. Set the Alpha value to 0 by default. Drag and drop the
dark panel object to this slot. Start the game. As you can see, we now have a soft fade. I want the Timer and Pause Button to smoothly go off-screen when the pause menu opens. First, we need to determine
the position values. In this video, we provide a simple
example using DOTween. We will explore more examples in future videos. Ok save and go back to unity. Drag and drop the timer and pause button to their slot. Start the game. Nice! looks cool. Let's add SFX to make the UI
animation more impresive. I added a Pause Panel Whoosh sound effect to the project. Let's quickly take a look
at the Audio Manager system. My Audio Manager object is like this. And the Audio Manager script is like this. I access the Audio Manager script from wherever I want to play sound effects. You can discover detailed
videos on the channel that explain how to incorporate sound and music into any game. Thanks for watching 🙏 See you in the next Unity Tutorial 👍
