Oh shopkeeper, show me your wares.

Objective: OnClick events in unity

After making some UI for our shopkeeper, we don’t really have any functionality, sure it looks nice but we can’t do anything with it.

Here we can use some OnClick events to be able to buy from the shop. So tag along for the journey of learning how we can manage to pull this off!

First, we will want to know how many diamonds the player has which we can use the method we made in the last one to send in how many diamonds the player has at the same time. There are 2 ways to be able to do this depending on if your diamonds on the player are public or private.

Shared on both public and private:

On the merchant, when we open up the shop we are calling an open shop method from the UIManager that basically unhides the panel that is holding the shop.

On the UIManager we can add a requirement to the method to take in an int diamonds at the same time which we will be able to use to set the text in the shop for how many diamonds we have.

Now to update the Text for how many diamonds we have. Have a variable to store the text to change, remember to have “using UnityEngine.UI” at the top.

Don’t forget to drop in the text element from the inspector.

Now we can just change that text to reflect how many diamonds are sent to the method.

With the UI side of things done, we can now start on the merchant. Since we are interacting with the player, we can start to use that to get the gems amount. This is where the public/private diamonds on the player differences are.

Public:

Here we can get the component of the player and use the gems amount directly.

Private:

Here we will have to make a method to get the diamonds on the player then use that method.

On merchant script.

On player script, using a return type function to make things a bit easier.

With that, the diamonds will now show up properly when we talk to the merchant

Now all that’s left to do is actually be able to buy those items…

Here is where the On Click events come into play. Since we made the different items in the shops from buttons instead of text, this will be made a lot easier.

Here we can click the + to add an On Click event but first, we need something to get called when we click them. For now, we can just make a method that just says “selected item”. later we can add in some functionality.

On the merchant script, add a public method and call it select item and add a debug.log to say we selected an item.

Now back to the inspector for those on click events, here we can click the + button then drop in the game object that contains the merchant script. Next, click on where it says “No Function” then “Merchant” then “SelectItem()”

Now we can test the on clicks are working.

So far so good. Now to make it so we can differentiate between the selections. This one is pretty simple too, by adding an int to the method we made for selecting, we can use that int to say, oh you selected the sword/key/boots.

Since we changed the method, we will need to reassign the buttons again.

After reselecting the Merchant>SelectItem you should see an extra field now too.

This is where we can set the different IDs for the items. 0 for the sword, 1 for the boots, 2 for the key.

Now we can use those IDs to know what we selected and then be able to buy them.

We can now use a switch statement to go through and check what ID we selected but we want a couple more variables for a start. 1 for the player, one for the selected item, one for item cost, and one for the name of the item (only if you want to print out what item was bought).

Instead of using a start method to get a reference to the player, we can just use the on trigger enter method for when the player comes close.

Now we can use the player outside of the on trigger enter, back to the select item method. Here we can add in a switch statement to check what the ID of the item is and then set the item cost, item name, and the selected item.

The last thing left to do is add in the ability to purchase the items. Make a new method call it BuyItem. Here we are going to check if the amount of gems the player has is great or equal to the item cost, and if it is, take the gems away and give them the item.

And that method on the player.

Currently, they are all bools but we can expand on these in the future. :)

But there we have it, a fully working shop.

Thanks for staying to the end, this really was a long one! This really can be expanded on but it’s a really good starting point. So far this game has only really been able to be played on a PC even though it’s meant to be a mobile game. How about next time we work on adding some mobile controls so we can play it on either PC or mobile! See you in the next one!