We may want a more complex animation than simply an appearing/disappearing effect as covered in the previous recipe. In this case, we need to use an Animator controller along with the Animation window in order to create animations. In this recipe, you will learn how to create an entrance transition. However, feel free to change the animation when performing the following steps to fit the needs of your game. Furthermore, we will still be using the OnClick() event to cause PauseMenuButton to disappear.
- First of all, we need to create our menu. To do this, just follow the first three steps of the previous recipe, Appearing and disappearing menu.
- Next, we need to place Appearing Menu slightly outside Canvas, as shown in the following screenshot:
- After we have selected Appearing Menu, we can click on Add Property in the Animation window. Unity asks us to choose a folder and a name for our animation. For now, let's name it MenuEntryTransition.
- Next, we are going to create the animation. To do this, click on the Rec button and then move the red bar to 1 second, that is, to the sixtieth key frame if the sample is set to 60. Using the Rect tool, we can move the menu inside Canvas, where we want it to be. For instance, we can place it to the right of the screen.
- Then, click on the drop-down menu, find MenuEntryTransition, and select [Create new Clip].
- Again, Unity will ask us to save the animation. Hence, let's select the same folder as that of the previous one and rename it MenuExitTransition.
- This time, we need to make the same animation, but in reverse. After clicking on the Rec button at 0 seconds, which means that the vertical red bar is at the zeroth key frame, we have to place the menu where it was at the end of the previous animation. Then, at 1 second (which is the sixtieth key frame for 60 samples), place the menu where it was at the beginning of the previous animation.
- The next step is to put the animations that we have just created together using a controller. If we search in the same folder in which we saved the animations, we can find a controller called Appearing Menu. Double-click on it to open the Animator window with the controller already loaded.
- One more step about the animation is to select them one at a time in Project Panel, since multi-editing of animations is not supported by Unity. In addition, we will also need to uncheck the Loop Time variable for both in the Inspector. By doing this, we are setting the animation as a single shot and not as a loop.
- Since we will call the animation directly by its name, we don't need any graph transition. Therefore, we need to be sure that we have both the animations inside the graph, like this:
- Now, we want PauseMenuButton to disappear when the pause button is clicked on, and then we want the pause menu to appear with our transition. To do this, 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. Now drag PauseMenuButton into the object variable. Then, click on the drop-down menu in which you see no function, and go to GameObject | SetActive(bool). Finally, uncheck the bool variable.
- Add a new event again, but this time, drag Appearing Menu into the object variable. Navigate to Animator | Play(string) from the dropdown and put it inside the string variable called MenuEntryTransition. Finally, the OnClick() tab should look like this:
- Again, we have to add a couple of events to ResumeButton. However, we need to change the string variable of the transition in MenuExitTransition, and check the bool variable to make PauseMenuButton appear. So far, it should look as follows:
- Finally, we can click on Play and see if our transitions work.
First, we created our menu. We began by creating a couple of animations with the Animation window, and then we placed them inside an Animator controller. Here, we used the controller just as a set of animations, since they are triggered by the OnClick() events from our buttons. When the trigger arrives, Animator plays the animation, which is specified by us.
As we did in the previous recipe, it is possible to freeze the game, as a pause menu should do.