Winning battles brings us money, let’s create a shop to spend some money.

In this tutorial we’ll focus on setting up our shop – you can learn more about shops in general in this how-to.

Creating the layout

First, we’ll create a Shop Layout – it’s similar to Menu Screens and is used to display the contents of a shop. Open the ORK Framework editor and navigate to World > Shop Layouts. We’ll change the default layout.

Base Settings

  • Name
    Set to Simple Layout.
  • Box Display
    Select Multi.
    The item types and item list will be displayed in separate boxes at the same time.
  • Buy Quantity Type
    Select Default.
  • Sell Quantity Type
    Select Default.

Name Box

The name box is used to display information about the shop (name, description, icon).

  • Show Name
    Disable this setting.
    We’re not using it.

Buy/Sell Box

The buy/sell box displays a choice if the player wants to buy from the shop or sell to the shop before displaying the shop’s (or player inventory’s) content.

  • Show Buy/Sell
    Enable this setting.
  • GUI Box
    Select Main Menu.

The rest of the buy/sell box settings should already be set up correctly. There need to be three buttons, a buy button, a sell button and an exit button.

Type Box

The type box allows separating the content of a shop into different item types.

  • Show Type
    Enable this setting.
  • GUI Box
    Select Menu Small.

List Box

The list box displays the actual list of items and equipment sold in the shop (or that can be sold to the shop).

  • GUI Box
    Select Menu Big.

Description box

The description box displays the description of selected menu choices (e.g. the description of an item).

  • Show Description
    Enable this setting.
  • GUI Box
    Select Top Info.
  • Always Visible
    Enable this setting.

Info Box

The info box can be used to display general info using text codes. You can use it to display the amount of money owned by the player, or the quantity the player has in his inventory of a selected item.

  • Show Info
    Enable this setting.
  • GUI Box
    Select Menu Info.

Displaying information works like Information menu part in Menu Screens, so we can use HUDs or HUD elements to display information.

Element 0

Click on Add Information Element to add a HUD element.

  • Text
    Set to:
    #currency.name0#:
    In Inventory:
    Equipped:
  • Text Alignment
    Select Left.
  • Position
    Set to X=0, Y=0.
  • Anchor
    Select Upper Left.
  • Relative To
    Select Upper Left.
  • Use Last Element
    Disable this setting.
  • Width
    Set to 100.
  • Is Percent (Width)
    Enable this setting.
  • Adjust Width
    Enable this setting.
  • Height
    Set to 100.
  • Is Percent (Height)
    Enable this setting.
  • Adjust Height
    Enable this setting.

Element 1

Copy the element and change the following settings.

  • Text
    Set to:
    #currency.inventory0#
    #inventory
    #equipped
  • Text Alignment
    Select Right.

Combatant Info Box

The combatant info box can display status information about combatants. You can use it to show the changes a selected equipment would make to a combatant’s status.

  • Show Combatant Info
    Disable this setting.
    We’re not using this.

And that’s it for the shop layout.

The shopping list

A shop is simply a list of items and equipment that is available in the shop. Navigate to World > Shops and change the default shop’s settings.

  • Name
    Set to Convenience Store.

Base Settings

  • Shop Layout
    Select Simple Layout.
  • Currency
    Select Gold.
    Since you can have multiple currencies in a shop, you can select a currency the shop will deal in.
  • Block Control
    Enable this setting.
    The player and camera control will be blocked while the shop is opened.
  • Save Shop
    Disable this setting.

Music Settings

A shop can optionally play a different music when opened. We’re not using this feature.

Items

You can define the items that will be sold in the shop here. We’ll add all items (excluding the quest item Underpants) to the shop.

  • Item 0
    Select Potion.
  • Item 1
    Select Magic Potion.
  • Item 2
    Select Revive Potion.
  • Item 3
    Select Cure Potion.
  • Item 4
    Select Fire Scroll.
  • Item 5
    Select Paralyse Scroll.
  • Item 6
    Select Book of Health.
  • Item 7
    Select Book of Immunity.

Weapons

You can define the weapons that will be sold in the shop here. Again, we’ll add all weapons to the shop.

  • Weapon 0
    Select Short Sword.
  • Weapon 1
    Select Fire Sword.
  • Weapon 2
    Select Long Sword.
  • Weapon 3
    Select Mug Knife.

