Inventory Widgets
The Inventory System provides base widgets that can be used to create a User Interface. They are divided into the following categories:
Abstractions: Base widgets used for actual Inventory Widgets.
Inventory Window: A widget that represents the root of the Inventory UI.
Container Views: Multiple ways to represent containers in the UI.
Item View: Represents items in the UI.
Item Tooltip: A specialized item representation that follows a specific contract.
Drop Zone: An area that detects item drop operations to create item pickups.
Anatomy of an Inventory UI
Let's break down what goes under the hood for a complete Inventory Window. The following image shows a traditional UI, with some notes. Let's break those down to understand what the system has to offer.
Inventory Window
The Inventory Window is the base for the entire Inventory UI. This is a Common Activatable Widget, which is part of the Common UI Library.
This means that the Inventory Window must be properly Activated and Deactivated, placing it correctly in the active widget hierarchy and navigation.
The Inventory Window widget has the following responsibilities:
Wait for the owner's inventory to initialize and bind to it.
Broadcast the Inventory to all relevant widgets in the Widget Tree.
Store the Tooltip Controller responsible for managing the Reusable Tooltip.
The Inventory Window is represented by NinjaInventoryWindowWidget.
Container View
Container Views are areas of the UI that represent a specific Container Instance, which is defined by its Container Data. They have the following responsibilities:
Receive the Inventory Manager from the Inventory Window.
Obtain the correct Container Instance and bind to its delegates.
Create and configure new Item Views as needed, using the appropriate widget class.
Initialize their viewmodels with the container that will be watched.
Provide a method to Refresh Items when the viewmodel updates.
Host certain components that will actually render the container.
The Container View is represented by NinjaInventoryContainerWidget.
Border Container
A Border Container only allows a single widget as its content, which makes it ideal for Equipment Slots. The content is usually an Item View widget.
The Border Container is represented by NinjaInventoryContainerBorderWidget.
Box Container
A Box Container renders its content in a grid, making it ideal for larger containers, such as a Backpack. It can also render empty items.
The Box Container is represented by NinjaInventoryContainerBoxWidget.
List Container
A List Container renders its content in a list, making it useful for large scrollable datasets, such as Vendors and Loot.
Item View
The Item View represents an actual Item, stored in a Container. The view is usually rendered by the Container View, as per a component's request. It has the following responsibilities:
Bind to Viewmodels to expose any relevant details about the item.
Handle Drag and Drop events that will trigger Inventory Operations.
Handle Focus events that will render or dismiss the Reusable Tooltip.
Determine if they can be Focused based on whether they have an Item or not.
It is represented by the UNinjaInventoryItemWidget.
Reusable Tooltip
The Item Tooltip is instantiated only once by the Inventory Window and managed by the Tooltip Controller. It is an optional feature, but very helpful if you want to have tooltips for your Item View, as it will:
Piggyback on the native Tooltip functionality.
Reuse the same widget for all item views, avoiding unnecessary instances for both widgets and viewmodels.
It is represented by NinjaInventoryTooltipWidget.
Drop Zone
Not shown in the image above, but also useful when handling Drop operations, the Drop Zone Widget is a transparent area that should cover any regions in the UI that allows players to drop items and generate Pickups.
It is represented by NinjaInventoryDropZoneWidget.