Day 123 — Setting up a Shop System in Unity Part 1

Hey and welcome!

I’ve got an exciting few articles coming up where we’re going to learn how to set up a shop system that our player can interact with in game and purchase items from!

First things first let’s do the nice and easy bit of putting a shop in the scene, if you have the same files you can find one under Sprites > Tiles > Environmental Tiles > Shop Keeper and it’s just the case of dragging that or your custom shop into the scene and making sure that the order in layer matches your Player.

Add a Box Collider 2D and Rigidbody 2D component to your shop as well for good measure.

Now let’s get the UI for our shop screen created next. Right click in the hierarchy and under UI choose the Canvas option to create a new Canvas object. Set the UI Scale Mode to “Adjust With Screen Size” and then set the dimensions to 1920 x 1080, this will make it look more friendly on a mobile device.

Right click your Canvas and this time create a Panel which is also found under the UI option and delete the image component from this. You can think of this as the parent object for our shop UI which we can activate or deactivate in order to prevent us from manually deactivating every individual UI component.

If you go over to the Sprites > UI folder you’ll see all the images that we’ll be making use of to piece together the UI, I’ll go through the merchant image first and then give you a brief overview of every other piece and in the end you should end up with a shop screen like this:

To get started, create an Image component from the UI menu and drag and drop your Box_01 image from the UI folder into the source image property and adjust it to your liking. Duplicate this and then drag and drop your Shop_Keeper image into the source for this one. Finally, duplicate this once more and this time add the Box_Front image into the source and you’ll have something like this:

Pretty fancy looking right? One cool thing I want to show you is something call Canvas Grouping. Start off by creating a new image and add in the Box_01 to this, stretch this one out wide as it’s going to be the background for the items:

Once you’re happy with that, create 3 buttons and stretch them out so that they fill up two thirds of your background from the left. You may find that the spacing or sizing of your buttons aren’t perfectly matching, to fix that go ahead and add a Canvas Group and Vertical Layout Group component to your background and then make your buttons a child of the background.

Uncheck the Blocks Raycasts property in your Canvas Group and then play about with the Padding and Spacing properties and you’ll see that it affects all three of your buttons as a group.

You can also control the sizing of your buttons by checking one of the options in the Control Child Size property!

Everything else is pretty standard, the two blue sections for buying an item and the gem counter are both buttons and the pricing for each item are just text objects. Go ahead and adjust and add in everything so it matches the image from earlier or style things to your own liking, remember that you can make things transparent by adjusting the Alpha channel for the colour property!

Once you’re happy with your shop panel go ahead and uncheck it so that it’s no longer active and visible on the screen and then create a Shop script to attach to your Shop_Keeper object you created earlier and add in this code:

[SerializeField]
private GameObject _shopUI;
private void OnTriggerEnter2D(Collider2D other)
{
   if (other.tag == "Player")
   {
      _shopUI.gameObject.SetActive(true);
   }
}
private void OnTriggerExit2D(Collider2D other)
{
   if (other.tag == "Player")
   {
      _shopUI.gameObject.SetActive(false);
   }
}

Drag and drop your shop panel as the game object this is looking for and you should get something like this when you run the game:

If you don’t have that code for the OnTriggerExit then you won’t have a way to get the panel off of your screen in game!