It would be great to add a checkbox to enable or disable sound for the game. Before we continue, let's prepare a container box for our future checkbox:
UI Root
| Options
GameObject.Sound
.We'll add the UISprite
component to our new Sound
holder GameObject to create the sound toggle's box background.
Select our UI Root
| Options
| Sound
GameObject:
sprite
with your keyboard.Follow these steps to configure the new UISprite
component on our Sound
GameObject:
{R: 180, G: 125, B: 50, A: 255}
.{550, 85, 0}
.Good, we have our background sprite. We'll now add a title to this sound toggle box:
Options
| Sound
GameObject.Options
| Sound
| Label
GameObject:52
{R: 255, G: 190, B: 10, A: 255}
Sound
{0, 65, 0}
Great. We can now create our first checkbox.
Drag the
Colored Checkbox (1) from our Prefab Toolbar inside our new Sound
GameObject in the Hierarchy view, as shown in the following screenshot:
A new checkbox appears on the scene. Hit Unity's play button. The checkbox's title appears gradually with a typewriter effect. The checkbox can be checked or unchecked, with a nice rotation transition animation and fading in/out of the checkmark. Here's how the new checkbox looks:
The checkbox in the preceding screenshot is composed of four elements (ignoring the NGUI snapshot):
UIWidget
: Basic NGUI component used to contain widgetsUIToggle
: On/off switch used for checkboxes or radio buttonsBox Collider
: Used to detect mouse and touch interactionsUIButton
: Used to add hover/pressed color effects on checkboxUIButton Rotation
: Used to rotate the background on hoverUISprite
, which displays the checkbox's empty rectangle.UISprite
that displays the actual checkmark.UILabel
, which displays the title with Typewriter
Effect
.Select Control – Colored Checkbox. Its attached UIToggle has 5 parameters, as shown in the following screenshot:
UIToggle
components within the same group ID act as radio buttons; only one of them can be checked at one time.0
). Enabling this option authorizes you to have none of the UIToggles
selected. Disabling it implies that one of them in the group is always selected.UISprite
holds your checkmark icon and animation. Drag them respectively in the Sprite and Animation fields. You can also choose a Smooth
fade in/out or an Instant
transition.UIToggle
changes state.Now that we have seen the parameters of UIToggle
, we can create a sound toggle.
We can now create this sound toggle to switch the game's sound on or off:
The sound toggle box in the preceding screenshot is composed of three main elements:
UISprite
, which is attached to the container.UILabel
, which displays the word Sound
.UIToggle
component attached.We already have the first two elements: the background and title. We only have to configure our checkbox (3).
Select our Control - Colored Checkbox
GameObject of Sound
, and rename it Checkbox
. Now, follow these steps:
{-200, -50, 0}
.UIWidget
component:UIButton
component:{R: 255, G: 200, B: 120, A: 255}
{R: 255, G: 230, B: 200, A: 255}
{R: 0, G: 0, B: 0, A: 255}
We have set the container widget to the correct size; UIButton
will now change the checkbox's color depending on its state (hover, normal, or pressed).
Let's change the size of the checkbox and the actual checkmark:
Checkbox
| Background
GameObject.{60, 0, 0}
.Good. Let's do the same for our checkmark icon:
Checkbox
| Checkmark
GameObject.{R: 255, G: 200, B: 120, A: 255}
.{60, -8, 0}
.The checkbox looks good, but its associated label is neither positioned nor sized correctly:
Let's take care of this label. Select our Checkbox
| Label
child GameObject, and then:
50
.Enabled
.{R: 255, G: 200, B: 120, A: 255}
.We need to move this label to the right. Currently, this label uses Anchors
to position itself relative to another object. Let's disable them to allow us to place it anywhere.
Select our Checkbox
| Label
GameObject. In the Inspector view, under its attached UILabel
, you will find the Anchors group, as shown in the following screenshot:
Ok, we can now move it anywhere we want. Set its Transform position to {160, 0, 0}
. Great! We now have a sound toggle box. Your Game view should look like this:
Now, let's see how we can create sliders to adjust the game's different volume levels.
3.135.216.75