Setting Up Shop In Unity Part II

Objective: Finish the Shop set up!

Continuing on from the lest tutorial where I was showing my process for making a shop menu. Created a profile photo for the merchant as well the background image for the items. Now we are going to fill out the menu.

Right clicking the shop panel I add a button we are going to use as a buy button.

This button will trigger the ability to buy items.

Drag the button to the position desired, and resize. I have a source image I assign by slotting the image in the source image slot on the inspector.

Duplicate this buy item button using CTRL + D. This new button we will use to show how many gems the player has, simply place the duplication and remove the button component.

Both of these buttons have a child text object. In the buy button text object type “Buy Item” set the font color to white and the size to 50. With the same settings on the player gem count for visual testing I type 54G.

We will have the player gem count will be populated when the player triggers the shop

Now create buttons for items in the shop. Right click Item_BG and create new UI button. Label this as “Flame_Sword_Button” remove the image component. Duplicate and label the new button as “Boots of Flight.” Duplicate again and label “Key to Castle.”

Select Item_BG and add component “Canvas Group” and “Vertical Layout Group.” This will space the items evenly inside the Item_BG space. Then Select the text objects under the three buttons and set the position x to 50.

In the Vertical Layout Group you want to control the child size height, and child force expand height.

Let’s finish this menu off with 3 UI Text Elements for prices of these items. Their font size is set to 40, text color is white, the price for the flame sword is 200G, and the vertical overflow is set to overflow.

Duplicate the price twice. Rename them to represent the prices to their own items and set the prices to reflect accordingly.

This should be all we need to create a functional shop system in our adventure game! Don’t be afraid to experiment with your shop and In the next tutorial we will explore on click events! See you in the next tutorial!

--

--

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