Today, we will have a look at input fields. These fields can be extremely useful in your game for a wide range of applications, including: saving user’s name, or asking the user the question and recording the answer. This tutorial will be very short and to the point and should only require 7-10 minutes of your time. So ready, set…

Pr-requisites

To start this tutorial you will need the following:

Be comfortable with Unity’s interface

Know how to create a script

Know how to code basic code in C#

Adding the Input Field

• Please create a new scene (File > new Scene)
• You can switch to the 2D mode for now, if you wish using the 2D button located in the top left window.

• Create a new Input Field (GameObject | UI | Input Field)
• This should create a new Canvas object as wells as a new object called Input Field; within this object, you will also see two objects called Placeholder and Text, as described in the next figure.

Play your scene: you should be able to see the field as described in the next figure.

At this stage we can type text in this field; however, we need to find a way to store this information when the user presses the “Enter” key or another button of our choice

Detecting when the user presses Enter and storing the field value

So, to be able to check whether the user has validated its entry (e.g., by pressing the “Enter” key), we will create a script that detects when this happens; this script will store the value that has been entered in the field.

• Please create a new C# script
• Name this script DetectText for example (or any other name of your choice)
• Add this script to the object InputField
• Open this script to edit it
• In the start function, please add the following code

gameObject.GetComponent<InputField>().onEndEdit.AddListener(displayText);

In the previous code, we do the following:

• We access the InputFieldComponent for the object linked to this script (i.e., InputField)
• We then use the event onEndEdit, which means that we will be tracking when the user has finished editing his/her text.
• When this happens, we will call a function called displayText (that we yet have to create)
• So to summarize, we create an event listener for the event onEndEdit that will be linked to the function displayText. So this function will “handle” the event.

Last, we just need to create this function:

• Please add the following code within the class DetectText

private void displayText(string textInField)
{
print(textInField);
}

• Please save your code.

You can now text the scene by doing the following:

• Play the scene
• Enter text in the text field
• Press the “Enter” key
• Look at the Inspector and see whether the text is displayed there

Using a button to validate entries

At this stage, we can save the text entered in the field; however, we could add a button that the player needs to press in order to save the text and proceed to the rest if the game. So we can do this simply as follows:

Please create a new Button (GameObject | UI | Button); this should create a new object called Button as well as an object called text within, as described on the next figure.

You may notice that this button includes a script called Button; and this component includes a section called onClik() which is used to specify what should happen when the user clicks on this button;

For the time-being, this field is empty; we need to create and add an object to this section that includes all the logic (code) that will be used in case the button is pressed.

So, let’s create this object.

• Please create a new empty object (Game Object | Create Empty)
• Rename this object manageClick (or any other name of your choice)
• Create a new C# script
• Call it SaveName

Add the following method to this class as follows

public void submitName ()
{
string name = GameObject.Find ("InputField").GetComponent<InputField>().text;
print ("Saving "+name);

}

In the previous code:

• We create a new method called submitName
• We create a string called name
• We then access the text that has been typed in the Input Field and save it in the variable name

So at this stage, we have created an object that includes a function (submitName) that could be called when the button is pressed; we just need to link this function to the button

• Please do the following:
• Select the object called Button
• In the Inspector, click on the + button located in the component called Button

• This should create a new empty field called (None Object) as described on the next figure.

• Drag and drop the object
• Drag and drop the object manageClick to this empty field

Once this is done, we just need to specify what function linked to the object that we have just dragged and dropped, should be used in case of a click on the button.

• Click on the drop down list with the label No Function, and then select Save Name | SubmitName

By doing so, we say that in case the button is pressed, the function submitName (available from the file/class SaveName) should be called.

• You can move the button to the location of your choice
• You can also rename its label by accessing the object text located within the object Button, and then amending its text component

Once this is done, you can play the scene and check that after typing text in the text field and pressing the button, a message appears in the Console window, with the text that was entered in the text field.