One of the most common UI elements is a simple button. Pretty much all UI interfaces on the most commonly available Unity platforms contain buttons. The simplest interaction with a button is a click. You will now learn how to construct a button in Unity UI and call a certain method in the code when the button is clicked on.
To speed up your learning process, I have prepared ready-to-use UI elements.
Download and import MenuViewUIElements.unitypackage into your Unity project, as follows:
Unity will import a few useful assets with this package. In the Project View, find Prefabs/UI/PlayButton.prefab and drag it directly on top of the Menu Canvas, as shown here:
When you drop the prefab, the PLAY button should appear on the canvas, like this:
Before we talk about the functionality of the button, we will talk about the visual parts that make up the simple labeled button:
Unity can very easily draw 2D images on the UI canvas. Select your button and take a look at the Inspector window. We are using the Image component on our button to give it a visual presence. In simple words, the Image component gives our button a background.
The actual interaction with the button is controlled by the Button component. The Button control responds to a click from the user and is used to initiate or confirm an action. For more detailed information, refer to the Unity Manual. You will find tons of useful information and examples in it: http://docs.unity3d.com/Manual/script-Button.html.
There it is! This is our first button. It might not look very impressive, but it's functional. To check how it works, click on Play in Unity and press the button in the game view.
What should happen is… nothing. You observe the button visually changing a little when you press it, but the game doesn't start. We need to assign an action to the button to call the part of code that we need.
All user interaction with Unity UI is driven by events. The button has one type of event already built into its component. It is the simple OnClick event:
The OnClick event is invoked when a user clicks on the button and releases it. At the moment, the list of methods that we want to invoke when the OnClick event happens is empty. Hey! That's why the button isn't doing anything useful. Let's hook it up with a method and see how it works.
Unity's Event Systems are very flexible. The OnClick event allows you to call any public method in your code directly from the Button component. Follow the few simple steps given here to assign a specific method in the code that you want to call when the UI button is clicked on by the user:
- Select the game object containing the Button component.
- Press the + button in the Event section, as shown here:
- Drag and drop the
GameObjectcontaining the script with thepublicmethod you want to call from the event. In this case, it is theGameManagergame object. DropGameManagerinto the Object field:
- From the function list, select the Component name and then the method name of the function that you want to be called when the button is clicked on. Since we are playing with the Play button, we will call the
StartGame()function fromGameManager, as shown next:
- If you have connected everything properly, the
OnClick()event attached to the Play button will look like this in the Inspector window:
We now have all the bits and pieces we need for the button to work. We have set up the Canvas view to render UI elements. We have an EventSystem to process and trigger events caused by the user. And we also have the first event called when the user presses the Play button.
Great work so far. Let's test the Play button! Press Play in Unity and click on the green Play button in the Game view.
Woohoo! It's working! Great work! As soon as you press the Play button, the Event manager will invoke the
StartGame() function, which is under GameManager, and the game will start.
The button is working great. However, something is not right. The user will expect the menu to disappear just after they've pressed the button. Let's get this sorted right away.