User Interface in Unity-Username & Password

Creating an Onboarding System

In this section, we’ll be creating the ability for someone to create a username and password as part of an onboarding system. For this example, it will only be created to accept one user.

Please note that this small project is not a suitable example for creating a large-scale system to accommodate millions of users. Instead, it serves as an illustration for scenarios like naming a character in a single-player game, offering players the option to personalize their experience.

To put our scene together, we’ll create two Empty Objects that will hold our Input Fields for the Creation of the user account and the login of an account that has already been created.

On the Password Input Field, we’ll adjust the Input Field Settings Content Type and set it to “Password.”

From here, we can duplicate all of our Input Fields and our Buttons and place them into the Login Empty Object. For the time being, we can also disable the Create Empty Object so that we can work on the login screen. Be sure to rename the duplicated buttons and Input Fields so that we don’t run into any issues later.

Let’s create a new script to define the behavior of the Onboarding screen. Be sure to add the UnityEngine.UI library to the script.

In a case where you would be making a User Interface that has hundreds of buttons, you probably wouldn’t want to make a variable for each individual button so let’s take a more modular route and create an array to define the Input Fields as well as the Buttons.

We created Empty Objects to act as containers for the Create Account and the Login Account Onboarding screens so let’s add some GameObject variables to access them.

We’ve also added a debug text object to inform the user if they’ve succeeded or failed in the onboarding process. Since that will change depending on the outcome, we’ll access that as a text variable.

There are also a couple of strings involved to represent the username and password.

Let’s fill in the blanks in the Inspector for all of our SerializeField variables.

Let’s begin by creating some logic to show which menu will be open, the Login menu or the Create Account Menu. Typically, in the onboarding process, the first menu to show would be the Login Menu then you would be given the option to create an account if you are not already a member.

What we are trying to accomplish at the moment would be to set one menu active while the other is inactive. To do this, we’ll create separate methods so that we can call on them whenever we need to.

The Login Menu and the Create Account menu have different buttons. On the Login Menu, I have the button saying “Create Account.” On the Create Account Menu, it says cancel. Using the On Clocik Unity Event through the Inspector, we can set these buttons to call on the methods we just created.

Let’s add the debug text to the Start() method and set it to display nothing by default.

Let’s begin working on the Input Fields. We’ll start with the Username Input Field. Let’s create a new Method to create an account.

The username and password will have to work in unison with the assigned number that can be found in the Inspector within the array. In my case, the username is set to 0 and the password is set to 1. Once both Input fields have received input from the user, the debug text will display a message, We’ll add a Debug.Log to show what the user has input, and then we’ll open the Login Menu.

With the CreateAccount() method created, all we have to do now is to call on it through the Inspector.

At this point, things are working, however, the user could put in a blank field as well because we never defined what exactly needs to be placed within the Input Field.

Let’s add some logic that states that the username and password must be at least 4 characters long. If the user does not fulfill the requirements, then we’ll impose on them a message that states their error and reset the Input fields to be blank.

That just about completes the Create Account section, now we can move on to the Login section.

We’ll begin by creating a new method for how the user will log in to the account. We’ll assign the login button to connect to this method and say that if the username and password match the corresponding Input Fields, then the user has successfully logged in. If the username and password are blank, then it will state that there is no account.

If the username and password are null, then the program will state that there is no account.

If the Input Fields are not equal to the username and password, state that there is an error

Our Onboarding system should now be properly working. The process can be a bit intense but this is a good exercise to develop a better understanding of how Unity’s User Interface can work along with Input Fields to generate a practical application like Onboarding.

See you next time!