Day 124 — Setting up a Shop System in Unity Part 2

Hey and welcome!

In this part we’ll look into how to update the gem display in the shop to reflect the current amount that the player is carrying and how to use a visual cue to show that an item has been selected!

Let’s start things off here by getting the shop screen to accurately display the amount of gems that the player currently has. Create a UIManager object and then create a UIManager script to attach to it and add in this code:

public Text playerGemCount;
private static UIManager _instance;
public static UIManager Instance
{
   get
   {
      if (_instance == null)
      {
         Debug.LogError("The Instance is null");
      }
      return _instance;
   }
}
public void OpenShop(int gemCount)
{
   playerGemCount.text = "" + gemCount + "G";
}
private void Awake()
{
   _instance = this;
}

You may recognise this design as the singleton design pattern but the important bit here is the OpenShop() method which is where we directly change the text for the gem counter in the shop panel. Don’t forget to drag your text object for your gem display into the playerGemCount variable through the inspector!

Now head over to your Shop script and edit the code for your OnTriggerEnter:

private void OnTriggerEnter2D(Collider2D other)
{
   if (other.tag == "Player")
   {
      Player player = other.GetComponent<Player>();
      if (player != null)
      {
         UIManager.Instance.OpenShop(player.Diamonds);
      }
      _shopUI.gameObject.SetActive(true);
   }
}

This directly updates the gem display in the shop to reflect the number of gems that the player currently holds.

Let’s work on adding the visual cue next for the selected item. Create a new image object for the panel and add in the Sprites > UI > Merchant > Selection image and resize it so that it looks something like this:

Take a note of the y value for your selection image as you test how it looks under each one as we’ll need that to set the position in code. Once you’re happy with that and have a record of the 3 y values go ahead and add in this bti of code to your UIManager script:

public Image selectionImage;
public void UpdateShopSelection(int yPos)
{
   selectionImage.rectTransform.anchoredPosition = new
Vector2(selectionImage.rectTransform.anchoredPosition.x, yPos);
}

Our buttons have a Rect Transform component in them instead of a regular Transform so we need to make use of anchoredPosition in or to change the x or y value. It’s just the y value we’re changing so we only need to pass in yPos into here in order to move the Selection image. Speaking of, be sure to assign that in the inspector!

When you’ve done that go ahead and add in this new function into your Shop script:

public void SelectItem(int item)
{
   //0 = flame sword
   //1 = flight boots
   //2 = castle key
   switch(item)
   {
      case 0:
         UIManager.Instance.UpdateShopSelection(58);
         break;
      case 1:
         UIManager.Instance.UpdateShopSelection(-54);
         break;
      case 2:
         UIManager.Instance.UpdateShopSelection(-162);
         break;
      default:
         Debug.Log("Please assign an ID between 0-2");
         break;
   }
}

This function will get called whenever one of the buttons is clicked, and depending on the int we pass into it will determine which one has been selected.

The last part is to implement that OnClick() event. If you head over to your buttons you’ll find something that looks like this:

If you hit the plus icon it should automatically choose Runtime Only from the dropdown and also include a field that’s looking for an object. Go ahead and drag and drop your Shop_Keeper object or whichever object is holding your Shop script into this field.

The second dropdown will then become active and if you click it you’ll see Shop in there, this is just taking the name of your script and putting it here so if you named your script Bob then that would show up here instead. Inside that you should then see your SelectItem() method, click on that and then set the number to the ones specified in the script.

These numbers double as ID’s for the button and it is a handy way to let our switch statement know which one has been clicked.

That’s not looking too bad at all! If it’s not registering your clicks you may need to un-parent your buttons from the background. If it still doesn’t work double check that your panel object that holds all these UI elements only has Rect Transform and Canvas Renderer as its components.