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

Buttons

Let's fill up this main menu with three buttons: Play, Options, and Exit. First, let's create an empty GameObject that will hold the three buttons:

  1. Select our Main GameObject in the Hierarchy view.
  2. Create a new empty child by pressing Alt + Shift + N.
  3. Rename the new child to Buttons.

Ok. We can now create our first button.

Creating a button

Drag Simple Button (1) from our Prefab Toolbar inside our Buttons GameObject in the Hierarchy view, as shown in the following screenshot:

Creating a button

A new button appears in the Game view, as follows:

Creating a button

Select UI Root | Buttons | Control – Simple Button. Your Hierarchy view should look like this:

Creating a button

As shown in the preceding screenshot, our new button is composed of two GameObjects:

  • Control – Simple Button (1): The main object, with these components attached:
    • UISprite: This renders the button's sprite, set to the Button sprite
    • UIButton: This handles different button states, colors, and events
    • Box Collider: This is required to detect mouse and touch interactions
  • Label (2): This is the GameObject with UILabel to display the button's text

That's how NGUI widgets work; they are composed of one or more GameObjects, each of them with different components attached. If you want to, you can build a button from scratch using the same components on empty GameObjects. There is no button widget; it's an assembly of basic elements.

Click on Unity's play button. You can see that the hover and the press states already work!

Interactive widgets have a Box Collider component attached to them, and that is the case with this button. The collider is used to detect collisions with the cursor. They need to be within both the camera's bounding box and the far and near limits.

Now that we have our first button, we can see what its parameters are.

Note

Since Box Collider is attached to the button, the UISprite component has a new checkbox parameter: Collider auto-adjust to match. It lets you choose if you want the collider resized automatically, depending on the sprite's Size parameter. Leave this option activated for now.

The UIButton parameters

A button has four different states:

  • Normal: This is the button's default state
  • Hover: This is the state when the mouse is over the button
  • Pressed: This is the state while the button is pressed
  • Disabled: This is the state in which the button is non-interactive

The UIButton component lets you configure colors and transitions between these states using the six parameters flagged in the following screenshot:

The UIButton parameters

The parameters are as follows:

  1. Tween Target: Drag the widget you want to be colored on state change here. By default, this field is set to the button itself: it changes the sprite color.
  2. Drag Over: This defines what happens if the player drags another of his widgets over this button:
    • Do Nothing: Nothing happens
    • Press: This button is pressed when a widget is dragged over it
  3. Transition: This is the color tween's duration from one state to another.
  4. Colors: Select an alpha-enabled color for each state:
    • Normal: This is the color tint when nothing is happening
    • Hover: This is the color tint when the user's cursor is over the button
    • Pressed: This is the color tint when the user clicks on the button
    • Disabled: This is the color tint when the button is disabled (it can't be clicked)
  5. Sprites: Define here which sprite should be displayed for each state:
    • Normal: This is the sprite used when nothing is happening
    • Hover: This is the sprite displayed when the cursor is over the button
    • Pressed: This is the sprite displayed when the user clicks on the button
    • Disabled: This is the sprite displayed when the button is disabled (it can't be clicked)
    • Pixel Snap: If you use a Normal sprite (an icon, for example) with this option enabled, it will always be displayed at its original file size, making it pixel-perfect
  6. On Click: This is the parameter that lets you choose a method to call when the button is clicked. You must first drag a GameObject into the Notify (1) field, as seen in the following screenshot. A Method (2) field will then appear, listing the GameObject's attached scripts' public methods (3):
    The UIButton parameters

Ok, now that we have seen the button's parameters, let's transform it into a Play button.

Note

The Control - Colored Button in the Prefab Toolbar is simply a button with different sprites for normal and hover states.

The Play button

Let's turn our simple button into a large Play button. Select our Control – Simple Button, and rename it Play. With our Play button selected, follow these steps:

  1. For the attached UISprite component:
    • Set Size to 700 x 500
  2. For its attached UIButton component:
    • Change the Normal sprite to Highlight – Thin
    • Change the Normal color to {R: 180, G: 255, B: 120, A: 255}
    • Change the Hover color to {R: 100, G: 255, B: 130, A: 255}
    • Change the Pressed color to {R: 0, G: 0, B: 0, A: 255}
  3. Finally, set Transform position to {-400, 50, 0}.

Ok. Now, let's customize the button's label:

  1. Select our UI Root | Main | Buttons | Play | Label child GameObject:
    • Change Font to Coalition
    • Change Font Size to 40
    • Set Text to Play
    • Set Color Tint to {R: 130, G: 255, B: 130, A: 255}

Great, our Play button looks better! It should look like this with a green color tint:

The Play button

Hit Unity's play button. You can see that the sprite's color changes depending on its state. Now, let's create the Options button.

The Options button

In order to rapidly create an Options button, we can simply duplicate our Play button:

  1. Select our Play GameObject and duplicate it by pressing Ctrl + D:
    • Rename this new duplicate to Options
    • Set its Transform position to {400, 50, 0}
  2. For its attached UIButton component:
    • Change the Normal color to {R: 250, G: 255, B: 165, A: 255}
    • Change the Hover color to {R: 220, G: 255, B: 50, A: 255}

Ok. For now our button's label is still green and displays Play. Let's change this:

  1. Select our Options | Label child GameObject:
    • Set Text to Options
    • Set Color Tint to {R: 255, G: 255, B: 155, A: 255}

Ok. Both our Options and Play buttons are created. You should now have a second large, yellow button next to your Play button, like this:

The Options button

Now, let's create an Exit button.

The Exit button

We will also duplicate our Options button to easily create a red Exit button:

  1. Select our Buttons | Options GameObject and duplicate it by pressing Ctrl + D:
    • Rename this new duplicate to Exit
    • Set its Transform position to {0, -320, 0}
  2. For its attached UISprite component:
    • Set Size to 700 x 130
  3. For its attached UIButton component:
    • Change the Normal color to {R: 255, G: 115, B: 115, A: 255}
    • Change the Hover color to {R: 255, G: 65, B: 65, A: 255}

Ok. We can now change our button's label to display Exit in red:

  1. Select our Label child GameObject of Exit:
    • Set Text to Exit
    • Set Color Tint to {R: 255, G: 180, B: 180, A: 255}

All three buttons are created and configured. Your Game view should look like this:

The Exit button

Before we continue creating more complex widgets, let's create our Options window.

上一章目录下一章