Journal 105 — Unity 2D Mobile, Dungeon Escape Shop Setup Part 1

Objective: To set up an in game shop to buy items

In this article, I will go over the set up for the in-game shop UI. I will prepare a follow up article on enabling the shop and scripting to make it functional.

First, we need to look in the provided assets and add the shop to one of the branches in the level.

Next, we can add a UI Canvas for the shop menu.

After this, we can add a UI Panel to hold the menus.

From there, we can delete the Image component to clear the faded screen effect. After deleting this Image component, we need to add three 2D Image objects to the Shop_Panel to create the merchant profile picture.

Let’s anchor the Shop_Panel to the screen center and also the merchant profile picture, and make it larger.

Next we can add another UI image called “Item_BG”, and drag in the sprite Box_01. This area will show the items to buy.

Underneath the item list is a “buy item” button and an image to show the player gem count.

Now, update the button and player gem text color, size, and locations.

We can add the first item button in order to purchase a flame sword.

Then we can duplicate this for boots of flight and a key to the castle.

As you can see, the button size for the 3 purchases does not quite fit. We can make a Canvas Group and a Vertical Layout Group so they can all be sized to fit in the item background.

We can add some simple UI Text for each price. Then for the Item buttons, we can remove the image components and just increase the size of the button text.

Thank you for your time!