Ninja Bear Studio Plugins Help

Create the Inventory UI

Let's create the first part of the Inventory UI, so it can display the weapon slots and the backpack. These will be built using the base Inventory Widgets and UMG Viewmodels.

Main Interface Elements

First, we need to create all main widgets that represent our current Inventory Layout: Primary and Secondary weapons, the backpack for all other items, and the Inventory Window itself.

Create the Item Widget

  1. Create a new Widget Blueprint based on NinjaInventoryItemWidget.

  2. 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.

    Item Widget Icon

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

    Item Widget Pre-Construct

  4. 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.

    Item Widget Set Icon Function

  5. 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.

    Item Widget Set Stack Function

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

  7. 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.

    Item Widget Viewmodel

Create the widget for the primary weapon

  1. Create a new Widget Blueprint based on NinjaInventoryContainerWidget.

  2. 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.

    Primary Weapon Settings

  3. 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.

    Primary Weapon Slot Setup

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

    Primary Weapon Binding

Create the widget for the secondary weapon

  1. Create a new Widget Blueprint based on NinjaInventoryContainerWidget.

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

Create the Backpack Widget

  1. Create a new Widget Blueprint based on NinjaInventoryContainerWidget.

  2. 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.

    Backpack Settings

  3. 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.

    Backpack Slot Setup

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

Create the Inventory Window Widget

  1. Create a new Widget Blueprint based on NinjaInventoryWindowWidget.

  2. 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.

    Inventory Window Designer

  3. 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.

    Inventory Window Title Binding

  4. 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.

    Inventory Window Graph

Update the Gameplay Widget

  • Open the Gameplay Widget previously created for the Player Attributes and add the Inventory Widget, organizing it whenever you see fit.

    Gameplay Widget

Test everything

  1. Press Play and your Inventory Window should be displayed.

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

  3. The Secondary Weapon Slot should be empty.

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

Test the Setup

Inventory Window Visibility

Configure Input Actions and Input Handlers

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

    Inventory Input Action

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

    Input Mapping Context

  3. 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.

    Input Setup

Handle interface events in the HUD

  1. Add HUDEventDispatcherInterface to your Gameplay HUD.

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

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

Handle interface events in the Widget

  1. Add HUDEventDispatcherInterface to your Gameplay Widget.

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

    Construct Event

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

    Toggle Inventory Window

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

    Inventory Event

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

Test everything

  1. Press Play and your Inventory Window should be hidden.

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

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

Drag and Drop and Tooltips

With the main Inventory UI being shown, it's time to add special features, such as dragging stored items to perform operations and adding a tooltip for additional item details.

Create the Arrow Item

    Configure the quality table

      Add the Quality Fragment to items

        Create the Drag and Drop Widget

          Create the Tooltip Widget

            Update the Item Widget

              Test everything

                Last modified: 29 December 2024
                Configure the InventoryCredits