Setup ItemContainer

The easiest way to setup an ItemContainer is by duplicating an existing container and change the properties like name and visuals. In this example we will go over creating an ItemContainer from scratch.

Creating a Canvas

Create a new canvas inside Unity: GameObject > UI > Canvas.

This will automatically create an Event System, that is required when working with UI.

Create an empty game object as a child of the canvas and setup the size an rename it to Inventory. To create an empty game object, select the canvas in the Hierarchy > Context Click > Create Empty.

Customize Visuals

Now you can customize the visuals of the inventory. For example you can create a background image as a child of the inventory game object or a header.

Add ItemContainer component

In the next step we need to attach the ItemContainer component to our inventory game object. Select the Inventory game object and attach the ItemContainer component from the Component > Scripts > DevionGames.InventorySystem > ItemContainer or click the Add Component button in the Inspector.

Add an ItemCollection component to be able to store items.

Field Description
Name          Enter a name of the widget to be able to find it using WidgetUtility.Find(Name);
Priority

Organize your widgets by priority. ItemContainer.AddItem(name, item); will try to add the item to the container with highest priority first.

Key Code Setup a KeyCode to show and hide the widget.
Ease Type Animation easing type.
Duration The duration of the animation.
Show Sound         SoundClip to play when the widget is shown.
Close Sound SoundClip to play when the widget is closing.
Focus Brings the widget to front.
Deactivate On Close                                      Disables the GameObject when the widget is closed. Increases performance because the widget does not need to redraw when the canvas is dirty.
Use Button Which button  should be used for item use events?
Dynamic Container Creates slots at runtime.
Use Reference Set this container to be a referenced container.
Mostly used for actionbars.
Can Drag In Can the user drag items into this container?
Can Drag Out Can the items be dragged out of this container?
Can Drop Items Set if the items can be dropped from this container to world.
Can Reference Items Set if you can reference items from this container.
Can Sell Items Set if the items can be sold from this container.
Can Use Items Set if the items can be used from inside this container.
Use Context Menu Should Context Menu be used? Requires the Context Menu
widget.
Show Tooltips Should tooltips be displayed?
Move Used Items Move used items to the given containers.

Creating Slots

Now we can create a grid for the slots. Create a new game object as a child of the inventory and attach the GridLayoutGroup component to it through the Component > Layout > Grid Layout Group. The Cell Size is the size of your slots.

In the next step we can create the slots for our container. Create a Button through selecting the grid game object in the Hierarchy > Context Click > UI > Button and attach the ItemSlot component to the button through the Component > Scripts > DevionGames.InventorySystem > ItemSlot.

You can now create optionally child components for the ItemSlot. The icon image will be set when an item is added to the slot, you can define the icon of the item in the Item Editor. The overlay field is a filled image, which will be updated with the cooldown progress. When creating the child components don’t forget to reference them in the ItemSlot.

Now that your slot is finished you can duplicate it to have multiple slots in the container.

Create Item
Pickup Items