Unity UI: Pin Number Verification
Intro
In this article, we are going to cover how to compare and check if two inputs are the same in creating a PIN verification program.
UI Setup
The UI setup will require an Input Field that will allow the user to create a PIN number. The Content Type will be PIN, which will only allow numbers and will not display them, but instead an asterisk.
We are going to set the limit of numbers to 4. I give an overview of Input Fields in my previous article below.
For the Placeholder Text we will tell the user to “Create A Pin”
Next, we will create another Input Field that will have the user enter the PIN number they have created.
For the Placeholder Text, we will tell the user to “Enter A Pin”.
We are going to create script and will use the Unity Engine UI and Text Mesh Pro namespaces/libraries. This will give us access to the the UI elements in our code.
We are going to serialize 3 variables. Two Input Field types and one Text type.
Assign these objects to the script in the Inspector.
Script
When the user creates their PIN number and enters their PIN number, we will need to store both those entries so they can be compared. We will store these entries in int variables.
In the Start, we are going to set the text to be empty.
Once the user has entered their PIN, we need to call a method that will check if the PIN is long enough.
On the Create Pin Input Field, we assign the UI Manager with the script attached and call the method.
If the the text length of the create pin is less than 4, it is not long enough (max is 4). We will set the text to display an error message and reset the Create Pin Input Field text to empty.
If the Create Pin text length is 4 numbers long, we store the text to the _pinNumber variable. Since the numbers are a text type variable, we need to convert it to an int type. This can be done using an int.Parse.
Next, we can log the pin number into the console to see if it was correctly stored. Then turn off the Create Pin Input Field and turn on the Enter Pin Input Field. Lastly, reset the text to an empty string.
Now the PIN has been created, we need to create a method to be called when the user enters the PIN number and see if it is the same as the one that was created.
On the Enter Pin Input Field, assign the UI Manager that has the script attached to it and call the method.
We store the Enter Pin Input Field text into the variable and convert it to the int type using the int parse. If the enter pin is the same as the created pin, we set the text to show the pin was created entered.
If it is not, we have the text display it is not correct and reset the Enter Pin Input Field to empty.
This simple shows how to compare user inputs to a desired value and display outputs to show if it was correctly done or not.
