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

The input field

We want the player to be able to change his nickname. We can use an Input Field widget to create a nickname box.

Before we continue, let's prepare a container box for our input field:

  1. Select our UI Root | Options GameObject.
  2. Create a new child, empty GameObject with Alt + Shift + N.
  3. Rename this new empty GameObject to Nickname.

Now that we have our Nickname holder GameObject, we can add (and configure) the UISprite component to it to create the nickname box background:

Select our UI Root | Options | Nickname 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.

We now have the UISprite component on our Nickname. Configure it as follows:

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

Ok, we have our background sprite. Let's add a title to this language selection box:

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

Good. We are ready to create our first input field.

Creating the input field

Drag the Simple Input Field (1) shown in the following screenshot from our Prefab Toolbar inside our new Nickname GameObject in the Hierarchy view:

Creating the input field

A new input field appears on the scene. Hit Unity's play button and click on the field. You can now enter text and validate it with the Enter key:

Creating the input field

You may notice in the preceding screenshot that the input field is composed of three elements:

  1. Control – Simple Input Field: Main element, with these three components:
    • UISprite: This displays the input field's background sprite
    • UIInput: This handles the input field's behavior and parameters
    • Box Collider: This is used to detect mouse and touch interactions
  2. Label: This is UILabel, which displays the input text.
  3. NGUI Snapshot Point 30: This is used by the Prefab Toolbar icon. Ignore.

Ok. Now, let's talk about the input field's available parameters.

Parameters of UIInput

Select our Control – Simple Input Field. UIInput has 16 parameters, as shown in the following screenshot:

Parameters of UIInput

The parameters are as follows:

  1. Label: Drag the label you want to be editable here.
  2. Starting Value: This is the default value on play.
  3. Saved As: Save the value as PlayerPrefs.
  4. Active Text Color: This is the color of the text while it is being edited.
  5. Inactive Color: This is the color of the text when the input is not selected.
  6. Caret Color: Set the color tint for the text cursor.
  7. Selection Color: Select the selected text's background color.
  8. Input Type: Select one of three different input text behaviors:
    • Standard: The input text is displayed, with the auto-correction system disabled on mobile platforms
    • AutoCorrect: The input text is displayed, with the auto-correction system enabled on mobile platforms
    • Password: The input text is replaced by * characters; auto-correction is disabled on mobile platforms
  9. Validation: Select a type of validation, limiting the text to certain characters:
    • None: No validation—any character can be entered
    • Integer: Only whole numbers (no decimals)
    • Float: Whole and floating point numbers (with decimals)
    • Alphanumeric: Letters of the alphabet and numbers from 0 to 9
    • Username: Alphanumeric, but only in lowercase
    • Name: Letters of the alphabet only, with the first letter in uppercase
  10. Mobile Keyboard: Choose one of these mobile keyboards:
    • Default: The operating system's default keyboard.
    • ASCIICapable: All-ASCII-character keyboard (default).
    • NumbersAndPunctuation: Only numbers and punctuation.
    • URL: Adapted to enter URLs—with .com buttons, for example.
    • NumberPad: Adapted for entering integers.
    • PhonePad: Shows the keyboard displayed during phone calls. It is like the NumberPad, but with #, *, and other characters. This one is good for entering float numbers.
    • NamePhonePad: Adapted to enter names and phone numbers.
    • EmailAdress: Keyboard adapted to enter e-mail addresses.
  11. Hide Input: Hides the mobile OS's input box field while typing. It also avoids the need to have a full-screen keyboard in landscape mode.
  12. On Enter Key: This defines what happens when the Enter key is pressed:
    • Submit: The Enter key upon being pressed will trigger the OnSubmit event
    • NewLine: The Enter key upon being pressed will not submit, but will create a new line
  13. Select On Tab: Drag the GameObject to be selected when Tab is pressed.
  14. Character Limit: Enter the maximum number of characters for this input.
  15. On Submit: This lets you choose a method to call when the input field is validated (by default, Enter). Right now, the input field notifies itself and calls the RemoveFocus() method to deselect the input.
  16. On Change: This lets you choose a method to call each time a character changes within the input field.

Note

The Simple Text Box in the Prefab Toolbar is just like the Simple Input Field we just created, except that it is designed to display multiple lines of text.

Now that we have seen UIInput's parameters, we can create a nickname box.

The nickname box

We can now create this nickname box for the player to enter his/her name for the game, as shown in the following screenshot:

The nickname box

The nickname box from the preceding screenshot is composed of three main elements:

  1. The whole box's background—it's a UISprite attached to the container.
  2. The selection box's title—it's a UILabel displaying the word Nickname.
  3. The input field to enter your name—it uses the UIInput component.

We already have the first two elements: the background and title. We only have to configure our input field (3), and our nickname box will be ready.

The input field

Select our Nickname | Control – Simple Input Field GameObject, and follow these steps:

  1. Rename the GameObject to Input.
  2. Set its Transform position to {-225, 10, 0}.
  3. For its attached UISprite component:
    • Set Color Tint to {R: 255, G: 200, B: 120, A: 255}
    • Change its widget's Size to 450 x 120
  4. For its attached UIInput component:
    • In the Starting Value field, type in Player
    • In the Saved As field, type in PlayerName
    • Set Active Text Color to {R: 255, G: 200, B: 120, A: 255}
    • Set Character Limit to 14

Ok, the input is configured to display Player by default and to save the entered name as the PlayerName value in PlayerPrefs. Now, let's change the input's label to display text larger than the default font size:

  1. Select our Input's child Label GameObject.
    • Rename it to Value
    • Change its Text parameter to Player
    • Change Font Size to 50
    • Since our Alignment is set to Automatic, the pivot point ((0, 0) coordinate position for the widget) defines the text's alignment. Center the Pivot to center the text vertically and horizontally, as shown in the following screenshot:
    The input field

Good! We now have an input field for our player to enter his name. Your Game and Hierarchy views for the Options page should look like this:

The input field

Now, let's see how we can create a checkbox to enable or disable sound for the game.

上一章目录下一章