Unity UI: Input Fields & Saving Data

Intro

This article we will do an overview of what input fields are, their components and how we can use them to create a simple user name and password input interface.

Input Fields Overview

Input Fields allow users to input keystrokes which can be stored and retrieved in your program. A simple example of this would be the boxes where usernames and passwords are typed into.

You can assign a sprite image to the Input Field, instead of Unity’s default image.

The Input Field has Transition properties for when the user interacts with the Field.

The Text Viewport is the Text Area child object. This viewport allows text longer than the Input Field to continually expand and make the area scrollable.

The Text Component is the Text child object that will store what the user types into the the Input Field.

The Input Field settings allow you to assign a Font that will be displayed when the user types into the field. The Character Limit determines how much text the user can put into the Input Field. When set to 0 it is unlimited, but the reset will be the limit of characters.

The Content Type can determines what type of input the user can put into the Input Field.

The Place Holder is the text that you see in the Input Field before the user put in their text. It usually says what information should be entered into the Input Field.

Lastly, we have the Control Settings. This allows for us to call a method when the user starts to type (On Value Changed) and when the user has enter their information (On End).

Saving Data

We are going to create an Input Field for the name and another for the password. Then we will need a Text that will show both the name and password once entered.

These components will have the same position, so they will be stacked on top of each other.

For the Input Field, we need to change the Placeholder text to say “Enter Name…”.

We are doing the same thing for the Password Input Field, but instead change the Placeholder text to “Enter Password…”.

We are going to access what was put into these Input Fields, so we create a script using the Unity Engine UI or the Text Mesh Pro library (I am using Text Mesh Pro verisons of the UI elements).

Create two Input Field type variables for the name and password Input Field. Another Text type variable for the output text that will display the name and password the user typed in.

The script is attached to some Manager game object (InputField_Manager) and we assign each of these components to their variable slots.

We are going to create to public methods, one for each of the Input Fields. Using PlayerPrefs class, we can save each input in a local file with their corresponding files: “name” & “password”.

Once we have saved the name input and password, we can create another public method for the output text.

This will set the text to the string that is stored in the “name” and “password” folder.

Now we are going to make use of these functions. Deactivate the password Input Field and output Text objects. This will only show the name Input Field.

When the user inputs the text (On End Edit), we are going to store this string input by calling the InputFieldName method from the UserInput script via the InputField Manager object.

We also want to turn on the password Input Field object and turn off the name Input Field object.

For the password Input Field, we are going to store that input text by calling the Input Field Password method via the Input Field Manager that has the script.

We are going to turn off the password Input Field object and turn on the output Text object.

Lastly, we need to display the name and password that were put in, so we call the Output Text method from the script via the Input Field Manager

You may need to adjust the sizing of the Output Text object and you can use Auto Size which will have Unity adjust the size of the font depending on the length and text box size.

Input Fields allow user to input information and for the developer to access this information.

This simple program shows how you can collect the input information and output.