This is not going to be a full breakdown of every single widget found in the system, it is more of an overhead view, with a little bit more of a breakdown of the primary shared widgets used throughout this asset. Hopefully it is enough to get you started, and as more time becomes available I will likely expand on this chapter a bit more, based on the types of inquiries I am receiving through the support channels.

A breakdown of the UIs/ sub folders

Crafting/ - These are all the widgets related to crafting from the player and from workstations.

Currency/ - These are the widgets for the player’s currency window and widget.

Equipment/ - These are the widgets for the player’s equipment window and widget.

Hotbar/ - These are the widgets related to the hotbars.

Interact/ - This is where we store the interact notice widget.

Notifications/ - These are the item change notification widgets that spawn in the corner. This widget is added and positioned on our HUD manually.

Shared/ - These widgets are re-used by multiple systems. Included you will find all the really fun stuff like the item, the grid and the tooltip. You will also find the buyable slot window, context menus, draggable window, item filter, split stack, and all the custom dynamic data widgets in this folder.

Storage/ - This is where we store the player inventory, and the remote storage widgets. These two are added to the HUD manually.

Vendor/ - These are the widgets related to the vendor system.

Widget Window Overview

Each widget file (below) is contained inside of an instance of the Draggable Window widget. The Widget File is the one responsible for the actual content of the window.

UI_InventorySystemHUD

At the very base of the UIs/ folder you will find the UI_InventorySystemHUD. The HUD is used as the middle man for all of our different systems, it is added to our viewport through the AC_InventorySystem component.

It is responsible for creating, and managing the different draggable windows used by the widgets for each of our systems, as well as managing input and all the UI related sounds. We also use it as a parent to track the custom state for some of our system related widgets.

You can get a reference to the HUD at any time through the AC_InventorySystem component. Use the getHUD reference. See the working in blueprint chapter for an example.

How do I change the different sounds?

View the Sounds chapter to learn about setting the default and override sounds.

How do I stop it from controlling the mouse and input?

By default the system is designed to show the mouse and change the input mode to Game and UI when a UI is opened, then when all UIs are closed the mouse is hidden and input mode is switched back to Game.

To disable this system from making changes to the mouse and input set the canToggleMouse? to false on the AC_InventorySystem component you added to your player controller. You can find this boolean in the details panel under Configuration UI

UI_Item

The UI_Item widget found in the UIs/Shared/ folder is the widget used to render the contents of a slot in the item grid.

The UI_Item contains the slotId, and the reference to the source storage component can be obtained through the UI_Item’s myGrid variable, which is a reference to the UI_ItemGrid the UI_Item is currently added to.

This widget is also what we can drag to move the item from one slot to another, or one storage component to another. It is also the same widget we drop our dragging instance into to select the destination slot.

From the Graph of this widget you can expand the Drag and Drop and the Mouse function categories to see the methods related to dragging and clicking. The purpose of each of these methods is self explanatory based on the names.

In the previous version we had a unique widget for an empty slot, that is no longer the case. In this version the functionality is merged into the same UI_Item widget. You can check the isFilled? variable to see if an item is currently in the slot.

The buildItem function that runs on the construct is the one that sets up all the rendering of the item specific data.

We can also inject additional child widgets into the UI_Item based on our item’s data. View the dynamic data chapter to learn how to do this.

How big should I make my icons?

The demo content uses 64x64 transparent PNGs for item icons, this is because that is how big they will appear in the grid based on the default padding and sizing of the grid slots. If you are keeping the same size grid you should stick to the same sized icons.

If you are customizing the slot size of your item grids you will want to adjust your icon size to an exact fit. Use the calculator below to find the exact size for your PNG images:

UI_ItemGrid

The item grid UI_ItemGrid in the UIs/Shared/ folder is our grid that holds our UI_Items widgets.

We use the item grid to show the contents of our player inventory, bank, hotbars, equipment, and even remote storage containers and workstations.

Grids have a number of customizations that we can change, and we typically do so through the designer tab of the parent widget holding the container. Here is each of the variables available with each instance of a UI_ItemGrid:

I see a loading indicator on the item grid, but nothing is happening.

This loading indicator means it is waiting for a source to be assigned to it.

We associate what storage component is rendered through the specific item grid using the setSource function. Take a look at the construct script of the UI_PlayerInventory widget in our UIs/Storage/ folder to see how we use the setSource function.

You will need to make sure you give the system enough time to initialize and load before calling this function. So if you are setting the source during the begin play cycle, you will want to use a delay to run this call slightly later.

I am using the item grid in a custom widget, and it loads, but drag and drop doesn't work on the grid, it drops the items into the world instead.

This is because when you start to drag an item, the default system spawns a new widget to "catch" items when they are dropped outside of the draggable windows. This is to drop the item, which spawns it into the world. This happens because the new catcher widget is spawning above your widget containing the grid. To fix you will need to make sure your main widget containing the grid is added to the viewport with a ZOrder of 999. The catcher is set to 998 when you are dragging items. Alternatively you can disable this catcher inside the UI_InventorySystem HUD's onDragStart function.

