Quickbar & Inventory Tabs

The tabbed quickbar is an Alpha feature, and can be turned off by setting the live config flag Inventory.UseTabbedQuickbar to false.

Introduction

In-game representation of the tabbed quickbar

The quickbar is a generic shortcut interface for the items a user may hold. The tabbed interface categorizes the items and adapts to gameplay changes, while allowing projects to easily customize it.

Main features include:

• Item filtering per-tab

• Changing tab visibility based on runtime conditions

• Managing tab items through an inventory view

WBP_TabbedQuickbarUI, which holds a WBP_QuickbarTabManager. The manager handles quickbar visibility and widget construction.

Widget overview

1. A quickbar tab (a M2_StandardButtonWidget, with the button data defined in a M2_QuickbarTabBase)

2. A quickbar wrapper (containing a M2_ItemQuickbarWidget)

3. A quickbar slot widget (created and managed by the M2_ItemQuickbarWidget)

4. A non-quickbar button (the Inventory button in this case)

5. A generic item control container (an Overlay inside WBP_AdditionalQuickbarWidgets populated with the current item's controls)

Details on how to customize (1) Quickbar tabs are under Adding/removing available tabs & Creating a new tab type

Details on how to customize the rest of the widgets are under Customizing the quickbar's appearance

Customization

Adding/removing available tabs

1. Create or find the M2M_TabbedQuickbarComponent on your Player Character Morpheus Actor blueprint

2. With the component selected, find the Tabs Data array under the M2-Inventory category, and assign the desired tab classes. (See Creating a new tab type to make a new tab class)

The TabsData array on this component will be referenced by WBP_QuickbarTabManager when constructing the required widgets.

An example of the TabsData array on BPM_Origin_PlayerCharacter

Creating a new tab type

Create a BP inheriting from M2_QuickbarTabBase

WBP_Origin_EquipTab shown as an example

1. Assign the Quickbar Wrapper class

   💡 If using a different quickbar view from the given wrapper, this can be overriden with "Quickbar View Class" (eg. Emote tab overrides the EquipmentQuickbarWidget's QuickbarView to allow only emote-type items) For more details on this, see Quickbar Views

2. Fill in the custom button data

   💡 Ensure that Common | Id has an unique value - this will be used by the WBP_QuickbarTabManager to identify this tab

3. Set miscellaneous toggles

   1. Show In Inventory - if true, this tab will have a category in the inventory as well

   2. Force Hide - if true, the tab will be ignored and won't be shown in the quickbar or the inventory screen (see also Adding/removing available tabs -> Force-hiding tabs)

4. Optional - Runtime visibility conditions

   You can conditionally modify a tab's visibility by overriding the CanDisplay function. The UpdateVisibility function on the tab must be called whenever the display conditions might've changed.

   💡 The best practice here is to keep all visibility logic in the tab's BP, as UpdateVisiblity will check if CanDisplay is returning a different value, and call the appropriate delegates afterwards 💡 When wishing to control tab visibility with external logic, additional variables can be created on the tab and modified with setter functions. Ensure that you call UpdateVisibility after these variables change! 💡 See BP_Origin_DirectorTab as an example of complex visibility checks (roles and live config)

Customizing the quickbar's appearance

Config variables available in WBP_TabbedQuickbarUI (as of March 2024):

Default quickbar appearance when all options are visible

• Force Hide Inventory View - hides the inventory button (right side of quickbar)

• Force Hide Place View - hides the place mode tab

• Force Hide Unequip View - hides the unequip button (left side of quickbar)

• Force Hide Separator Left/Right - hides the vertical bars on each side of the quickbar

• Force Hide Quickbar Background - hides the background on the quickbar

• Quickbar Background Color - sets the quickbar's background color (does not affect the tab button colors!)

• Hidden/Visible Separator Size - used for the separator's spacings when visible/hidden

These variables should be set through the equivalent variables on the WBP_ItemManagement widget in the HUD

Changing the item slot appearance in quickbar wrapper widgets

1. Extend from WBP_EquipmentQuickbarWidget or WBP_PlaceModeQuickbarWidget

2. Replace OverrideQuickbarSlotClass with your own slot class

3. Use your new quickbar wrapper in your M2_QuickbarTabBase BPs, and include this tab in the QuickbarTabManager's TabsData

Change the position of the item controls

1. Create a blueprint extending from M2_AdditionalQuickbarWidgets

2. Ensure this widget will always have these overlays: ControlsContainer, FullscreenWidgetContainer. These will be referenced by the quickbar wrappers and their M2_ItemQuickbarWidgets

   💡 Additional widgets can be placed around these overlays (eg. in WBP_AdditionalQuickbarWidgets, WBP_PersistentInfoWidget is used for items with persistent effects)

3. Replace the AdditionalQuickbarWidgets in your TabbedQuickbarUI with the new version