Custom Inventory UI
Every game is unique in its own way and even though two games of the same genre might share some similarities, the truth is that there aren't two games with the same inventory visuals.
Inventory module comes with a couple of inventory representations. The first one is called RPG Inventory UI and looks very similar to the ones you find in most Western RPG games, such as The Witcher 3: Wild Hunt or The Elder Scrolls: Oblivion (Skyrim had a vertical layout). These types of inventories occupy most of the screen space and are perfect to do things within the inventory, such as combining items, consuming them, and so.
(RPG Inventory skin)
The other inventory representation reminds more of old-school adventure games such as Day of the Tentacle, TellTale Game's Tales from the Borderlands or any Room Escape game. These types of inventories leave as much screen space as possible and allow to drag and drop items onto the screen. These inventories are more fit if you intend to add more interaction outside the inventory than inside.
(Adventure Inventory skin)
The only difference between these two inventories is their layout. Yes, seriously. We first created the RPG Inventory, we duplicated it and then, in less than 2 minutes, we had finished the Adventure Inventory.
An Inventory representation is composed of two prefabs:
- Inventory UI Prefab: Which is the actual representation of the inventory.
- Item UI Prefab: Which is the representation of an item that will be instantiated inside the Inventory UI Prefab.
We recommend that, if you want to create your own custom inventory, you duplicate any of the default prefabs we've set up.
Customizing how the Inventory looks like is very easy. Just drop the duplicated prefab in the scene and change the sprites and layouts in order to look like how you want it.
In the prefab root object, you'll see a component named
Inventory UI Manager. This script is responsible for managing the inventory's UI. Drag the
Scroll Rectof your prefab's item container inside the scroll field.
Currency Textfield is optional. This will update the
Textcomponent every time the currency amount the player has changes.
Floating Itemfield is used when an item is dragged around the inventory and is positioned below the cursor. You should leave this unchanged. If you feel the dragged item image is too small, you can modify the white sprite at the bottom of the inventory and make it bigger.
Voilá! That's all you need to know about customizing your inventory!
Customizing how the items appear is even easier than the inventory. To begin with, drop the duplicated prefab of the RPG Item in the items container of the duplicated prefab of the RPG Inventory (see the image below). That way, you'll have a clean view of how it will look like.
The main component here is the
Inventory UI Item. This scripts is responsible for showing how the item looks like. All its fields are optional, though it is recommended that you fill as much of them as possible.
For example, if you want to show the Name of the item, you can drag the
Textcomponent where name should appear and Bam! magic. The name will appear during gameplay in that component.
You can choose to show different properties of an Item:
- The sprite associated with this item
- The item's name
- The item's description
- The amount of items you have in the inventory
Don't forget to save your prefab (click Apply) and delete it from the scene view.
The Inventory modules comes packed with some extra components that will help you build the perfect user interface for your game, in case none of the templates work for you.
Since version 0.5.2 you can group items by type. For example, you might want to have your Equipment items in one tab and your Potions in another one.
In order to do so, you can use a component called
Items List, under
Game Creator/UIcomponent path.
(Items List component)
This component will display all items that belong to the ones selected in the Item Types dropdown menu and instantiate, for each matching item, an instance of the Prefab Item under the Container object.
You can change the type of items displayed at runtime using the Items List UI action.
Most PC or Mac games rely on drag and drop functionality to equip different objects, instead of using buttons. In order to to so with the Inventory module, you'll need to add an Equip Slot UI component on the image you want to use as the drop zone.
(Equip Slot UI component)
The Item Type field lets you select one single type of item, where the dropped item will be used for equipping.
The rest of the fields are used to give visual feedback to the user.