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:
UI Root
| Options
GameObject.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:
sprite
with your keyboard.We now have the UISprite
component on our Nickname
. Configure it as follows:
{R: 180, G: 125, B: 50, A: 255}
.{0, 85, 0}
.Ok, we have our background sprite. Let's add a title to this language selection box:
Options
| Nickname
GameObject.Options
| Nickname
| Label
GameObject:52
{R: 255, G: 190, B: 10, A: 255}
Nickname
{0, 65, 0}
Good. We are ready to create our first 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:
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:
You may notice in the preceding screenshot that the input field is composed of three elements:
UISprite
: This displays the input field's background spriteUIInput
: This handles the input field's behavior and parametersBox Collider
: This is used to detect mouse and touch interactionsUILabel
, which displays the input text.Ok. Now, let's talk about the input field's available parameters.
Select our Control – Simple Input Field. UIInput has 16 parameters, as shown in the following screenshot:
The parameters are as follows:
PlayerPrefs
.Standard
: The input text is displayed, with the auto-correction system disabled on mobile platformsAutoCorrect
: The input text is displayed, with the auto-correction system enabled on mobile platformsPassword
: The input text is replaced by *
characters; auto-correction is disabled on mobile platformsNone
: No validation—any character can be enteredInteger
: Only whole numbers (no decimals)Float
: Whole and floating point numbers (with decimals)Alphanumeric
: Letters of the alphabet and numbers from 0 to 9Username
: Alphanumeric, but only in lowercaseName
: Letters of the alphabet only, with the first letter in uppercaseDefault
: 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.Submit
: The Enter key upon being pressed will trigger the OnSubmit
eventNewLine
: The Enter key upon being pressed will not submit, but will create a new lineRemoveFocus()
method to deselect the input.Now that we have seen UIInput
's parameters, we can create a 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 from the preceding screenshot is composed of three main elements:
UISprite
attached to the container.UILabel
displaying the word Nickname.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.
Select our Nickname
| Control – Simple Input Field
GameObject, and follow these steps:
Input
.UISprite
component:{R: 255, G: 200, B: 120, A: 255}
UIInput
component:Player
PlayerName
{R: 255, G: 200, B: 120, A: 255}
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:
Input
's child Label
GameObject.Value
Player
50
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:
Now, let's see how we can create a checkbox to enable or disable sound for the game.
3.16.212.217