Now that we have a volume slider, let's add an enable/disable sound checkbox, which will turn down the volume to 0 and hide our volume slider.
First, create a toggle widget as follows:
- Select the Panel GameObject and create a new child with Alt + Shift + N.
- Rename that new child as
Sound. It will be our sound toggle container. - Navigate to NGUI | Open | Widget Wizard and perform the following steps:
- Select Toggle as Template.
- Select the Dark Sprite as Background.
- Select the X Sprite as Checkmark.
- With the Sound container selected, click on the Add To button.
A checkbox with a label has just been created as shown in the following screenshot:
Select our new Toggle GameObject. Let's look at the UIToggle's Inspector parameters:
- Group: This is the toggle's group. Toggles of the same group will act as radio buttons; only one of them can be checked at once.
- Start State: This defines in which state the toggle will be at the start.
- Animation: This is the animation that will play when the checkbox changes state.
- Sprite: This lets us choose the widget to be used as a checkmark; we should use our X sprite here.
- Transition: This is either Smooth or Instant; uses alpha fade in / fade out.
- Notify: This is the GameObject to notify on when toggled. When a GameObject is assigned, you may choose a public method to call on a toggle event.
We have seen the UIToggle's parameters. Now we will create this sound toggle as shown in the following screenshot:
Let's use our recently added Toggle GameObject to create the window shown here. Follow these steps to do so:
- Select both the Background and Label GameObjects from Volume and perform the following steps:
- Duplicate them.
- Drag-and-drop those new duplicates inside our Sound container.
- Select the Background GameObject from Sound and enter its UIAnchor's Pixel Offset parameter as {
-420,43}. - Select the Label GameObject from Sound and change its text to
[AAFFFF]Sound. - Select the Toggle GameObject and check the Start State Boolean in UIToggle.
- Attach a component to it by navigating to NGUI | Attach | Anchor and perform the following steps:
- Drag the Background GameObject from Sound inside the Container field.
- Enter its Pixel Offset parameter as {
-38,-20}.
- Add a component to it by navigating to NGUI | Interaction | Toggled Objects, and drag our Volume container GameObject into the Activate array.
- Select the Background sprite GameObject from Toggle and perform the following steps:
- Enter Depth as
3. - In the Color Tint parameter, change R to
130, G to255, B to130, and A to255.
- Enter Depth as
- Select the Checkmark sprite GameObject from Toggle and perform the following steps:
- Enter Depth as
4. - In the Color Tint parameter, change R to
50, G to255, B to70, and A to255.
- Enter Depth as
- Select the Label GameObject from Toggle and perform the following steps:
- Enter Depth as
3. - Change its text to
[AAFFFF]Enabled. - In the Color Tint parameter, change R to
200, G to255, B to250, and A to255.
- Enter Depth as
Hit the Play button. We have a nice sound box with a sound toggle checkbox that hides/shows the Volume box when needed. But it does not turn off the sound yet.
We need to make some changes to our VolumeManager.cs script to correct this.
First, open our VolumeManager.cs script. We will add a new OnSoundToggle() method that will be called when the toggle changes state. It will set the volume directly to 0, or to the slider's value. Add this new method to VolumeManager.cs as shown in the following code lines:
public void OnSoundToggle()
{
float newVolume = 0;
//If sound toggled ON, set new volume to slider value
if(UIToggle.current.value)
newVolume = slider.value;
//Apply newVolume to volumes
AudioListener.volume = newVolume;
NGUITools.soundVolume = newVolume;
}Ok, the previous method will set both our volumes to 0 or the slider's value, depending on the toggle's state. Let's link it to our sound's toggle by selecting our Toggle GameObject and dragging the Slider GameObject from Volume inside the Notify field in UIToggle, below the On Value Change section. Then, for the Method field, select VolumeManager.OnSoundToggle.
Hit the Play button. That's it. When we click on the Toggle checkbox from Volume, the volume reacts accordingly.
But if we turn the sound off using the toggle and stop running, when we hit Play again, the checkbox is still checked and the volume slider is displayed, but the volume is at 0.
That's because our volume is set to 0, but the checkbox is still checked at start. Let's add a simple line of code that will set the start state to false if the volume is at 0:
- Open our
VolumeManager.csscript. - Declare a new global variable named
public UIToggle soundToggle. - At the end of the
Awake()method, add the following lines of code://If volume is at 0, uncheck the Sound Checkbox if(NGUITools.soundVolume == 0) soundToggle.value = false;
- Save the script and return to Unity.
- Select the Slider GameObject from Volume.
Drag theToggle GameObject from Volume in the volume manager's Sound Toggle field.
Hit the Play button. That's it. If you disable sound using the toggle and exit the Play mode and then launch it again, the checkbox stays unchecked and the volume slider is not displayed. Perfect!