Nerd For Tech
Published in

Nerd For Tech

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.

If you want to know more about me, feel free to connect with me on LinkedIn or visit my website :D

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Recommended from Medium

Getting started with ARM templates

My Little Experience with pdftk which saved my Golden time.

Memories of Ajax

Designing, Developing, & Deploying Your Portfolio Part III: Building with Bootstrap/Deploying with…

Creating high Availability Architecture with AWS CLI

CS Student Profile: Pony Linnell

Making a commit for your GitHub repo using Git Bash

Pull → Add & Commit → Push → Work → Repeat

RTT #04 — Setting Static IP Address on Ubuntu 18.04LTS Desktop with NetworkManager

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Fernando Alcantara Santana

Fernando Alcantara Santana

A passionate computer technology engineer and Unity developer that is always looking to grow in every aspect of life :).

More from Medium

Unity Profiler- Game Dev Series 144

Upgrading Player Movement (New Unity Input System)

Adding a health powerup to our prototype

Post Processing in Unity