Armors

You can define the armors that will be sold in the shop here. We’ll add all armors.

  • Armor 0
    Select Cap.
  • Armor 1
    Select Leather Helmet.
  • Armor 2
    Select Wooden Shield.
  • Armor 3
    Select Round Shield.
  • Armor 4
    Select Jacket.
  • Armor 5
    Select Leather Vest.
  • Armor 6
    Select Fire Amulet.
  • Armor 7
    Select Health Pendant.
  • Armor 8
    Select Strength Pendant.
  • Armor 9
    Select Mammoth Token.

And that’s it for the shop.

The quantity selections

Our shop layout uses the default Quantity Selections, but we haven’t set the up yet. A quantity selection is a dialogue that lets you select the quantity of an item (e.g. when buying from a shop).

Navigate to Menus > Quantity Selections and change the default quantity selection’s settings.

  • Name
    Set to Buy+Sell.
  • GUI Box
    Select Main Menu.

Content Settings

You can define the text displayed in the quantity selection here. There’s a separate text for the top and bottom of the dialogue, and a quantity text that will be displayed between the quantity change buttons.

  • Top Message
    Set to: #text.color2##text.bold%n#<style#<color
    This will display the item’s name in bold, yellow text.
  • Quantity Message
    Set to: %/%m
    This will display the quantity (%) and maximum quantity (%m).
    The maximum quantity is determined by the amount of available items or money.
  • Bottom Message
    Set to:
    Price: %t.Add a line with at least two spaces below the price text to add an empty line below the text.
    This will display the total price of the selected quantity (i.e. price * quantity).

Quantity Settings

You can define the quantity change buttons here. There are horizontal and vertical buttons available.

  • Selection Type
    Select Both Buttons.
    We’ll use both horizontal and vertical buttons.

The horizontal buttons will be displayed left and right of the quantity message. You can also use the horizontal keys (defined in the Game Controls) to change the quantity.

  • Change
    Set to 1.
    When using the horizontal buttons/keys, the quantity will change by 1.
  • Loop
    Enable this setting.
    When exceeding the end of the quantity (i.e. 1 or the maximum value), the quantity will loop to the other end.
  • As Buttons
    Enable this setting.
    The quantity buttons will use the button layout of the GUI skin.
  • Increase Button Text
    Set to: >
  • Decrease Button Text
    Set to: <

The vertical buttons will be displayed above and below of the quantity message. You can also use the vertical keys (defined in the Game Controls) to change the quantity.

  • Change
    Set to 10.
    When using the horizontal buttons/keys, the quantity will change by 10.
  • Loop
    Disable this setting.
  • As Buttons
    Enable this setting.
  • Increase Button Text
    Set to: +
  • Decrease Button Text
    Set to: 

And that’s it for the quantity selection. Click on Save Settings and close the ORK Framework editor.

Adding the shop to the scene

Open the town scene (1 Town, can be found in Assets/Tutorial Resources/Scenes/) and add NPC_yellow in the Backyard area (you can find the prefab in Assets/Tutorial Resources/NPCs/).

gametutorial_41_adding_a_shop1

Use the ORK Scene Wizard to add a Place On Ground component (Add Component > Place On Ground) and a Shop InteractionAdd Component > Shop Interaction

Change the following settings in the shop interaction’s inspector.

  • Shop
    Select Convenience Store.
  • Use Faction
    Disable this setting.
    We don’t need a faction for our shop, the prices wont be influenced by faction benefits.
  • Start Type
    Select Interact.

You can ignore the shop’s Scene ID – it would be used when we’re saving the shops content (e.g. when using quantity limits for the sold items, or keeping track of the items sold to the shop). The scene ID you’ll see in the inspector is automatically generated, but you can change it to your liking (if you’re using the shop saving features). Shops sharing the same scene ID will also share the same content.

Save the scene.

Testing

Open the main menu scene (0 Main Menu) and hit play. Walk to the backyard area and do some shopping.

gametutorial_41_adding_a_shop2

Now, you’ll be able to spend your hard earned gold on some fancy new stuff!

And that’s it for now – the next lesson will cover a changing NPC dialogue using object game variables.