In this tutorial we’ll set up a shop.

We’ll set up a shop layout, a shop and a shop interaction in the World scene. Additionally, we need to set up a quantity selection, to select how many items are bought or sold.

You can learn more about shops in this documentation.

Quantity Selection #

First, we’ll handle the quantity selection. They’re used to, well, select quantities – for this they’re using int inputs, e.g. an int slider or int button input (see the initial Unity UI setup tutorial).

Navigate to UI > Quantity Selections, we’ll change the Default quantity selection.

Base Settings #

Content Settings #

Quantity Changes #

We’ll use horizontal input to change the quantity, this should be the default setup (but we’ll enable looping as well).

Additionally, we’ll set up horizontal input for +/-10 quantity changes (no looping).

Quantity changes are displayed (and changed) using int inputs, you should already have int input prefabs set up by following the initial Unity UI setup tutorial. You can use a different input than the default (defined in UI > UI System) by selecting a prefab in the Custom Input Prefab setting.

I’ll use an int button input.

Input Content #

Defines the content displayed by the int input.

The default setup should be enough for us.

Shop Layout #

Shop layouts are used to display a shop’s content and can be shared by multiple shops.

We’ll set up a simple layout using the UI boxes we already created for our menu screens – displaying item types, the list of shop items, a description and information (e.g. how many of the selected item are already in the inventory or equipped).

General Settings #

Navigate to UI > Shop Layouts > General Settings, we’ll first set up a background for the shop (same as for our menu screens).

General Backgrounds #

Layout #

Navigate to UI > Shop Layouts, we’ll change the Default layout.

Buy/Sell Box #

This allows us to dislpay a buy/sell selection when opening the shop.

Type Box #

Display item types of the shop’s content (or the player’s inventory when selling).

List Box #

Displays the items, equipment and other things that are sold by or to the shop.

Description Box #

Info Box #

We’ll display how many of a selected item are already in the inventory or equipped, as well as the current gold the player owns.

Please note that the GUID of your currency might vary, so please use the buttons above the text editor to add that information. Click on the More button while editing the text to show more text code options.

See the overview menu tutorial for a more detailed explanation.

That’s it for the shop layout.

Price Texts #

Since we display prices in our shops, let’s set up a better display for our price texts.

Navigate to UI > Text Display Settings.

Formatting Texts > Price Texts #

These texts handle how buy and sell prices are displayed when they’re displayed as info content, e.g. in shops.

We’ll show the currency’s icon after the price, as well as a different text for free items (price 0).

Buy Price Text #

Sell Price Text #

Shop #

Now it’s finally time to set up our shop’s content.

Navigate to Inventory > Shops, we’ll change the Default shop.

Content Information #

Shop Settings #

Pause Settings #

Currency Settings #

Items #

We’ll add several items – the order in which they’re added here doesn’t really matter, since the shop layout sorts them by ID for us (according to our setup).

Item 0 #

Let’s start with the free item, a Revive Potion.

Item 1 #

The rest of the items are regular purchases, so the setup is pretty simple – just adding and selecting items.

Item 2 #

Item 3, 4, etc. #

You know how to do this now, add the following items.

Equipment #

The setup for equipment is the same as for items.

Equipment 0 #

Equipment 1, 2, etc. #

Add additional equipment to your liking.

E.g. I’m adding everything up to the Scope accessory.

Save Changes #

And that’s it for the editor setup

Don’t forget to save your changes by clicking on Save Settings at the bottom of the editor.

Adding a shop to the scene #

Now, we finally add the shop to the town. Open the World scene (Assets/Scenes/) and add one of the NPC prefabs to the town area.

You can find the NPC prefabs in Assets/Tutorial Assets/Prefabs/NPCs/ – I’m using the Casual3_Female prefab and place it in front of the market stand in the center of the town.

Shop Interaction #

Add a Shop Interaction component to the NPC’s game object, either using the component menu or the Makinom scene wizard.

Shop Settings #

Start Settings #

The interaction should already default to using Interact start type, of not, click on the Interact button to conveniently set it up.

However, we’ll adjust the Object Turn Settings to let player and NPC turn to each other.

And that’s it – save the scene.

Testing #

Hit play, go to the shop NPC and interact with it.

Success!

Next, we’ll make our way to the dungeon – through random battles!