How to use buttons in Unity with and without a mouse

Objective: Cover how to create and use Buttons with and without a mouse!

With Unity’s UI system we can create buttons and once a button is selected we can move between them with our arrow keys.

To create a button right click in the hierarchy → UI → Button.

Repeat that a few times to get multiple buttons in your scene.

When you create a button it is a white box by default.

We can change the image but selecting the Button and under the Image component select a new UI sprite.

There is a button component, in this Component we can change the tint or color of the button depending if you are hovering, pressing it, or have it selected. It has a Navigation system to move between each button if you use your arrow keys. Last thing on the button component is the Event list. When you click the button it’ll call a method that is selected.

For this article we will cover the navigation. If we select Visualize we can see the direction the arrow keys will take us.

This is automatically done. Unity takes in the location of the buttons and comes up with a way to move between them. We can change that if we want to. At navigation select automatic than select none. Then select Explicit. For our top button if we hit up on the arrow key it’ll go to the bottom button and down to go to the middle button.

This can be seen with the yellow Arrows.

Now we can move between buttons how we want with the arrow keys.

The only problem we have left now is that we have to select a button with the mouse first. To fix this we need to select the EventSystem in the Hierarchy. Under the Event System Component, we have a variable named “First Selected” and it is null at the moment.

We just need to drop in one of the buttons we have and when we play, it’ll automatically be selected.

Now when we play a game with a controller, the button will already be selected and we can move between them without a mouse!

Thank you for reading and have a wonderful day!