Unity Guide
OnClick Events | Unity
A quick guide about how to work with OnClick events with Unity
Objective: Use OnClick events to display information with UI elements in a 2D game with Unity.
In the last post I covered how to create a loot system with Unity. Now, it’s time to work with the OnClick events from the UI elements in order to display information to the user according to what it selects in the shop.
The shop
To start, let’s take a look at the current shop of our 2D game. Currently, we have 3 items on sale:
We’re using a Canvas to display the UI elements from the shop. Right now, we have a button for each one of the items on sale:
New input system
Also, as we’re using the “new” input system from Unity, we’ll need to replace the Standalone input module component from the EventSystem gameobject that gets created every time that we create a Canvas in our scenes. This way, we’ll be able to click on each button without trouble.
Note: If you’re using the legacy input system just skip this step.
Creating the shop mechanic
And now, let’s start by creating the shop mechanics within a new C# script:
Once created, let’s import the UI namespace from the UnityEngine library to be able to handle UI elements from our code:
Then, let’s create a couple of new variables to have a reference of the dialog text and the item image from the shop. Don’t forget to use [SerializeField] with private variables to be able to drag the reference to the inspector:
Next, let’s create a new public method that will receive an scriptable object of type Item as a parameter. Then, we’ll use it to change the text from the dialog box and the respective image when an item gets selected:
Note: We could receive other information as a parameter to reach our goal, but we’re using scriptable objects as they’re a good way to store information.
The scriptable object of type Item contains the next information:
- Name
This property will store the name of our item. We use the new keyword before name to avoid naming troubles as Unity uses the name keyword to store the name of each gameobject created.
- Cost
This property will store the value in diamonds of the item.
- Image
This property will store the respective sprite from the item.
- Description
This property will store the description of the item.
So, with the scriptable object defined, let’s create one for each item in our store and define the respective properties through the inspector:
Then, let’s attach the Shop script into the shop gameobject:
Once attached, let’s drag the references of the UI elements to the inspector:
Using the OnClick events
And now, in order to display the respective information when we click the buttons of the shop, let’s use the OnClick events from the UI buttons to call the respective method in the Shop class.
To use them, let’s:
- Select the buttons and add an OnClick event in the button component.
- Drag the shop gameobject (with the Shop class component) to the OnClick event.
- Select the method we created when the button gets selected.
- Drag the respective scriptable object into the OnClick event to be sent as a parameter.
And now, if we run the game with Unity, we’ll see that the description and image UI elements change when we click on each of the buttons:
And that’s it, we used the OnClick events from the UI elements to display information with Unity! :D. I’ll see you in the next post, where I’ll be showing how to implement cross-platform input in our game with Unity.
