Create a button element with the Unity UI in this video. The button element is likely to be one of the main interaction points for users. This video will show you how to create button elements. Learn how to use the OnClick property to handle click events to modify your game at runtime.
- [Instructor] In this video, we're going to create and modify a button element within the Unity editor. We'll start with creating a new project for our button element, and naming it ButtonElement. Make sure the project is 2D. Buttons are one of the most common elements in UI's. Buttons are where the UI really starts to get interesting because they are the direct interaction point between the user and your Unity scripts. Let's start by creating a button. Right-click in the Hierarchy panel, UI, Button.
Let's center the button up by adjusting the transform. You can see the button has been created with another element underneath it named Text. This is the Text element of the button. Let's change that to something more appropriate. Now let's take a look at some of the components the button has. First one is the Image component that contains the image for the background of the button. Next is the Button Script, which will control a few of the properties of the button like the way it transitions when it's clicked or hovered over.
One notable property of the button component is the On Click property. This property describes what happens when the button is clicked. It's an event handler. Let's modify the On Click property by selecting the plus sign. This will allow us to select an object in the scene, and perform a function on it when the button is clicked. Let's do this with the Text element of the button itself. We can click and drag the Text element into the object field.
This will populate the function drop-down with the components of the Text element, and here in the Hierarchy window, selecting Text shows us that the Text element contains a script called Text, and a property called Text. So if we want to modify the text of the button at run time, we're going to modify the Text object and its Text script, and its Text property. So with the Text object selected, we're going to select the drop-down and select the Text component and the text property is a string, which I'm going to select here, and now whatever we type into this field is going to be set when the button is clicked.
We can test this by hitting play and clicking the button. Now we see that On Click has been triggered, and the Text property of the Text script of the Text object has been changed to I'm clicked. The button element's On Click event handler is very powerful in the Inspector. It allows us to change a number of properties on any object in the scene, unless that object does not exist at build time. Dynamically created objects don't exist when reviewing them in the Inspector like this, so they can't be selected.
Creating and modifying buttons at run time provides us even more powerful options for users to interact with the game.
- Creating text and button elements manually
- Creating UI elements from reusable prefabs
- Scripting complex events
- Modifying events at runtime
- Creating UI elements from scripts
- Creating in-game or worldspace elements such as displays and control panels
- Creating tooltips, nested menus, and tables