Most games need a UI, and most UI’s need buttons!  In this article, I’ll show you how to use the Unity3D UGUI Button OnClick events.  We’ll do it in the inspector and through code with onClick AddEventListener.  We’ll change the text and color of a button, and talk a bit about when you should do it in code vs the inspector.

Video Version

If you prefer video, you can watch everything in this post in video format here: https://www.youtube.com/watch?v=-bc7Ut8ijd4

Hooking up the Unity3D UGUI Button

 

To get started, we’ll need a button.  In an empty project, add a Button through the GameObject->UI->Button menu.

With the button selected, you’ll see the OnClick event section in the inspector.

To add an event, click the plus button.

Drag the Text child of the button onto the object field.

For the Function, select the Text.text option.  This will allow the button click to change the text shown by the text object.

The field below the function will become editable.. type in the word “CLICKED”

Press play and watch your text change as you click it.

Calling Custom Code on the UGUI Button

The built in functions can be useful, but often you’ll want to call your own code on a button click.

Create and add a new script and name it ChooseRandomColor.cs

This class exposes one method on it named ChangeImageColor.  The method will get our Image component (on the button) and set the color to a randomly chosen one.

With this component on the button, we can assign it to an OnClick event and have the button change colors.

Add another event to the button by clicking the plus button.

Drag the ChooseRandomColor component onto it (you can drag from the bold component name in the inspector, or alternatively drag the button from the hierarchy)

For the function, select ChooseRandomColor->ChangeImageColor()  – This is selecting the ChangeImageColor method of our ChooseRandomColor component.

Press play again and watch your button change colors as you click.

Hooking up the button in code instead – AddListener

There’s another way to hook up our events.. we can do it in code.  Sometimes it makes sense to assign events in the inspector.  When we want to hook into other gameobjects, like the child text object, or we want do do something simple like toggle the GameObject Active/Inactive…

But other times, it’s better to do the assignment in code.  This makes it easier to figure out what’s calling the method.. making “FindReferences” work for example.  When all your events are hooked up in the editor, it can be hard to tell what’s actually used, and what it’s used by.  I’ve seen plenty projects where it took hours of digging through the hierarchy to figure out what’s calling all of the code.. and to know what’s unused and safe to delete.

Luckily, hooking up these events in code is easy to do as well.

Edit the ChooseRandomColor.cs file like this.

Here, we’re using the Start() method to register for the Button’s onClick event.  We do this with the AddListener method, where we assign our own ChangeImageColor method.  Notice that we don’t put parenthesis after ChangeImageColor on line 9, if you accidentally do, you’ll get a compiler error (It happens to all of us 🙂

I’ve also changed the ChangeImageColor method to be private.  We don’t need anything outside the class calling this method, so it should be marked private to keep it properly encapsulated.

Back in the editor, remove the 2nd event.  To do this, left click it and it’ll highlight, then click the minus button.

Press play again and everything will work the same.. but now you have references in code for your method calls.