Create A Sliding Pause Menu - Unity 4.6 GUI

Okay, here comes another tutorial on the all new Unity GUI (Unity 4.6). The one which was requested by some of the guys that visited us and had enough time to contact us and request for a post. This is when I realize the importance of having a separate page for Request For A Post. However, as of now, we'll keep it to some other day. The thing that we'll be concentrating on in this tutorial is How to add a Sliding Pause Menu (Of course, you can extend it to any other kind of Menu).

Create A Sliding Pause Menu In Unity 4.6 - The Result



Follow the simple steps below to create a Sliding Pause Menu using Unity 4.6:

1. Create a New Scene and name it as PauseMenuDemo, of course, you can name it whatever you like and you can also use it to any existing scene.

2. Create a Panel by navigating to GameObject->UI->Panel. You will notice that this Panel which you have created is created as a child of a Canvas component. Also an EventSystem object should be added.

3. Select the Canvas in the Hierarchy and you should see the configuration of it's in the Inspector. Make sure the Render Mode is set to Screen Space - Overlay. Also, check the Pixel Perfect checkbox.

Canvas Configuration - Unity 4.6
Canvas Configuration
4. Add a Reference Resolution component to the Canvas so as to make sure the Pause Menu that is being created will be independent of the screen resolution that our game will be played on. You can add this by clicking on Add Component and search for Reference Resolution. Set the Resolution X to 1366 and Y to 768. Set the Match width or Height to 1.

Reference Resolution component unity 4.6
Add Reference Resolution component 
5. Change the color of the Source Image of Image (Script) component present on the Panel, or you can also choose it to be transparent. It's purely your wish.
Set the Anchors of the Panel component to Stretch Stretch. Once you do this you will notice that the Anchors Min X = 0 Y = 0 and Max X=1 Y=1 values are set automatically.
Also, set the Left = 0 Top = -800 Right = 0 Bottom = 800.

Note: These values might differ for you, in case they do, make sure you position the Panel above the Canvas and is not visible in the Game scene

Panel Rect Transform Configuration - Unity 4.6 GUI
Panel Rect Transform Configuration
Once you have done these steps you will have something like

Panel Above Canvas At Start - Unity 4.6 GUI
Panel Above Canvas At Start
Note: Make sure that the Panel is located above the Canvas. As we don't need this to be displayed on start.

6. Add a Text Component and some Buttons within the Panel, you can add other UI components as well, if you need. Position them as per your needs.
Configure the Text component as in the image below, modify it if you wish to.

Text Component Configuration
Text Component Configuration
Also set the Anchor position of the Text component to it's edges to make it dynamic.

Text Anchor Position
Text Anchor Position
Similarly, do the same for the Text component that is present within each Button.
Once you are done with this, you should have a Panel that looks like:


Panel Final
Panel Final
7. Next, we need to animate this Panel to slide it in on and slide out. Before we do this, I'm going to rename the Panel as PauseMenuPanel just to be more organized. Open the Animation window by going to Window->Animation. Create a New Animation of the Panel named PauseMenuSlideIn. We will basically animate by changing the Rect Transform values. The frame at 0 will have the values Left = 0, Right = 0, Top = -800, Bottom = 800. The frame at 60 will have all 0 values. 
In case you are not aware of how to create an animation, refer the gif below:


8. As you can see in the gif above, the animation was playing in a loop which we do not want. We will make it play only once by unchecking the Loop Time checkbox. Select the PauseMenuSlideIn animation which was created in the previous step and you will have something like the image below in the Inspector. Uncheck the Loop Time checkbox.

Loop Time
Loop Time Uncheck
9. You would also see that there is an Animator component added to the PauseMenuPanel. Uncheck it as of now. Set the Update Mode to Unscaled Time

Animator Component
Animator Component
10. We need another animation to slide out the panel once the game is unpaused. Instead of creating a new animation. we will duplicate the one we have and set it's Speed to -1.
If you double click on the PauseMenuPanel Controller from the Animator component or from the folder where it is present, you will notice that it has a Any State and a PauseMenuSlideIn state. 

Animator component contents
Animator Component Contents
Right click on the PauseMenuSlideIn state in the Animator window and select Copy and Paste it once it is copied. Rename the new state to PauseMenuSlideOut. Set the Speed to -1.

Slide Out Animation
Slide Out Animation
11. Now, all we need to do is write some script on when these animation states should be played. To do this create a new C# script named PauseMenuScript. Attach it to the Main Camera and add the below code to it:

using UnityEngine;
using System.Collections;

public class PauseMenuScript : MonoBehaviour {
 
 //refrence for the pause menu panel in the hierarchy
 public GameObject pauseMenuPanel;
 //animator reference
 private Animator anim;
 //variable for checking if the game is paused 
 private bool isPaused = false;
 // Use this for initialization
 void Start () {
  //unpause the game on start
  Time.timeScale = 1;
  //get the animator component
  anim = pauseMenuPanel.GetComponent<Animator>();
  //disable it on start to stop it from playing the default animation
  anim.enabled = false;
 }
 
