Creating a Settings Menu in 10 minutes
Objective: Creating a Settings Menu in 10 minutes.
Before doing this I will prepare a simple scene where the ball falls down every second and destroys itself. Then I will set the background image with Heading “Pause Menu”
In the first step, I will create two headings and two sliders and position them like this. Then I will add two text to each slider then I will creat one button.
Note: In the slider, I will disable the fill then place the slider background source image and handle the source image with the different source images to make look it pretty.
Create a new script called Pause Menu and attach it to the Canvas.
Create an empty game object called Settings_Menu and drag all components we create in this object.
Open the PauseMenu script and create a bool and GameObject with this name below.
Create a method called PauseMenuBehavior, and check if _isMenuActive true,here I will need to enable the settingMenu and pause the game using Time.timeScale =1. And I will do the opposite of this if _isMenuActive is false and set Time.TimeScale =0 to resume the game.
Create a public method called ActivatePauseBehavior, Here we set our bool to true if it was false and set it to false if it was true. Then we call the PauseMenuBehavior.
Go to Canvas add SettingMenu to the field and disable the SettingMenu in the inspector.
Select the button add an Event and call ActivatePauseBehavior.
Check input if the user presses the Esc button to pause the game, then we call ActivatePauseBehavior.
In this step, we need to create an empty game object, attach audio to it, and make it loop.
In UnityEditor, go to window <Audio <Audio mixer, and create an audio mixer hit the plus button then rename it.
Select the Audio Mixer <Group, hit the plus button then rename that group.
Open the script create a slider variable and Audio Mixer variable, then Create a public method called AdjustVolume.
Note: To be able to access the audio Mixer you need to use UnityEngine.Audio namespace.
Select Audio Mixer then, select BG_Group <Inspector <Volume, right-click, and hit Expose Volume to the script. Go BG_Group <Expose Parameter click the dropdown arrow, and rename the exposed parameter name.
Go to the AdjustVolume method, Here we need to adjust the volume with the slider, which we do by _audioMixer.SetFloat then we pass the exposedParameter name and slider value.
Set the slider_Music to a max value of 20 and a min value of -80, this is according to the audio Mixer setting of GB_Music group.
Select audio Source <Inspector<out Put and choose BG_Group.
In this step Create an Image rename its overlay, and make sure this image is not the parent of Settings Also this needs to be below the other image in order to be rendered on top of everything. But we need to set this transparency channel to zero.
Then Select the OverlayImage then uncheck the Raycast Target. If you forget to uncheck Raycast Target we won't be able to move the slider.
Then create two variables, a slider, and an ImageOverlay handle.
Create a public method called AdjustBrightness, then create a local color variable assigned to the _overlayImage, set localColor transparency to the slider, and lastly set the _overLayImage dot color to localColor.
Last, select the canvas and drag and drop the required variable, then add an event to all sliders and choose the method responsible.
Adjusting volume won't work, can you guess?
Select the Audio Mixer see the Exposed Volume parameter name, and see if matches with the code name in AudioMixer.SetFloat method, I wrote BG_Exposed_Volume but in Audio Mixer is GB_Exposed_Volume so make sure you write this correctly.
This is how I set my Setting Menu for more than 10 minutes, hahaha I spend more than 10, so make sure you make your setting work correctly,dont rush. Otherwise, you will spend an hour finding the bug, but it's simple you misspell the parameter.
See you in the next one.
