Learning NGUI for Unity
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

Adding a checkbox

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:

  1. Select our UI Root | Options GameObject.
  2. Create a new child empty GameObject by pressing Alt + Shift + N.
  3. Rename this new empty GameObject to 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:

  1. Click on the Add Component button in the Inspector view.
  2. Type in sprite with your keyboard.
  3. Select NGUI Sprite with your keyboard arrows and hit Enter.

Follow these steps to configure the new UISprite component on our Sound GameObject:

  1. Select the Wooden Atlas for the Atlas parameter.
  2. Change Sprite to Highlight – Thin.
  3. Change the sprite Type parameter to Sliced.
  4. Change its Color Tint parameter to {R: 180, G: 125, B: 50, A: 255}.
  5. Set Size to 460 x 280.
  6. Set its Transform position to {550, 85, 0}.

Good, we have our background sprite. We'll now add a title to this sound toggle box:

  1. Select our Options | Sound GameObject.
  2. Press Alt + Shift + L to create a new child label widget.
  3. Select our new Options | Sound | Label GameObject:
    • Change its Font parameter to Coalition
    • Set Size to 460 x 100
    • Set Font Size to 52
    • Set Color Tint to {R: 255, G: 190, B: 10, A: 255}
    • Change Text to Sound
    • Set its Transform position to {0, 65, 0}

Great. We can now create our first checkbox.

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

Creating the checkbox

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:

Creating the checkbox

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

  1. Control – Colored Checkbox: This is the main element, with these five components:
    • UIWidget: Basic NGUI component used to contain widgets
    • UIToggle: On/off switch used for checkboxes or radio buttons
    • Box Collider: Used to detect mouse and touch interactions
    • UIButton: Used to add hover/pressed color effects on checkbox
    • UIButton Rotation: Used to rotate the background on hover
  2. Background: This is UISprite, which displays the checkbox's empty rectangle.
  3. Checkmark: This is the animated UISprite that displays the actual checkmark.
  4. Label: This is UILabel, which displays the title with Typewriter Effect.

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

Parameters of UIToggle

Select Control – Colored Checkbox. Its attached UIToggle has 5 parameters, as shown in the following screenshot:

Parameters of UIToggle
  1. Group: All UIToggle components within the same group ID act as radio buttons; only one of them can be checked at one time.
  2. State of 'None': Accessible when a Group is defined (other than 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.
  3. Starting State: This is the default state at runtime.
  4. State Transition: Here, your can set which 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.
  5. On Value Change: This lets you choose methods to call each time UIToggle changes state.

Note

Simple Checkbox in the Prefab Toolbar is just like Colored Checkbox, except that it has no rotation animation or typewriter effect.

Now that we have seen the parameters of UIToggle, we can create a sound toggle.

The sound toggle box

We can now create this sound toggle to switch the game's sound on or off:

The sound toggle box

The sound toggle box in the preceding screenshot is composed of three main elements:

  1. The sound box's background: This is UISprite, which is attached to the container.
  2. The box's title: This is UILabel, which displays the word Sound.
  3. The checkbox element: This has the UIToggle component attached.

We already have the first two elements: the background and title. We only have to configure our checkbox (3).

The checkbox

Select our Control - Colored Checkbox GameObject of Sound, and rename it Checkbox. Now, follow these steps:

  1. Set its Transform position parameter to {-200, -50, 0}.
  2. For its attached UIWidget component:
    • Change Size to 400 x 120
  3. For its attached UIButton component:
    • Set the Normal color to {R: 255, G: 200, B: 120, A: 255}
    • Set the Hover color to {R: 255, G: 230, B: 200, A: 255}
    • Set the Pressed color to {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:

  1. Select our Checkbox | Background GameObject.
  2. Set its widget Size to 120 x 120.
  3. Change its Transform position to {60, 0, 0}.

Good. Let's do the same for our checkmark icon:

  1. Select our Checkbox | Checkmark GameObject.
  2. Set Color Tint to {R: 255, G: 200, B: 120, A: 255}.
  3. Set widget Size to 120 x 120.
  4. Change its Transform position to {60, -8, 0}.

The checkbox looks good, but its associated label is neither positioned nor sized correctly:

The checkbox

Let's take care of this label. Select our Checkbox | Label child GameObject, and then:

  1. Set its Font parameter to Arimo20.
  2. Change Font Size to 50.
  3. Change Text to Enabled.
  4. Set Color Tint to {R: 255, G: 200, B: 120, A: 255}.
  5. Set widget Size to 250 x 120.

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:

The checkbox
  1. Click on Unified to open the anchor Type selection.
  2. Click on None to disable Anchors for this widget.

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:

The checkbox

Now, let's see how we can create sliders to adjust the game's different volume levels.

上一章目录下一章