Unity UI: Multi-Digit Pin Pad

Intro

In this article we will cover how to check for a multi-digit string to see if it is correct by creating a pin pad.

Pin Pad Setup

The Pin Pad UI will require a text that will display the pin that is being entered and an authentication text to let the user know if the pin is correct or not.

Also, a number of buttons for the pin pad which the user will use to type in the pin and a clear and enter button.

Script Setup

Multi Digit Pin Pad Script

A script will be created that will handle the logic of displaying the pin number that is being put it, checking if it is correct or not, clearing the pin and entering the pin.

We need access to either UI and/or Text Mesh Pro libraries. My UI components are Text Mesh Pro, so I will be using that library.

We will create a Text type variable that will store the text that will display the pin numbers and messages to the user. It will need to be serialized, so we can assign the Text component to the script in the inspector.

We will also need two string type variables, one being the correct pin number (_secretPin) and the other being the pin that was entered (_enteredPin).

The UI Manager game object has this script attached and from there we can assign the Text component of the Pin Pad.

Pin Number Script

This script doesn’t need access to the UI libraries, but since this is dealing with UI I still like to declare just in case. We need a int type variable that is serialized, so we can assign the pin number to this button.

We will need access to the Mulidigit Pin Pad script, so we can give it the number of the button that was pressed by the user.

For each button, we are going to assign the UI Manager game object that has the Multidigit Pin Pad script to the Pin Number script. For the Button Value input the value of the pin pad number.

Displaying Pin Number

We need to communicate from when the pin button is pressed the number of that pin number button to the Multidigit Pin Pad script, so it can be displayed and added to the enter pin string.

Create a public method (AddDigit) that will take in a string paramenter. This parameter will be the pin number of the button that was pressed. The first thing we do is clear the output or display text, then add the button value of the pin that was pressed to the entered pin and lastly display the entered pin to the output text.

In the Pin Number script, we create a public method that will access the MultiDigit Pin Pad so we can call the AddDigit method we just created. We are going to pass in the button value of the pin button and it will need to be converted to a string since it parameter of the method is a string.

On each of the pin buttons using the On Click method, we assign the same the button so we can call the public method from the Pin Button script that we just created.

Now we can punch in a multi-digit number using the pin buttons.

Clear Button

In the Multidigit Pin Pad script, we will create a public method (Clear) that will be called when the Clear Button is pressed.

When this method is called, we will clear out the _enterPin string and have the output/display text to say “Enter Pin” since it has be cleared.

Now, we the Clear button is pressed the pin number will be reset and erased.

Enter Button

Back into the Multidigit Pin Pad script, we are going to create a Submit/Enter public method to be called when the Enter button is pressed.

If the Enter Pin is the same or equalled to the Secret Pin then we will have the output or display text to say “PIN Accepted” and reset the enter pin, so a new pin can be entered instead of it building on the previous one.

If it is NOT equal, we will display “Invalid PIN” and again clear out the enter pin.

On the Submit Button using the On Click method, we pass in the UI Manager object that has the Multidigit Pin Pad script and call the Submit method we just created.

There you have it. A working multi-digit pin pad.