Inventory Containers

Use inventory containers to create a slot-based inventory system.

ORK’s inventory system just keeps track of items, equipment and other things that are stored in an inventory. This standard setup doesn’t involve ‘slots’ where you can move content around or no longer be able to pick up new things when all slots are full (though you can use the inventory space feature to limit it).

Inventory containers are an optional feature to add a slot-based inventory on top of ORK’s inventory system. You can create multiple containers, each container can have their own number of slots and define what can be stored in them, e.g. having a container only for potions. Learn more about inventory containers in this documentation.

In this tutorial we’ll set up inventory containers and a menu screen to access them. The menu screen setup also involves setting up a bunch of Unity UI prefabs (we’re using the Unity UI module for the UI setup):

  • shortcut UI to display items in slots
  • button prefab for the slot buttons
  • UI box with grid layout for the inventory container menu
  • (optional) UI box for a sub-menu

Your project’s UI system should already be set to use the Unity UI module. If not, check the initial setup tutorial for the Unity UI module.

This tutorial is based on the 3D RPG Playground series, but you can use this for any kind of project. I’d also recommend to follow the dragging notification tutorial to set up displaying dragged content.

You can download the completed UI prefab setup here:

Download UI Prefabs

This contains the prefabs for shortcut UI, slot button, menu UI box and sub-menu UI box. You still need to use the prefab for the non-prefab setup below (in the Makinom editor).

Shortcut UI Prefab #

First, we’ll set up the Shortcut UI for our our shortcuts. We’ll later set it up with a UI key to keep it separated from other shortcut UIs that might already be set up in your project or will be added later.

We’ll create a UI with a size of 100×100, showing the content’s icon and information (i.e. quantity for inventory-related shortcuts).

Create a ready-to-use shortcut setup using the scene hierarchy’s context menu: ORK Framework > HUD > Shortcut > Shortcut Content+Info (for prefabs)

The game object that’s created for us has the following structure:

Content > Image handles the icon, spread out to be used as a background for the shortcut.

Content > Text handles the name, we’ll remove that one since we only show the icon (but you can keep it if you want to show the name).

Info Text handles the information, e.g. use cost or item quantity.

Rect Transform #

We’ll control the size of our shortcut on the Shortcut Content game object. We’ll use a size of 100×100.

  • Width
    Set to 100.
  • Height
    Set to 100.

Remove the name #

Delete the Shortcut Content > Content > Text child object, as we don’t display the shortcut’s name.

Icon #

The icon is already set up as we need it – stretching with the shortcut’s size.

Nothing to do for us here.

Info Text #

Select the Shortcut Content > Info Text child object, it handles displaying the shortcut’s information, e.g. the use costs of an ability or quantity of an item.

The ORK HUD Status Text Content component handles the content that’ll be displayed. It already is set up as we need it, using the Shortcut type and the <info> text code to display the information of the shortcut. You can use other types in case you need specialized text codes for equipment (Equipment type) or items (Item type) and set up their own shortcut UI prefabs.

The TextMeshPro – Text (UI) component handles how the text is displayed. If you want to change the font, font size, color, etc., this is where you can do it. I’ll adjust the following settings.

  • Font Size
    Set to a smaller size, e.g. I’m using 16.
  • Vertex Color
    Change the text’s color to a color you like – e.g. I’m using a red color.
  • Alignment
    Set to Right and Top.
    This’ll place the text at the upper right corner of the icon.
  • Wrapping
    Select Disabled.

 

That’s it for the shortcut UI prefab – the finished UI should look like this:

Naturally, the white square in the background will be replaced by an icon when showing actual content.

Create Prefab #

Create a prefab out of our Shortcut Content game object (without the Canvas). E.g. name the prefab Inventory Shortcut UI.

You can now remove the game object from the scene.

Slot Button Prefab #

We’ll continue with setting up a button to display our inventory container slots.

The button should display no content – if an item, equipment or other thing is stored in a slot, it’ll use the shortcut UI we set up to display it within the button.

Create a ready-to-use button setup using the scene hierarchy’s context menu: Makinom > UI Box > Input (Button) > Choice Button

This’ll create a standard button with text and image content – which we don’t need, so we’ll remove it.

Remove the text #

Delete the Choice Button > Text child object.

Remove the image #

Delete the Choice Button > Image child object.

Remove Horizontal Layout Group #

Select the Choice Button game object.

Remove the Horizontal Layout Group component that is attached to it.