 // Update is called once per frame
 public void Update () {
  //pause the game on escape key press and when the game is not already paused
  if(Input.GetKeyUp(KeyCode.Escape) && !isPaused){
   PauseGame();
  }
  //unpause the game if its paused and the escape key is pressed
  else if(Input.GetKeyUp(KeyCode.Escape) && isPaused){
   UnpauseGame();
  }
 }
 
 //function to pause the game
 public void PauseGame(){
  //enable the animator component
  anim.enabled = true;
  //play the Slidein animation
  anim.Play("PauseMenuSlideIn");
  //set the isPaused flag to true to indicate that the game is paused
  isPaused = true;
  //freeze the timescale
  Time.timeScale = 0;
 }
 //function to unpause the game
 public void UnpauseGame(){
  //set the isPaused flag to false to indicate that the game is not paused
  isPaused = false;
  //play the SlideOut animation
  anim.Play("PauseMenuSlideOut");
  //set back the time scale to normal time scale
  Time.timeScale = 1;
 }
 
}

The above code is quite simple and super commented and it should be easy to understand what's in it.
Comment below if you need any sort of explanation on it.

Save the script and return to Unity.You would notice that the script attached to Main Camera is expecting the Pause Menu Panel field to be referred to by the Panel in the Hierarchy. Drag and drop the PauseMenuPanel in this field.

Pause Menu Script
12. We would also want the PauseMenuPanel to slide out when we press the Resume button, to make this possible we will call the UnpauseGame function from the Resume button OnClick event.
To do this click on the + sign, while the Resume button is selected in the Hierarchy, below the On Click() of the Button (Script). Drag and drop the Main Camera into the Object field. Select the PauseMenuScript and UnpauseGame function.

On Click Event - Unity 4.6
On Click Event

13. You can also add a Pause Button on your game scene, on clicking which the Pause Menu slides into the scene. And you should call the PauseGame function of the PauseMenuScript to get this working.
Add a Button inside the Canvas and outside the PauseMenuPanel as we do not need this to slide in, and place it any of the corners you would wish to.
In the Hierarchy, make sure the Pause button is placed above the PauseMenuPanel. We do this to hide the Pause button once the PauseMenuPanel slides in.

Pause Menu Button - Unity 4.6 GUI
Pause Button
Add the PauseGame function to the  On Click event of this Pause Button.

Pause Button On Click Event - Unity 4.6
Pause Button On Click Event

Once you do this you are done with all the things you got to do for preparing a sliding pause menu.
Click the play button and test your pause menu by pressing Escape key. You will notice that the menu slides in and on pressing the escape key again / on pressing the Resume button, it slides out. And there you have, a fully functioning Sliding Pause Menu for your game.

See you around

Also check out,
Unity 4.6 GUI - Create A Dynamic Menu With The New UI
Unity 4.6 GUI - Create A Health Bar HUD
Unity 4.6 GUI - Create A Level Select Scroll Menu
Unity 4.6 GUI - Create An Animated Menu
Unity 4.6 GUI - Create A Level Lock/Unlock System
Share on Google+

About Sujit Horakeri

Sujit Horakeri is a game freak just like any other next door guy you would come across. He is a Web Developer by Profession, Game Developer by Choice.
Connect with him on:
    Blogger
    Facebook

16 comments:

  1. Ah i thought you were going to show the 3 star rating system!

    ReplyDelete
    Replies
    1. Well, this was written some time back so posted this first. Yet to write the post on 3 star rating system. We will post it soon.. Maybe as early as this weekend..

      Delete
  2. how to create mobile Input:
    if(Input.GetKeyUp(KeyCode.Escape) && !isPaused){
    PauseGame();

    Please write code...

    ReplyDelete
  3. Great post! Can I make a youtube video version of this tutorial and make a link back to this page?

    ReplyDelete
  4. How to remove entry in Animator?

    ReplyDelete
  5. Thanks for the post. I'm a bit of a newbie to Unity but how do you get the 'Quit' button to exit the application? I have tried elsewhere but none of the scripts seem to work.

    ReplyDelete
  6. I get an exception "Invalid Layer Index" at anim.Play("PauseMenuSlideOut"); @SujitHorakeri.. any specific reason.

    Also This Exception
    Animator.GotoState: State could not be found
    UnityEngine.Animator:Play(String)

    ReplyDelete
  7. For future folks who visit the page, instead of the second line -

    using span id="IL_AD1" class="IL_AD" System span.Collections;

    it will simply be -


    using System.Collections;

    Cheers!!

    ReplyDelete
  8. Thank you - best explanation I've found!

    ReplyDelete
  9. Thanks for this simple tutorial, I tried it and found a couple of issues:

    1. The update calls to "isPaused" seem to put the pause/unpause function into a continuous loop.
    2. The "Time.timescale = 0" line in the pause function stops the animation of the menu.

    running this in Unity 5.4

    ReplyDelete
  10. dude, gifs for a tutorial? :((((((((((

    ReplyDelete