Create the Inventory UI

Create a new Widget Blueprint based on NinjaInventoryItemWidget.

Design the widget, making sure that you have a valid Image Component for the icon and a Text Component for the quantity. Mark these component as a variables.

Go to the Graph and, in the PreConstruct event, hiding components that are not shown by default, marking them as collapsed.

Create a new Blueprint Function, SetIcon, to receive the Icon and set the texture to the correct component. This function will receive a Texture2D object.

Create a new Blueprint Function, SetStack, to receive the Quantity and set the value to the correct component. This function will receive an Integer value.

Back to the Widget Designer, add the Item User Interface and Item Stack viewmodels. Configure their Creation Type to Create Instance.

Add two View Bindings, mapping the Icon property from the User Interface Viewmodel to the SetIcon function, and Stack Size property from the Item Stack Viewmodel to the SetStack function.

Create a new Widget Blueprint based on NinjaInventoryContainerWidget.

Click the root element in the widget and set the Container Data to the Primary Container and set the Item Widget Class as the Item Widget created in the previous step.

Design the widget as you like, making sure that you have a valid Named Slot labeled ContainerViewSlot. In this Named Slot, add an Inventory Container Border, and finally, inside the Container Border, add the Item Widget created in the previous step.

note

Container Border

A Container Border is a good component choice, when you only want to represent a single item. Usually the case for Equipment Slots.

Add the Inventory Items View Model, set it to be instantiated when the widget is created, and bind it to the RefreshItems function.

note

Refresh Items Function

This function is provided by the base Container Widget and will refresh items as needed. You can also create your own function and call RefreshItems in there, if you need additional logic.

Create a new Widget Blueprint based on NinjaInventoryContainerWidget.

Repeat the same tasks from the previous step, but set the Container Data to the Secondary Container.

Create a new Widget Blueprint based on NinjaInventoryContainerWidget.

Click the root element in the widget and set the Container Data to the Backpack Container and set the Item Widget Class as the Item Widget created in the previous step.

Design the widget as you like, making sure that you have a valid Named Slot labeled ContainerViewSlot. In this Named Slot, add an Inventory Container Box. Enable Fill Empty Slots. Depending on your design, you might want to also set Wrap Size and Explicit Wrap Size.

note

Container Box

A Container Box is a good component choice, when you want to represent items in a grid.

Add the Inventory Items View Model, set it to be instantiated when the widget is created, and bind it to the RefreshItems function.

Create a new Widget Blueprint based on NinjaInventoryWindowWidget.

Design the widget as you like, making sure that you incorporate all widgets previously created: Primary Weapon, Secondary Weapon and Backpack. Also add a Text Component for the title that will be obtained from the Layout Data Asset.

Add the Inventory Layout View Model, set it to be instantiated when the widget is created, and bind the Display Name property to the Title Text.

In the Blueprint Graph, create a Show Inventory event that will set the Input Mode to Menu and show the mouse cursor. For now, this will always be called during the Construct event. The Hide Inventory function reverts that setting.

note

Handling Input Mode

For now, the Inventory Widget will be constantly shown and the mouse will be captured in the Menu mode, so it won't be received by the gameplay.

In the following sections, we'll continue to work on the Inventory Interface, until we configure the inputs to be better integrated with the game.

Press Play and your Inventory Window should be displayed.

Your Primary Weapon Slot should display the icon from the Sword and Shield item.

The Secondary Weapon Slot should be empty.

The Backpack should be empty, but it should display all empty positions as the pre-defined item widget.

Create an Input Action for the Inventory Window and add a Pressed trigger to it.

Add the Input Action to the Input Mapping Context, mapping it to appropriate keys such as I and Gamepad Special Right.

Add a new entry to the Input Setup, with a HUD: Send UI Event handler. Set the correct Input Action and the UI.Action.Inventory Gameplay Tag.

Add HUDEventDispatcherInterface to your Gameplay HUD.

Convert your Gameplay Widget instance, in the Gameplay HUD, to a variable.

Implement the HandleInputEvent function, so it invokes the same function (interface message call) in the Gameplay Widget Instance.

Add HUDEventDispatcherInterface to your Gameplay Widget.

In your Construct event, set the Inventory Window visibility to be collapsed.

Create a new function, ToggleInventoryWindow that will adjust the Inventory Window visibility and set the correct Input Mode.

Implement the HandleInputEvent function from the new interface, routing the Inventory Event to the new function.

Open your Inventory Window Widget and remove all visibility-related features created in this guide.

Press Play and your Inventory Window should be hidden.

Press your Inventory Key and your Inventory Window should appear. Your mouse cursor should appear as well.

Press your Inventory Key again and your Inventory Window should disappear, along with the mouse cursor.