Remove Content Size Fitter #

Remove the Content Size Fitter component that is attached to the game object.

Rect Transform #

We’ll use a size of 100×100 for our buttons.

  • Width
    Set to 100.
  • Height
    Set to 100.

Layout Element #

Additionally, we’ll add a layout element to let the layouting system know we want this button to have a certain size.

Add a Layout Element component to the game object using the component menu.

  • Preferred Width
    Enable this setting.
    Set the width to 100.
  • Preferred Height
    Enable this setting.
    Set the width to 100.

Image #

Finally, we want the slot to be styled in a certain way. We’ll use the button’s background image for this, set up by the Image component of the button’s game object.

I’ll use the BoxBeige sprite that comes with the UI assets from the initial UI setup tutorial.

  • Source Image
    Select the BoxBeige sprite (or any other sprite you want).

 

That’s it for the button prefab – the finished UI should look like this:

Create Prefab #

Create a prefab out of our Choice Button game object (without the Canvas). E.g. name the prefab Inventory Container Slot Button.

You can now remove the game object from the scene.

Inventory Container UI Box Prefab #

Next, we’ll create the UI box that’ll display our inventory container menu. It should be scrollable, show tab buttons and use a grid layout.

Create a ready-to-use UI box setup using the scene hierarchy’s context menu: Makinom > UI Box > UI Box Scroll

The default setup that’s created for us has a vertical layout – we’ll need to change it to use a grid layout.

Rect Transform #

Let’s start with positioning the UI box – the UI Box game object should already be selected.

It should be displayed just in the center of the screen (which it already is) and be large enough to display our 100×100 buttons in rows of 6 slots each.

  • Width
    Set to 720.
  • Height
    Set to 680.

UI Box #

The UI Box component handles all settings of the UI box.

Input Settings #

We’ll use the slot button prefab we just created to override the default button prefab. And we’ll change the selection settings to use Unity UI’s direction-based selection.

  • Button Prefab
    Select the Inventory Container Slot Button prefab we just created.
  • Horizontal Input Change
    Set to 0.
  • Vertical Input Change
    Set to 0.

Having both horizontal and vertical input change at 0 will use the Unity UI’s direction-based selection.

Image #

We’ll change the background image to use the BoxBlue sprite.

  • Source Image
    Select the BoxBlue sprite (or any other sprite you want).
  • Color
    Select a white color with full alpha (A=255 or 1, depending on your color picker).

Tab Area #

Next, we’ll add an area for the tab buttons.

Use the scene hierarchy context menu on the root UI Box game object and add a scrollable tab area to the top: Makinom > UI Box > Tab > Add Tabs Top (Scroll Horizontal)

This’ll add child object where our tabs will be added to – they’re scrollable horizontally (without displaying a scrollbar). The area is added to the top of the UI box, moving the scroll rect down a bit. We’ll adjust the positioning a bit, making the tab area higher.

Tabs Rect Transform #

Select the UI Box > Tabs child object (should already be selected by creating it).

  • Height
    Set to 70.

Content Scroll Rect Transform #

Select the UI Box > Scroll View child object.

  • Top
    Set to 70.

Grid Layout #

Select the UI Box > Scroll View > Viewport > Content child object.

Remove Vertical Layout Group #

Remove the already added Vertical Layout Group component.

Add Grid Layout Group #

Add a Grid Layout Group component using the component menu.

We’ll use cells matching our 100×100 slot button size and a fixed number of columns (6).

  • Cell Size
    Set to X=100, Y=100.
  • Spacing
    Set to X=10, Y=10.
  • Child Alignment
    Set to Middle Center.
  • Contraint
    Select Fixed Column Count.
  • Contraint Count
    Set to 6.

Remove the text #

Our inventory container menu will only display slots and no texts.

To prevent the text from getting in the way of our slots arranged in the grid layout, we’ll remove it completely.

Delete the UI Box > Scroll View > Viewport > Content > Text child object.

 

That’s it for the inventory container UI box prefab – the finished UI should look like this:

Create Prefab #

Create a prefab out of our UI Box game object (without the Canvas). E.g. name the prefab Inventory Container UI Box.

You can now remove the game object from the scene.

Sub-Menu UI Box Prefab (Optional) #

Optionally, our inventory container menu will use a sub-menu to display different operations (e.g. splitting item stacks). If you want to set that up, we’ll need an additional UI box for it.

