Build a PIN Pad with UI in Unity 2021 URP

In this article we’ll create a PIN pad similar to what you might see on a safe or secure entry doorway using Unity’s UI system.

If you remember from previous articles, there is a Canvas type that would allow you to place it on a three dimensional object in your scene.

You could use this at a kiosk for instance or on the wall next to a doorway!

Initial Scene Setup
To get started, we’ll need a Canvas with an Image element as background.

From there, create and empty element and name it “ButtonLayout”.

Create a child Button element under ButtonLayout.

On the Button element, set the Normal color and the Selected color to be the same mild grey color.

Choose any color you like for the highlight color and leave the Pressed Color as pure white.

When you hit Play, it should interact something like the above.

On the Button’s child Text element, set the text to “1”, enable “Auto Size”, and center the alignment.

Now resize the Text element on the Button to suit your taste.

Now duplicate the button 11 times and delete the original button.

We’ll let Unity name our buttons with numbers for us this way.

The first nine buttons will be digits, but the last two buttons will actually have text on them.

Now, we can differentiate our non-numerical buttons by giving them a different sprite.

Now get the buttons placed roughly where you want them.

Resize and reposition as needed.

You may need to resize the Text elements for the Enter and Clear buttons.

Then rename the Text element for each numerical button.

When you are done, you should have something like the above.

The last visual element we want is a screen with text on our PIN pad to allow or deny access.

I’ve used two Image elements, the ScreenBG is sized smaller than the ScreenBorder element, so as to create a bordered effect.

Assign a Text element to the ScreenBG Image element.

Now let’s create a script named “PINPad” and assign it to the Canvas element.

The PINPad Class/Script
We’ll create several fields to hold information for every interactable element in our UI.

We’ll set a default PIN if none is entered in the Editor Inspector window on Start().

Then we have a few methods to link up to particular types of buttons which will then do what they are expected to do.

We’ll verify any entered pin and lock the input while the “Incorrect PIN” text is displayed before allowing the user to try again.

Back in the Editor, we need to assign all of our interactable elements to their associated fields on the PINPad script component.

We’ll need to go through every Button element and assign it’s Unity Event, “On Click ()”, to the appropriate method on our script.

And that should be it!

Run the game and see if you get something similar to that shown above.