Since the UI does not need complex animations, you will learn that it is not necessary to use the Animator controller and/or the Animation files. In fact, in this recipe, we are going to use only the OnClick() event, which is already implemented inside the Button (Script) component, to handle the menu appearing and disappearing.
- First of all, we need to create our menu. We are going to create a simple menu to show how we can make it disappear and then reappear. However, feel free to construct the entire menu for your game with all the elements that you need in it. Thus, we can right-click on the Hierarchy panel and then go to UI | Panel. Next, we can rename it Appearing Menu. Of course, it is possible to resize, change Source Image, and place the panel wherever we wish.
- The next step is to add at least one button to our menu. To do this, right-click on Appearing Menu, go to UI | Button, and then rename it Resume Button. We can also change the text variable of the Text (Script) component, attached to the child of our button, to the Resume string. For instance, we can construct a menu like this:
- Now, we need to add outside of our menu another button that opens the pause menu that we have just created. Thus, instead of right-clicking on Appearing Menu, right-click on Canvas and then go to UI | Button. Again, we should rename it PauseMenuButton and change the text inside it to Pause. After we have placed it in a location in which we want to use it, such as the top-right corner, we should have something that looks like this:
- When the Pause button is clicked we want PauseMenuButton to disappear and the Pause menu to appear instead. In order to do this, we need to use events. Select PauseMenuButton and, in the Inspector, click on the small + sign in the OnClick tab inside the Button (Script) component. A new event should appear in the Inspector.
- Drag Appearing Menu into the Object variable, and then click on the drop-down menu on which no function is written. Select GameObject | SetActive(bool). Finally, check the bool variable. Once we have done all of this, when we click the PauseMenuButton, the Pause menu will appear.
- Now, we have to do the same again. We need to add a new event, but instead of dragging Appearing Menu into the Object variable, let's set it to PauseMenuButton. At the end, remember to uncheck the bool variable. Therefore, when we click the PauseMenuButton, it will disappear. After completing the last two steps, we should have something that looks this:
- We also need to repeat the same two steps with Resume Button, but invert the bool variables. As a result, we have something that looks like this:
- Since we probably don't want to have the Pause menu active at the start of our game, let's select Appearing Menu and set it to inactive. We can do this by clicking on the bool variable next to the name of GameObject.
- Finally, we can click the play button and check whether our Pause menu works.
We used events instead of Animator controllers to handle the menu. In fact, we have set four events. Two of them are in PauseMenuButton, and both trigger our UI elements when the button is clicked on. The former makes Appearing Menu appear by calling the setActive() function and passing the true boolean value to it. The latter disables PauseButton by calling the same function. By doing this, we ensure that the player cannot use PauseButton anymore when the Pause menu appears. The other two events are symmetric, but they are on the ResumeButton. These can be triggered only when the Resume button is clicked on, and this can happen only if Appearing Menu is visible. That means that it can occur only after the player has clicked the PauseButton. Again, the first one makes PauseButton appear by calling the setActive() function, and the second one makes Appearing Menu disappear.
Since we have implemented a Pause menu, there are a few things to keep in mind beyond the animations. Usually, we have pause menus for allowing the player to stop temporarily playing or to tweak some settings. In order to do this, the whole game needs to be frozen so that it can be resumed once the player is ready to play our game again. Thus, the next subtopic is going to explain how to really pause the game.
Usually, when the Pause menu appears in a video game (unless it is an online game), the game will freeze, even if this is not strictly part of the animation system of the menu. We can make the menu freeze quite easily in Unity.
To do this, we need to create a script that changes the time scale of our game. We can rename it FreezeTimeScript.
Just a public function is required — the following one, which we can add to the script:
public void setTimeScale(float timeScale){
Time.timeScale = timeScale;
}In this line of code, we change the time scale of the game by the one passed as a parameter. Keep in mind that a time scale equal to 0 means that the game is frozen, and a timescale equal to 1 means that the game has no time distortions. Now, we need to call this function when PauseMenuButton or ResumeButton is clicked on. To do this, select PauseMenuButton from the Project panel and then add a new event in the OnClick() tab. Furthermore, add FreezeTimeScript to PauseMenuButton and drag it into the object variable of the new event. From the drop-down menu, go to FreezeTimeScript | setTimeScale(float) and set the float variable to 0.
Repeat this process with ResumeButton, but instead of setting the float variable to 0, set it to 1.
Since timeScale is set to 0, when we click on the button, all of our game freezes. Alternatively, when timeScale is set to 1 and we click on Resume, the game starts again. It's important to keep in mind that animations may or may not be affected by timeScale, depending on how they are implemented.