Text input

Now we will learn how to add a text input to create a nickname box. Perform the following steps to do so:

  1. Select the Panel GameObject and create a new child with Alt + Shift + N. Then rename this new child as Nickname. It will be our nickname box container.
  2. Navigate to NGUI | Open | Widget Wizard.
    1. From the Project view, navigate to NGUI | Examples | Atlases | SciFi.
    2. Drag the SciFi Font – Normal prefab into the Font field.
    3. Select the Input template.
    4. Set Sprite (Dark) as the Background parameter.
  3. With the Nickname GameObject selected, click on the Add To button.

A new widget named Input has been added to the scene.

Parameters

An Input GameObject has been created. Let's look at its Inspector parameters:

  • Input Label: This is the text label that is to be used for this input.
  • Inactive Color: This is the text color while the text is not selected.
  • Active Color: This is the text color while the text is being edited.
  • Default Text: This is either Blank or with the label's default text. Blank will delete the label's text when the Input GameObject is selected.
  • Keyboard Type: This allows the different sets of characters to be authorized. This will also change the keyboard layout on mobile platforms.
  • Select on Tab: Drag into this field the GameObject that you want to be selected when the Tab key is pressed while editing the input.
  • Auto-save Key: This enables the label's text to be automatically saved to the specified PlayerPrefs() key.
  • Max Characters: This is the number of maximum characters allowed. 0 means infinite.
  • Carat Character: This is the end of text character.
  • Password: If you activate this Boolean, the label's characters will be replaced by * on the screen.
  • Auto-correct: This enables or disables autocorrection on mobile platforms.

Creating a nickname box

Let's use this text input to create a nickname box that will look like the following screenshot:

Creating a nickname box

Let's create the nickname box seen in the preceding screenshot. Perform the following steps to do so:

  1. Duplicate the Window GameObject and perform the following steps:
    1. Rename the new duplicate as Background.
    2. Drag it into the Nickname container GameObject.
    3. Enter Depth as 2.
    4. Set Dimensions to 440 x 120.
  2. Select our Input GameObject and perform the following steps:
    1. Reset its Box Collider component's center to {0, 0, 0}.
    2. Type in Nickname for the Auto-save Key parameter.
    3. Enter Max Characters as 25.
  3. Attach a component to it by navigating to NGUI | Attach | Anchor and perform the following steps:
    1. Drag the Background GameObject from Nickname inside the Container field.
    2. Set the Pixel Offset to {0, -17}.
  4. Duplicate the Label child GameObject from Title and perform the following steps:
    1. Drag it inside the Nickname GameObject.
    2. Change its text to [AAFFFF]Nickname.
    3. Drag the Background GameObject from Nickname inside the Container field.
    4. Set the Side parameter to Top.
    5. Set Pixel Offset to {0, -32}.
  5. Select the Background child GameObject from Input and perform the following steps:
    1. Enter Depth as 3.
    2. Set Pivot to Center (middle button + middle button).
    3. Reset the Transform field's position to {0, 0, 0}.
    4. In the Color Tint parameter, change R to 100, G to 230, B to 255, and A to 255.
  6. Select the Label child GameObject from Input and perform the following steps:
    1. Enter Depth as 4.
    2. Set Pivot to Center (middle button + middle button).
    3. Reset the Transform field's position to {0, 0, 0}.
    4. Change the Label GameObject's text to Enter your Name Here.
  7. Select the Nickname container GameObject.
  8. Attach a component to it and navigate to NGUI | Attach | Anchor and perform the following steps:
    1. Drag-and-drop our Window GameObject inside the Container field.
    2. Set the Side parameter to Top.
    3. Set Pixel Offset to {0, -220}.

Ok, we have a Nickname box. Your Hierarchy view should look like the following screenshot:

Creating a nickname box

The user can enter his nickname, up to 25 characters. If you move or change the window's dimensions, our box will move to stay at the same place.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.118.93.175