The player can now enable or disable sound. It would be even better if they could adjust the game's music and sound effect volumes separately. We can do that!
Before we continue, we'll use the sound toggle box we just created to build a new container box for our future sliders:
Options
| Sound
GameObject selected, hit Ctrl + D to duplicate it:Volume
{550, -220, 0}
Volume
| Label
GameObject:Volume
Volume
| Checkbox
GameObject and delete it.We are now ready to create our first slider.
Drag the
Colored Scrollbar (1) from our Prefab Toolbar inside our new Volume
GameObject in the Hierarchy view, as shown in the following screenshot:
A new slider appears on the scene. Hit Unity's play button. The slider's thumb can be dragged along the horizontal axis. You may also click anywhere on the slider to jump to the pointed position. The current amount is displayed as a percentage next to the slider and the color changes depending on its value, as shown in the following screenshot:
The checkbox shown in the preceding screenshot is composed of four elements (ignoring the NGUI snapshot):
UISprite
: This displays the slider's background (1)UISlider
: This handles the slider behavior and its parametersBox Collider
: This is used to detect mouse and touch interactionsUIButton
: This is used to add hover/pressed color effects on the sliderUISlider Colors
: This changes color depending on the amountUISprite
, which displays the slider's full sprite.UILabel
, which displays the fill percentage.UISprite
, which displays the draggable rectangle.Ok. Now, let's review the slider's parameters.
Select Control – Colored Slider. Its attached UISlider has five parameters, shown in the following screenshot:
The parameters are as follows:
0
and 1
, where 0
is empty and 1
is full.0
and 1
.LeftToRight
, RightToLeft
, TopToBottom
, or BottomToTop
.Now that we have seen UISlider
's parameters, we can create our volume sliders.
We can now create these two sliders to adjust the sound effects and music volumes, shown in the following screenshot:
The volume adjustment box shown in the preceding screenshot is composed of four main elements:
We already have the first two elements: the background and the title. We only have to configure our SFX slider (3) and duplicate it to have our music slider (4).
Select our
Control - Colored Slider
GameObject of Volume
and rename it to SFX
.
Now, follow these steps:
{0, -10, 0}
.UISprite
component, change Size to 400 x 60.UISlider
component, set Value to 1
.UISlider
Colors
component, set the Colors array Size to 2
.{R: 255, G: 240, B: 200, A: 255}
{R: 255, G: 160, B: 30, A: 255}
Good. Our slider now has a more manageable size and better-looking colors.
The thumb size is too small compared to the slider itself. Let's make it larger and configure the percentage label while we're at it:
SFX
| Thumb
GameObject:{R: 230, G: 150, B: 50, A: 255}
SFX
| Label
GameObject:Value
40
{R: 255, G: 200, B: 150, A: 255}
{55, 0, 0}
We have enlarged the slider's thumb. We need to adjust the slider's Box Collider
accordingly.
Select our Volume
| SFX
GameObject and for the attached Box Collider
:
{15, 0, 0}
.{430, 60, 0}
.Ok, now, let's add the SFX
label inside the slider:
Volume
| SFX
| Value
GameObject and duplicate it by pressing Ctrl + D.Label
.{-155, 0, 0}
.SFX
.Good. Your volume adjustment box should look like this, with the following hierarchy:
We can now move on to create our second slider to adjust the game's music volume.
Let's use our SFX
slider as a base for the new Music
slider:
Volume
| SFX
GameObject and duplicate it by pressing Ctrl + D.Music
.{0, -95, 0}
.Music
| Label
GameObject, and change Text to Music
.Great! We now have both an SFX
slider and a Music
slider!
18.227.190.211