2D Mobile Game: Shop UI Setup
Intro
In this article, we are going to setup the shop UI by creating a Canvas with a Panel.
Shop Keeper Sprite
Import the shop keeper sprite and place it into the game scene. When the Player reaches the Shop Keeper, this will trigger the Shop UI to appear.
Canvas & Panels
In the hierarchy, we will create an UI Canvas game object. The Canvas will house all of the UI elements for the game.
For the Canvas settings we want the Render Mode to be Overlay which will place it over the game screen. The Canvas should scale with the screen size, so it will fit with different sized devices. Last, we set the Reference Resolution to HD ratio.
In the Canvas, we are going to create a UI Panel element. This Panel is going to house all of the Shop UI elements, but we are going to add several more panels, like the main menu, later.
The Shop Panel will be anchored to the center of screen, so whatever screen size it is on, it will remain in the center.
We will also set the Shop Panel dimensions to match the Canvas dimensions and have the HD ratio.
Shop UI
After importing UI images that will be used, we are going to add three UI Images into the Shop Panel. We have the main Merchant image, along with a background and frame. It is important to note that the order of the images in the hierarchy will determine how they are layered.
With all 3 images selected, we can adjust the dimensions and position of the Merchant image.
Next, we follow a similar process for the background Image where the items that can be purchase will be placed.
We will create a UI Button element and import an image for the button. This button will use for the user to buy the item from the shop. After modifying the position and size of the button, we will duplicate it that will display the amount of gems the player currently has, but we remove the Button component from it because we do not want it to be interactive.
For each Button a Text component is attached. The text settings for each Button will be similar with the font size, middle horizontal alignment and color, but the Player Gem Count will have a right vertical alignment with a 12 pixel padding.
This is the Shop UI that we have right now.
We are going to add the 3 items that can be purchased to the Item background. These are going to be 3 buttons for the Player to use to select and buy. We want these 3 buttons to fit neatly and uniformly into the background image and to help with this we will add a Canvas Group component to the item background. This will group any UI elements that are parented to item background. When elements are groups, we can modify them together and will remain in the dimensions of the parent UI element. We want to deselect Blocks Raycast, so the user can interactive with the buttons.
After adding the buttons to the Canvas Group, we can a Vertical Layout Group which will give use more control of the alignment and sizing of the buttons inside of this Canvas Group. We want the buttons to fit from top to bottom with some space in between and also some space on the side for the price of each item.
This buttons will not use an image, so we can remove the Image component and we will get an error when we do this. It is looking for a transition when the button is interactive with and since we do not have an image we want to select no transition.
For each of the item buttons, we will modify the text by changing it to what the item is along with increasing font size, alignment and text color.
We will also give it a 50 pixel padding from the left side.
The last thing to do is add 3 text elements that will display the price of each item.
This is the layout of Shop UI. With this now in place, we can work on integrating into the game logic. Until next time…