Context Menu

The context menu UI_ContextMenu found in the UIs/Shared/ContextMenu/ by default was designed for the game pad. By holding the primary action button down (with an item selected) a context menu will be shown relative to that item.

The variable showContextMenuOnRightClick? on the AC_InventorySystem you added to the player controller can be found under the UIs Configuration section. By default this boolean is false, but if you would like to show the context menu for mouse and keyboard as well you would set this true.

How to create your own custom Context Menu Action

First open up the UI_ContextMenu widget and take a look at the contextMenuData array variable. This is the full list of all the possible actions we can show on the context menu. Each of which will only be shown after it passes a validation step against the item that initiated the request to show the context menu.

Each entry in this array contains an ID, Label, and Event. The ID is passed to the Event and used as an internal reference, they should be unique. The Label is the text we show on the context menu for our action to the player and the validation and execution of our action occurs through the Event.

The Event is controlled through a custom Object inherited from the BPO_ContextMenuEvent class found in the Blueprints/Objects/ folder. See the Blueprints/Objects/ContextMenuEvents/ to see all the ones included by default. To make your own, create a child of this BPO_ContextMenuEvent blueprint and override the isContextAvailable? and executeContext functions to create your own action.

The isContextAvailable? function is used as a validator to make sure the context menu action should be shown and made available for the Item. The executeContext function handles the actual functionality.

A reference to the InventorySystem, the UI_Item spawning the context menu, and ContextAction string are passed through to both of these functions.

After creating your custom context menu action using this object base and overriding the functions you will need to include it in the UI_ContextMenu widget’s ContextMenuData array variable.

It is also worth noting that the validation step actually occurs twice. Once when the context menu is shown, and again when the action is triggered. This way if for some reason the validation could fail between the time the action is shown and executed, it can be stopped.

Draggable Window

An instance of our draggable window is used for each of the displays for the different systems. In simple terms it is a custom wrapper or container for other widgets. We use these windows for things like our player inventory, remote storage, workstations, vendor, etc.

The UI_DraggableWindow widget can be found in the UIs/Shared/Draggable/ folder. Draggable windows are managed and attached through our UI_InventorySystemHUD.

Create a Custom Draggable Window

To create a draggable window with your own custom widgets you can call the createWindow function on the UI_InventorySystemHUD. As inputs you would provide the widget class, the Title, Icon, Override Sound Open and Override Sound Close. The output of this function will return a reference to the Draggable Window it created (as a normal widget). You will want to save this variable as you will need it when you want to show or hide your window.

This createWindow function is how the various systems show their custom UI window.

By default windows are not shown when they are created, this is so they can be made ready in the background before being shown to the player. If you want to show your widget when you create it you must call showWindow or toggleWindow using the output reference from your createWindow call.

It is important to note that when you drag the widget it spawns another copy of the window with your widget inside of it for the dragging visual. Because of this you will want to make sure you maintain your widgets inner-state (like if the player switches tabs) from the construct event, where you track and update that variable in a higher level (like the HUD). This is to properly maintain the visual state in the clone created by the drag event. It is kind of finicky to have to handle it this way, and if anyone knows a better solution I would love to know so I can update it.

How to show or hide a window I’ve created?

There are a number of different functions you can use, here is a summary of each:

toggleWindow Toggle the visibility of a window. If it is currently hidden, it will be shown, and vice versa.

showWindow Show the window.

showWindowIfHidden Only show the window if it is currently hidden.

hideWindow Hide the window.

hideWindowIfOpen Only hide the window if it is visible.

hideAllWindows Hide all currently visible windows.

hideAllWindowsExcluding Hide all current windows with the exception to the one provided as an input. It will not show the excluded window if it is already hidden.

How to get a reference to the window I’ve created?

This reference is provided to you when you create your window. You should save that where you need it. You can also call the getWindowOfClass function and provide your widget class.

How to get a reference to the inner-widget I added to the window?

You can get a reference to your inner-widget by casting the window reference to the UI_DraggableWindowWidget class, then from that output you can get the CurrentWindowWidget variable. This is your widget inside the window, cast it to your custom widget class to access the variables and methods within it.

How to check and see if any windows are currently opened

You can call the anyWindowsOpen? function on the HUD. If any window is found it will return true.

Item Filter Widget

By default, the item type filter is a set of buttons at the bottom right hand corner of our player's inventory and our remote storages. Clicking the buttons will make it easier to find those types of items in the linked grid.

The item filter widget UI_ItemGrid_Filter found in the UIs/Shared/GridFilter/ folder helps us identify specific types of items in our linked grid. We link the filter to the UI_Grid by selecting the UI_Grid instance in the designer and adding a linkedWidget, which we select this UI_ItemGrid_Filter widget.

You can customize what item types are shown in the filter with the itemsType variable from the designer tab. The icon is pulled from the data asset for the Item Type.

You can remove the Item Filter Widget from the designer tab, just make sure you also unlink it from the UI Item Grid.