Day 181: Built a Multi-Digit PIN Pad in Unity

Jon Short
4 min readApr 10, 2023

--

Objective: Creating a 10 digit pin pad.

This is what I want to make, however, we can start smaller and work our way up. Lets start with 4 buttons: 1, 2, Clear, Enter.

So here I have added 4 buttons, on a background, I then added an empty image for my display, with a text inside for the numbers.

I then created 2 scripts. One for the the PINNumber and one for the Buttons.

above is my ButtonScript script and it has a buttonValue set as a serialized field, as well as the PINNumber script set.

It then says that in the method displayButtonValue() it is going to take the PinNumber (the numbers from the PinNumber script) and run the method AddDigit to the buttonValue, setting it as a string.

I then made the button value for the “1” button to be 1 and added the ButtonManager object to Pin Number so that the Pin number would be added to said script.

NOTE: as you add the different numbers so you have 0–9, you will have to change this button value for each.

In the PIN number script I added the UI libraries, then serialized the textBox and added a private string called _secretPIN setting it to 13795" (however, this will not work with just a 1 and a 2 so set you secretPIN to something like 1212 instead, and change it once you have added all the buttons. This can be changed to whatever pin you want, but this is the correct pin number.

I then added a private string for the _actualPIN (what I am currently entering.)

In start I want the Pin to say Enter PIN so that is what I told the textBox.text to say.

then I created a method that would be able to put the next number in place. it says that I am creating a string of numbers and that the textBox.text will start out empty. It will then take the number that I entered and display that, then the next number, and the next number… Keep in mind that even though they are numbers, they are not being used as numbers. they are being used as strings, so adding them together is not adding them like 1 + 1 = 2, but it is stringing them together like “1” + “1” = “11”.

The next method is called Submit and that is when I hit the enter button. it says that if the secretPin and the actual PIN equal each other, then the textBox will say “PIN Accepted” and then set the actualPIN to null (making it go away if I click another button.

else it will display “Invalid PIN” and then set the actualPIN to null.

The last method here is the Clear method which is setting the text box to nothing and setting the actualPIN to null.

Now for each button, I have to set that button in the On Click, and select the displayButtonValue method in the ButtonScript.

NOTE: when you add the rest of the buttons, you are going to have to be sure that these are all set correctly.

On the ButtonEnter, I set the buttonManager and picked the Submit method and the PINNumber script.

And on the ButtonClear I set the ButtonManager and picked the clear method off of the PINNumber script.

That is the basic setup for the keypad. just add the rest of the numbers.

It works like this:

That’s it.

Thanks for reading.

--

--