Unity UI: Pause Menu
Intro
In this article I will cover how to create a pause menu that will stop the game and allow you to adjust the volume and brightness using sliders.
In the scene, we just have a simple cube that continuously rotates to show that when the game is paused and the menu appear, it actually stops the game.
The Pause Menu is an empty game object that holds the music and brightness sliders with their text labels and an exit button.
PAUSE GAME
Create a script and we will serialize a GameObject variable, so we can access the Pause Menu object and a boolean variable to either turn the Pause Menu on or off.
The script is attached a manager empty game object and assign the Pause Menu game object that holds all of the Menu elements to the script.
When the program starts, we set the Pause Menu to inactive since we only want it to be active when the user pauses the game.
Next, a public method will be created to either active the menu or deactivate it. The first line sets the bool to the opposite of its current value. So if the _menuActive is true its now false and vice-a-versa.
If the menu is active, we can pause the movement of game objects in game by setting the time scale to 0. It is IMPORTANT to note that if you want anything to still operate after the time scale has be set to 0, it needs to follow it. Finally, we set the Pause Menu to active.
If the Pause Menu is not active, we have the game resume by setting the time scale to 1 and making the Pause Menu inactive.
We can now call this method whenever an input occurs from the user.
We will also call this method when the Exit Button on the Pause Menu is clicked.
You can see below the cube stops rotating and we can still move the sliders on the menu. When the Pause Menu is closed, the cube resumes rotating.
Music Slider
The Music slider is not actually controlling the music volume. We are going to connect the slider value to the music volume channel.
Create an empty game object that will have an Audio Source component. This will have an audio clip that will play as soon as the game object is activated and will loop.
In the Project folder, create a new Audio Mixer.
Open the Audio Mixer window and create a new group. This group or channel will be in charge of the music volume. Having these different groups all for you to adjust the volume levels of different sounds like sound effects and narrations.
On the Music Audio Source, select the Music channel for the output.
Back in the script, we need access to the UI and Audio libraries. We are going to serialize Slider and AudioMixer type variables.
In the inpsector, assign the Music Slider and Audio Mixer to the script.
Lets adjust the Music Slider min and max values to match those of the mixers.
Now that everything is connect, we are going to create a public method that will set the Audio Mixer channel named “Music” to the Music Slider value.
This doesn’t yet because the channel’s values need to be exposed, so we can access them.
Select the Music group/channel, right-click on Volume in the inspector to Expose the volume of the channel.
In the AudioMixer window we can rename this parameter to match the script’s reference “Music”.
The Music Channel’s volume is now set to the slider’s value.
On the Music Slider, when the Slider Changes we are going to call the Adjust Volume method we just created.
You can see when the Music Slider is adjusted, so does the Music Channels volume.
Brightness Slider
The Brightness Slider can be attached to the post-processing weight to adjust its “Brightness”, but the method below will be a more direct way to control the brightness of the screen.
We are going to create an UI Image component. This will be a child of the Canvas, but not a child of the Pause Menu since.
Stretch the Image to fit the entire Canvas and set the Color to black. Make sure to set Raycast Target false. This means the Image will no longer be able to detect clicks and allow objects behind it to instead.
In the script, we are using the UI library because we are serializing the an Image and Slider type variable for the Image that is overlayed on the screen and the Brightness Slider.
Assign the Overlay Image and Slider to the script in the inspector.
Make sure for the Overlay Image that the Alpha (transparency) is turned down to 0, which will make it completely transparent.
The Alpha value of this Image will be what we connect to the Slider. Create a public method. We cannot directly connect the Overlay’s alpha value to the Slider value.
Instead, we need to create a temporary variable that holder the Overlay’s color. Then, set the temp variable’s Alpha value to the Slider’s value. Finally, set the Overlay color to that adjusted temp variable value.
On the Slider object, call this method and now when the Brightness Slider changes it will change the Alpha value of the Overlay.
