OnClick Events in Unity

Now that we have our gem economy displaying properly in the shop menu, we’ll need a way to show what the player has selected when they click on a purchasable item. We have a graphic that we can use to underline the text, so let’s create a new UI image and put the selection image into it:

In the course, the resolution was around 450x30 but I recently rebuilt my menu so in my version, the size to 750x30. Rename the ui image to “Selection”

The idea here is we’ll be underlining the text the player selects with the mousebutton. The UI Manager will place the selection line depending on what item button is pressed, and when the buy item button is pressed, it finalizes the sale.

Let’s create a holder for the image in the UIManager:

and of course drag the image into it in Unitys inspector:

Next, we’ll need to get feedback when we click on a button. To do that, let’s put a function in the shop script called SelectItem()

In ShopKeeper:

If we look at each button, we’ll see there’s an OnClick option that we can use to assign a function to it, so let’s select all 3 buttons, drag the shopkeeper object, not the script into the slot, and then select the SelectItem function to assign the function to each button:

Let’s test it:

When an item is pressed, “Select Item” is displayed in the console! Great!

We’ll need a way to know what item was clicked, let’s pass a parameter on in the select item:

Because we’ve introduced a parameter into our function, now if we drag our shopkeeper into our buttons again and we select the ‘SelectItem’ function, we’ll have a new dropdown available to us where we can type in the value of the item:

If everything goes correctly, the console will tell us what button we pressed:

Excellent!

Next, we’ll update our y position of the selection image depending on what button is selected and since the canvas is being changed doing that, we’ll do that in our UIManager.

I don’t currently understand it completely myself, but anchored position is the way to go when modifying a UIs object position through rectTransform. instead of .position like a gameObject, rectTransform works through anchors, pivots, and anchored positions as their ‘native language’. Suffice to say, we can quickly modify the anchored position using a new Vector2, since we only want to change the y position, we’ll use our current positions x for the former Vector2 value.

To find the y value, we merely need to move the selection graphic and make a note of the y value:

To finalize this script, we’ll need to pass info from our shopkeeper script, using a switch/case statement, we pass the values we discovered from moving the selection image:

Let’s see if it works:

Woot Woot! We’ve got a working menu!

The course then gives us a challenge to buy an item: We’ll need to create a function for the buy button, and then we’ll need to figure out if the player has enough. If not, we’ll just close the shop. We also won’t award the player with anything right now, we just want to get functionality working.

So what I did was create several new variables in the shopkeeper script:

_selectedItem is a holder for the current selected item

_playerDiamonds is a holder for…The players diamonds.

_cost will be the cost of the object selected.

_itemDescription is self explanatory.

When the trigger is activated, if the object triggering is the player, I immediately get the diamond count and place it in the _playerDiamonds holder.

When an item is selected, the item also gets put into the _selectedItem holder:

For the buy button, I created a function that pieces together the price and description based on what item was selected:

Then it will check if the player has enough diamonds to purchase the selected item, if they don’t, the shop panel closes, but if they do, a Debug message is displayed of what was purchased.

So let’s see if it works!

Great Success!

Looks like we’re getting into GameManager territory tomorrow!