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.
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.
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!