The UI box for the sub-menu will be displayed at the position of the selected slot and should adjust it’s size to the displayed content.

Create a ready-to-use UI box setup using the scene hierarchy’s context menu: Makinom > UI Box > UI Box Fit Size with Title

Rect Transform #

We can ignore the position and size of the UI box, since that’ll be handled by the Content Size Fitter component (see below) and the slot button it’ll be displayed for.

However, we’ll change it’s pivot to display it’s upper left corner at the slot button position.

  • Pivot
    Set to X=0, Y=1.

UI Box #

The UI Box component handles all settings of the UI box. We’ll use them to limit the box to the screen space – e.g. if it’s displayed for a button that might display parts of the sub-menu out of the screen, this’ll force it to display within the screen’s bounds.

  • Limit to Screen
    Enable this setting.

Image #

We’ll change the background image to use the BoxBeige sprite.

  • Source Image
    Select the BoxBeige sprite (or any other sprite you want).
  • Color
    Select a white color with full alpha (A=255 or 1, depending on your color picker).

Content Size Fitter #

The default setup for this UI box will only adjust the vertical size (height) to the displayed content. Let’s change it to also adjust the horizontal size (width).

  • Horizontal Fit
    Select Preferred Size.

Title Content Image #

We’ll also change the title box’s Image component to use the same sprite as the UI box itself.

Select the UI Box > Title Content child object.

  • Source Image
    Select the BoxBeige sprite (or any other sprite you want).
  • Color
    Select a white color with full alpha (A=255 or 1, depending on your color picker).

 

That’s it for the sub-menu UI box prefab – the finished UI should look like this:

Create Prefab #

Create a prefab out of our UI Box game object (without the Canvas). E.g. name the prefab Submenu UI Box.

If you’ve done the setup in one of your game’s scenes, don’t forget to remove the canvas (with the UI Box game object) again.

UI Box Setup #

We’ve set up all the prefabs we need, it’s time to use them.

Inventory Container UI Box #

Open the Makinom editor, navigate to UI > UI Boxes and create a new UI box.

Base Settings #

  • Name
    Set to Inventory Container Menu.
  • UI Layer
    Select Layer 1 (or any other UI layer you want your menu to display on).

Unity UI #

  • UI Box Prefab
    Select the Inventory Container UI Box prefab you just created.

Sub-Menu UI Box (Optional) #

If you want to set up the sub-menu, you also need to set up it’s UI box.

Create another new UI box.

Base Settings #

  • Name
    Set to Sub-Menu.
  • UI Layer
    Select HUDs (or any other UI layer you want your menu to display on).
    It’s best to have sub-menus display one layer above your menus.

Unity UI #

  • UI Box Prefab
    Select the Submenu UI Box prefab you just created.

Shortcut UI Setup #

Next, we’ll set up the inventory shortcut UI.

Navigate to UI > Shortcut Settings, we’ll add a key setup, i.e. a shortcut UI linked to a UI key.

Default UI Settings > Default Shortcut UI #

Click on Add Key Setup.

  • Key
    Set to inventory.
  • UI Prefab
    Select the Inventory Shortcut UI prefab we just created.

Now, we can use this shortcut UI by using the key inventory.

Inventory Container Setup #

Now we’ll get to the main feature of this tutorial – setting up the actual inventory containers.

We’ll set up 3 inventory containers:

  • potions, will contain only potions
  • materials, will only contain materials
  • equipment, will only contain equipment

All containers will have 30 slots each.

Anything that’s not allowed in any of the available inventory containers will just remain in the standard inventory. However, if e.g. the potion container is full and another potion is collected, it’ll not be added.

General Settings #

We’ll start with the general settings – they define if inventory containers are used at all.

Navigate to Inventory > Inventory Containers > General Settings.

Use Settings #

  • Use Inventory Containers
    Select Player Only.
    The inventory containers will only be used by the player group, no need to use them on enemies for our setup (but you can, if you want).
    Only use inventory containers for all combatants (selecting Enable) if you really need it, otherwise it’s a waste of resources.

Notifications #

You can set up notifications to let the player know only a few/no free slots are left.

Potions #

Select the Default inventory container that’s already set up.

We’ll limit this inventory container to only contain potions.

Content Information #

  • Name
    Set to Potions.
  • Sprite (Icon)
    Select icons_61.

Click on the Find TMP Tag button to get the icon’s tag for displaying it in texts (via text codes). This uses TextMesh Pro’s sprite asset setup.

