Slider

Now let's add a volume slider for the user to move and select his/her volume level.

A slider template is available, enabling you to adjust parameters easily by sliding a thumb along a bar. Perform the following steps to create a volume slider:

  1. Select the Panel GameObject and create a new child with Alt + Shift + N.
  2. Rename that new child as Volume. It will be our volume settings container.
  3. Navigate to NGUI | Open | Widget Wizard and perform the following steps:
    1. Select the Slider template.
    2. Set the Dark Sprite to Empty.
    3. Set the Light Sprite to Full.
    4. Set Highlight to Thumb.
  4. With the Volume GameObject selected, click on the Add To button.

Parameters

A slider has been created. It has 6 parameters as follows:

  • Value: This is the slider's current value, which is between 0 and 1.
  • Steps: This is the number of steps to completely fill or empty the slider.
  • Direction: This is the slider's fill direction, either Horizontal or Vertical.
  • Foreground: This is the sprite used to fill the slider.
  • Thumb: This is the sprite used for the handle to change the slider's value. By leaving this as null, a simple progress bar will be created (user cannot interact).
  • Notify: This is the GameObject that lets you choose a method to call when there is a change in the slider's value. When a GameObject is assigned, you may choose a method to call on the value change.

Creating a volume slider

We can use this slider to create our volume slider, which will look like the following screenshot:

Creating a volume slider

Proceed with the following steps to create it:

  1. Duplicate the Background GameObject from Nickname and perform the following steps:
    1. Drag the duplicate inside the Volume container GameObject.
    2. Set its Dimensions to 320 x 135.
  2. Attach a component to it by navigating to NGUI | Attach | Anchor and perform the following steps:
    1. Drag our Window GameObject inside the Container field.
    2. Set the Pixel Offset to {-420, -90}.
  3. Duplicate the Label GameObject from Nickname and perform the following steps:
    1. Drag it inside the Volume GameObject.
    2. Drag our Volume's Background GameObject inside the Container field.
    3. Change its text to [AAFFFF]Volume.
  4. Select the Slider GameObject.
  5. Attach a component to it by navigating to NGUI | Attach | Anchor and perform the following steps:
    1. Drag the Background GameObject from Volume inside the Container field.
    2. Set Pixel Offset to {-100, -23}.
  6. Select the Background GameObject from Slider and perform the following steps:
    1. Enter Depth as 3.
    2. In the Color Tint parameter, change R to 80, G to 220, B to 85, and A to 255.
  7. Select the Foreground GameObject from Slider and perform the following steps:
    1. Enter Depth as 4.
    2. In the Color Tint parameter, change R to 95, G to 255, B to 190, and A to 255.
  8. Select the Thumb GameObject from the Slider and perform the following steps:
    1. Enter Depth as 5.
    2. In the Color Tint parameter, change R to 100, G to 255, B to 250, and A to 255.

Ok, we now have a nice volume slider! Your Hierarchy view should look like the following screenshot:

Creating a volume slider

We will now link it to the game's volume with a new script. Let's add some music to our main menu. First, add an audio file of your choice to your Unity project as shown in the following steps:

  1. Select our Main Camera GameObject.
  2. Attach a component to it by navigating to Component | Audio | AudioSource and perform the following steps:
    1. Drag a music file from the Project view to the AudioSource parameter's Audio Clip field.
  3. Select the Slider GameObject from Volume and perform the following steps:
    1. Create and attach a new VolumeManager.cs C# script to it.
    2. Open this new VolumeManager.cs script.

In this new script, we will first need to declare and initialize the necessary variables. Add the following variable declarations and the Awake() method:

//We will need the Slider
UISlider slider;

void Awake ()
{
  //Get the Slider
  slider = GetComponent<UISlider>();
  //Set the Slider's value to last saved volume
  slider.value = NGUITools.soundVolume;
}

Here we initialized the slider's value to NGUITools.soundVolume because this float is persistent and will be saved across scenes—even if you exit the game.

Now let's create an OnVolumeChange() method that will modify our AudioListener method's volume each time the slider's value is changed:

public void OnVolumeChange ()
{
  //Change NGUI's UI Sounds volume
  NGUITools.soundVolume = UISlider.current.value;
  //Change the Game AudioListener's volume
  AudioListener.volume = UISlider.current.value;
}

Ok, the method is ready. We just need to call it each time the slider's value changes. Let's use the UISlider component's Notify field as follows:

  1. Select the Slider GameObject from Volume and perform the following steps:
    1. Drag-and-drop the Slider GameObject from Volume into the Notify field.
    2. For the Method field, select VolumeManager.OnVolumeChange.

Now, each time the slider's value is modified, our method will be called.

You can hit the Play button; the game's volume will change with the slider. The volume is saved even when you exit the game and restart!

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.118.253.223