Setting Up Shop In Unity!
Objective: Set up our shop for our game.
Now that we have created a loot system we can move forward and create a way for our player to spend their loot. What better way to spend hard earned loot then at a shop? Using a sprite asset we can place a shop on the level wherever we feel is appropriate.
Remember we need to set the order in layer to be as high as the player and we have previously set that to 50.
Stretch the sprite to fit how you want it to look.
The set up I am going to implement is have the player walk into the shop triggering the shop window to appear on screen. The shop screen is going to be made up of UI Elements. The first thing we need to do is create a new UI canvas.
With the canvas selected, on the inspector we want to change the UI Scale Mode to scale with screen size.
We also want the reference resolution set to 1920 x 1080 and the match all the way to the left equaling 0. Finally, set the Render Mode to screen space — overlay.
We can now create a panel on the canvas to organize our UI. Right click canvas > UI > Panel
Remove the Image component.
Next, I add a profile image by right clicking shop_panel > UI > Image.
I take a sprite image I’m using for the merchant and attach to the source image.
In the unity preview window it shows the sprite being 235x324 so we will set our width and height of this image to 240x330
Next I use two box images to make a frame for the profile/merchant image. Add another UI image element and the background boxes to its source image, and make sure it is the same size as the merchant_img.
Duplicate the merchant_Img_BG by selecting it and pressing CTRL + D. Move this copy to be below the merchant_Img. I then set the source image to a sprite I have to outline the merchant_img. Set the size to the same as the others.
Position the merchant’s images where on the screen you want them to appear. Once you are happy with the position right click the UI and create another UI Image element.
This image is going to be the background panel for the items. I added another box image to the source image and stretch it to fit the profile image.
When we trigger the shop this is going to pop up and then we will have this UI system. In the next tutorial we are going to add buttons and Items to this panel. Don’t be afraid to experiment with your layout and I’ll see you in the next tutorial!