Slider

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:

  1. With our Options | Sound GameObject selected, hit Ctrl + D to duplicate it:
    • Rename our new duplicate to Volume
    • Set its Transform position to {550, -220, 0}
  2. Select the Volume | Label GameObject:
    • Change Text to Volume
  3. Now, select our Volume | Checkbox GameObject and delete it.

We are now ready to create our first slider.

Creating the 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:

Creating the slider

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:

Creating the slider

The checkbox shown in the preceding screenshot is composed of four elements (ignoring the NGUI snapshot):

  1. Control – Colored Slider: This is the main element; it has these five components:
    • UISprite: This displays the slider's background (1)
    • UISlider: This handles the slider behavior and its parameters
    • Box Collider: This is used to detect mouse and touch interactions
    • UIButton: This is used to add hover/pressed color effects on the slider
    • UISlider Colors: This changes color depending on the amount
  2. Foreground: This is UISprite, which displays the slider's full sprite.
  3. Label: This is UILabel, which displays the fill percentage.
  4. Thumb: This is UISprite, which displays the draggable rectangle.

Ok. Now, let's review the slider's parameters.

The parameters of UISlider

Select Control – Colored Slider. Its attached UISlider has five parameters, shown in the following screenshot:

The parameters of UISlider

The parameters are as follows:

  1. Value: The slider's value between 0 and 1, where 0 is empty and 1 is full.
  2. Alpha: You can change the slider's alpha value between 0 and 1.
  3. Steps: The number of steps to completely fill or empty the slider.
  4. Appearance: You can drag the UISprite objects you want to assign as Foreground, Background and Thumb here. You can also choose the fill Direction for the slider: LeftToRight, RightToLeft, TopToBottom, or BottomToTop.
  5. On Value Change: This enables you to choose a method to call within another script each time the slider's value is changed. By default, it is set to update the child label's current percentage value.

Note

The Simple Horizontal Slider in the Prefab Toolbar is just like the Colored Slider, except that it has no color changing or percentage display.

Now that we have seen UISlider's parameters, we can create our volume sliders.

Volume adjustment

We can now create these two sliders to adjust the sound effects and music volumes, shown in the following screenshot:

Volume adjustment

The volume adjustment box shown in the preceding screenshot is composed of four main elements:

  1. The volume box's background: This is UISprite; it is attached to the container.
  2. The box's title: This is a UILabel displaying the word Volume.
  3. The sound effects volume slider: This uses the UISlider component.
  4. The music slider: This uses the SFX slider just like the UISlider component.

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).

The SFX slider

Select our Control - Colored Slider GameObject of Volume and rename it to SFX.

Now, follow these steps:

  1. Set its Transform position to {0, -10, 0}.
  2. For its attached UISprite component, change Size to 400 x 60.
  3. For its attached UISlider component, set Value to 1.
  4. For the UISlider Colors component, set the Colors array Size to 2.
  5. Set the Colors array to:
    • Element 0: {R: 255, G: 240, B: 200, A: 255}
    • Element 1: {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:

  1. Select our SFX | Thumb GameObject:
    • Set widget Size to 70 x 70
    • Change Color Tint to {R: 230, G: 150, B: 50, A: 255}
  2. Select our SFX | Label GameObject:
    • Rename it to Value
    • Change Font Size to 40
    • Change Color Tint to {R: 255, G: 200, B: 150, A: 255}
    • Set its Transform position to {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:

  1. Set Center to {15, 0, 0}.
  2. Set Size to {430, 60, 0}.

Ok, now, let's add the SFX label inside the slider:

  1. Select our Volume | SFX | Value GameObject and duplicate it by pressing Ctrl + D.
  2. Rename this new duplicate to Label.
  3. Set the Transform position to {-155, 0, 0}.
  4. Change Text to SFX.

Good. Your volume adjustment box should look like this, with the following hierarchy:

The SFX slider

We can now move on to create our second slider to adjust the game's music volume.

The music slider

Let's use our SFX slider as a base for the new Music slider:

  1. Select our Volume | SFX GameObject and duplicate it by pressing Ctrl + D.
  2. Rename this new duplicate to Music.
  3. Set its Transform position to {0, -95, 0}.
  4. Select the Music | Label GameObject, and change Text to Music.

Great! We now have both an SFX slider and a Music slider!

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

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