Slot Settings #

We’ll use a fixed number of slots – 30 for the whole group.

You can also use formulas to calculate available slots (e.g. based on status values) and have the slots be added per group member.

  • Only Leader (Group)
    Enable this setting.
    This’ll calculate the slot count only using the leader of the group.
    Otherwise the defined slot count will be available for each group member, e.g. 30 slots for 3 members will have 90 slots available.
  • Slots
    Select Value > Value.
    Set the value to 30.

Items #

We’ll only allow items in this container, no equipment or other things.

  • Items
    Enable this setting.
  • Currencies, Equipment, AI Behaviours, AI Rulesets, Crafting Recipes:
    Disable these settings.

Item Types #

We’ll limit to only allow potion type items.

  • Use Sub-Types
    Enable this setting.
    I.e. all sub-types of the defined item types will be allowed as well.

Click on Add Item Type.

  • Item Type
    Select Potions.

Materials #

Add a new inventory container.

We’ll limit this inventory container to only contain materials.

Content Information #

  • Name
    Set to Materials.
  • Sprite (Icon)
    Select icons_97.

Click on the Find TMP Tag button to get the icon’s tag for displaying it in texts (via text codes). This uses TextMesh Pro’s sprite asset setup.

Slot Settings #

  • Only Leader (Group)
    Enable this setting.
  • Slots
    Select Value > Value.
    Set the value to 30.

Items #

We’ll only allow items in this container, no equipment or other things.

  • Items
    Enable this setting.
  • Currencies, Equipment, AI Behaviours, AI Rulesets, Crafting Recipes:
    Disable these settings.

Item Types #

We’ll limit to only allow materials type items.

  • Use Sub-Types
    Enable this setting.
    I.e. all sub-types of the defined item types will be allowed as well.

Click on Add Item Type.

  • Item Type
    Select Materials.

Equipment #

Add a new inventory container.

We’ll limit this inventory container to only contain equipment.

Content Information #

  • Name
    Set to Equipment.
  • Sprite (Icon)
    Select icons_6.

Click on the Find TMP Tag button to get the icon’s tag for displaying it in texts (via text codes). This uses TextMesh Pro’s sprite asset setup.

Slot Settings #

  • Only Leader (Group)
    Enable this setting.
  • Slots
    Select Value > Value.
    Set the value to 30.

Items #

We’ll only allow equipment in this container, no items or other things.

  • Equipment
    Enable this setting.
  • Currencies, Items, AI Behaviours, AI Rulesets, Crafting Recipes:
    Disable these settings.

Item Types #

We don’t need to limit the sub-types, as we’ll allow all equipment.

Input Keys #

Next, we’ll set up 2 input keys – one to call the inventory container menu and one to be used as a hold key for drag/drop operations to split and merge item stacks.

Call Inventory Containers Key #

Navigate to Base/Control > Input Keys and add a new input key.

We’ll call the inventory container menu via the I keyboard key.

  • Name
    Set to Call Inventory Containers.

Input ID Setting 0 #

  • Input Origin
    Select Key Code.
  • Positive Key
    Select I (i).

Shift (Hold) Key #

Add another new input key – we’ll use holding shift for drag/drop operations.

  • Name
    Set to Shift (Hold).

Input ID Setting 0 #

  • Input Origin
    Select Key Code.
  • Positive Key
    Select Left Shift.
  • Negative Key
    Select Right Shift.
  • Input Handling
    Select Hold.

Inventory Containers Menu Screen #

And finally, we’ll set up our menu screen to display inventory containers.

Navigate to UI > Menu Screens and add a new menu screen.

Menu Screen Settings #

Unlike the other menus of the 3D RPG Playground tutorials, we’ll not pause the game or block any notifications for this one – but still block the player controls.

  • Name
    Set to Inventory Containers.
  • Remember Selection
    Enable this setting.
  • Block Controls
    Enable this setting (should be enabled by default).

Call Screen Key #

  • Use Call Key
    Enable this setting.
  • Input Key
    Select Call Inventory Containers.

Inventory Container (Slots) Part #

The Inventory Container part is used to display inventory containers.

Scroll down to the bottom of the settings to see the Add Menu Part button.

Click on the Add Menu Part button and select Inventory Container (Slots).

The default setup will already show all containers and sort them by name – we’ll change it to sort by ID.

Available Inventory Containers #

  • Sort By
    Select ID.

Container Box Settings #

Lists the inventory cotnainers that are available.

  • Type Display
    Select Tabs.
    We’ll display the containers as tabs in the item box.

Item Box Settings #

Lists the crafting recipes from the selected crafting type.

  • Item Box
    Select Inventory Container Menu.

The Empty Slot Content settings define how empty slot buttons are displayed.

  • Active Buttons
    Enable this setting.
    I.e. empty slots will be displayed as active buttons.
    Otherwise they’re displayed inactive.
  • Text
    Set to an empty text.
    We don’t need any text since our slot buttons don’t display any content beside the shortcut UI of an item.

The Assigned Slot Content Layout settings define how assigned slot buttons are displayed.

  • Content Type
    Select None.
    We don’t display any content, just the shortcut UI.
  • HUD Type
    Select UI Key Setup.
    This allows us to use the shortcut UI.
  • UI Key
    Set to inventory.
    I.e. it’ll use our shortcut UI we’ve set up for this key.

Click on the Remove button of the Additional Content Layout 0, since we don’t display any (additional) content in the button.

The Drag and Drop settings define if and which drag operations are available. We’ll allow dragging and split/merge dragging while holding shift.

  • Enable Dragging
    Enable this setting.
  • Split On Drop
    Enable this setting.
  • Hold Input Key (Drop Split)
    Enable this setting.
  • Split Input Key
    Select Shift (Hold).
  • Merge On Drop
    Enable this setting.
  • Hold Input Key (Drop Merge)
    Enable this setting.
  • Merge Input Key
    Select Shift (Hold).

As mentioned above, I’d also recommend to follow the dragging notification tutorial to set up displaying dragged content.

Sub Menu Settings (Optional) #

  • Use Sub Menu
    Enable this setting.
  • Call Key
    Select Accept.
    Using the accept key (i.e. the same accept key used by the UI box) will call the sub menu instead of using the item (or whatever menu action is defined by your menu part).
    This also calls the sub menu when clicking on an item.
  • UI Box
    Select Sub-Menu.
  • At Input Position
    Enable this setting.
    This’ll position the sub menu at the position of the selected button.
  • Input Anchor
    Select Middle Right.

We’ll display the name of the selected item/content in the title of the sub menu’s UI box.

  • Show Title
    Enable this setting.
  • Text (Title Content)
    Set to: <name>

Click on Add Menu Item to add the first button of the sub menu.

  • Menu Action
    Select Use.
    This’ll use items, equip equipment, etc.

If you’re wondering why we don’t need to define the button’s content, that’s handled by default button contents – they’re set up in UI > UI Settings in the ORK UI Settings > Default Buttons. Certain button contents can be defined there (and are defaulting to useable content) to unify their content. However, you can always override the default content with custom one wherever they’re used.

Click on Add Menu Item to add another button to the sub menu.

  • Menu Action
    Select Move.
    This action allows you to move something to a different container slot.
    If the slot is already occupied, the content will be swapped.
  • Highlight Input
    Enable this setting.
    The button containing the content that’s moved will be highlighted with a defined color.
  • Color
    Select a blue color (or any other color you want to highlight the button with).
  • Text (Button Content)
    Set to: Move

Copy the Menu Item 1 settings to reuse the highlight settings for the merge selection.

  • Menu Action
    Select Merge.
    This action allows you to merge an item stack with another (matching) stack.
  • Text (Button Content)
    Set to: Merge

Click on Add Menu Item to add another button to the sub menu.

  • Menu Action
    Select Split.
    This action allows you to split an item stack into 2 stacks.
  • Text (Button Content)
    Set to: Split

Click on Add Menu Item to add another button to the sub menu.

  • Menu Action
    Select Drop.
    This action drops items back into the game world (and can be collected again).

Item drops are handled by the Drop Item Settings in Inventory > Inventory Settings – the default setup should be enough for our needs for now.

Save Changes #

And that’s it – click on Save Settings to save the changes.

Testing #

Hit play and test the new menu screen and container slots.

The content is displayed in slots, you can drag/drop them around to different slots.

If you’ve set up the sub-menu, you can call it via the accept key or clicking on an item.

Move and merge will highlight the original slot with the defined button when using the sub-menu actions.

UI
Sitemap
Categories
Search

© 2015 Gaming is Love e.U.

Disclosure: This site may contain affiliate links, which means I may receive a commission if you click a link and purchase something that I have recommended. While clicking these links won’t cost you any money, they will help me fund my development projects while recommending great assets!