UGC Browser

UI-Specific Plugin Modules

The mod.io UE Plugin also includes a series of additional modules which provide an embedded UGC browser and manager you can include in your own game.

Module Name	Description	Module Type
ModioUI	UI module containing all Slate and UMG widgets for the UE5 Common UI	Runtime
ModioUICore	Core UI module containing all shared entities for UE5 UIs	Runtime
ModioUIEditor	Editor details customization and asset factories for UE5 UI classes	Editor
MSDFSupport	Module containing material expression for rendering MSDF textures as pseudo-vectors	Runtime
MSDFSupportEditor	Importer for SVGs that will convert them to MSDF textures the UI can render	Editor

These modules are optional - you can remove them, the UI folder in the Plugin Content directory, and the associated entries in the modio.uplugin file, and the core functionality from the Modio module will remain available in your project.

UGC Browser

The Mod.io UE5 UI is built upon the concepts outlined in the Common UI.

How to Set Up Common UI for Project to Use Mod.io UE5 UI

Enable Common UI plugin

Open the Plugins window, and enable the Common UI plugin.

Game Viewport Client Class

Navigate to Project Settings -> Engine -> General Settings, and set the Game Viewport Client Class to CommonGameViewportClient.

Input Data

Go to Project Settings -> Game -> Common Input Settings, and set the Input Data to ModioInputData.

Alternatively, you can create your own Input Data class that inherits from CommonInputData and set that instead. However, you will need to reassign all the Input Actions to your custom ones in Project Settings -> Modio UI -> Modio Common UI Settings.

Platform Input

Within the same section (Project Settings -> Game -> Common Input Settings), locate the Platform Input property to specify the per-platform settings.

Organization

Foundation

This contains general widgets that are likely to be used across different UI elements and views. This is located in C++ and contains the following folders:

• Base: Contains base widgets that are intended to be inherited and mainly used as separate views. Examples include Activatable Widget, Base Mod Browser, Base Mod Details, etc.
• Components: Contains widgets that are likely to be attached to different views as components or building blocks. These widgets are mostly stylized within the Mod.io styling system. Examples include buttons, progress bars, scroll boxes, and more.

Default

This contains the default widgets used in the provided generic design. Many of these widgets are inherited from the Foundation->Base widgets, such as Activatable Widget. Some of these widgets can also be stylized separately, such as Collection View, Featured View, Generic Mod Entry, etc. You can inherit from these widgets as well if you want to maintain the same default functionality as implemented in C++, but modify the layout, positioning, and other details as needed.

Widget Styling

Each widget that supports Mod.io Common UI stylization has a property called Style (ModioStyle in C++) and a function SetStyle. The approach leverages the same mechanism as in Common UI but provides a wider range of widgets to be stylized, with a greater number of customization options.

The styles are primarily intended to be applied in the designer view in UMG. However, you can also call the function SetStyle directly for those widgets dynamically, and the widgets will be synchronized accordingly with the applied styles.

As mentioned earlier, the styling system leverages the same approach as presented in Common UI. This involves creating separate styling assets based on separately created styling classes and applying them to the needed UMG widgets. You can read more about this approach here.

For example, take a look at the Collection View (W_ModioCommonCollectionView), located at UI5/Default/Widgets/ModBrowser/Collection/W_ModioCommonCollectionView.uasset path. This is one of the default widgets that supports the Mod.io styling system. While the default widgets already come with pre-applied styles based on the default design, you have the flexibility to modify, inherit, customize, and more according to your needs.

Customizing Text and Input Actions

For most of the default widgets where the text and actions are available, they can be customized in the project settings. There are different sections for most of the widgets where you can specify your own text and input action details.

To alter the input keys themselves, navigate to the plugin’s UI5->Default->Platform->Input folder. Open the ModioInputActionDataTable and modify the corresponding input keys or actions. Note that removing or renaming actions can cause issues in widgets where they are bound, so it’s advisable to retain the same action names and rather change the input keys or add new actions as needed.

To change the key brushes associated with input keys, select the relevant platform folder within UI5->Default->Platform->Input (e.g., Xbox). Open the controller data asset (e.g., ModioCommonInput_Xbox) and make the necessary changes to the corresponding key brushes.

Manual Action Binding

The ModioCommonActivatableWidget, from which the majority of widgets in this UI inherit, provides several useful functions primarily intended for use in C++:

1. ListenForInputAction and ClearListeningInputActions: The former function listens for a specified input action and invokes a defined function upon the action’s triggering. The latter function clears the active listening action. Typically, ListenForInputAction is intended to be invoked during widget initialization, automatically binding the actions (BindInputActions) upon construction and unbinding them (UnbindInputActions) upon destruction. You can also manually call these functions based on your specific requirements.

2. BindInputActions and UnbindInputActions: These functions perform the binding and unbinding of input actions. When bAutoBindInputAction is set to true (which is the default value), these functions are automatically called during widget construction and destruction. If you prefer manual control over input action binding and unbinding, you can set bAutoBindInputAction to false and call these functions manually, as needed.

As an illustrative example, consider the straightforward UModioCommonEmailAuthView widget. This widget features a text box for users to input their email address, along with three buttons: Back, Submit, and Cancel. Here, the ListenForInputAction function is invoked during initialization, and no further action is required. The input actions are automatically bound upon widget construction and unbound upon destruction.

In contrast, there is a UModioCommonModEntryBase class, which is responsible for displaying mod entries. This class performs manual input action binding and unbinding. With bAutoBindInputAction set to false, the class calls BindInputActions and UnbindInputActions based on the mod entry’s selection state in the list. And the UModioCommonGenericModEntry class, which implements the default generic mod entry inherited from UModioCommonModEntryBase, calls ListenForInputAction and ClearListeningInputActions based on available options (e.g., subscribing, unsubscribing, opening mod details, etc.).

Here’s a code snippet to demonstrate the typical use case that is intended to be invoked during the widget’s initialization:

if (SubmitButton)
{
	ListenForInputAction(SubmitButton, AuthSettings->SubmitInputAction, AuthCodeSettings->SubmitButtonText, FOnModioCommonActivatableWidgetActionFiredFast::CreateWeakLambda(this, [this]() {
		if (OnSubmitClicked.IsBound()) OnSubmitClicked.Execute(GetInputText());
	});
}

Displaying the UGC Browser

The main UGC Browser widget is located at Modio/Content/UI5/Default/Widgets/ModBrowser/W_ModioCommonModBrowser. After the Plugin has been initialized, you can show the UGC Browser via a new UI-focused subsystem UModioUISubsystem using the function ShowModBrowserUIForPlayer(). Currently the UGC browser does not support being embedded inside your own UI hierarchy, so you must load it directly (for instance, from a button on your main menu).

note

When showing the UGC Browser, you can pass in a FOnModBrowserCloseRequested delegate. You can use this delegate first to check conditions before finally closing the browser, more details below in Closing the UGC Browser.

Example

Blueprint

From Blueprint, you can use the ShowModBrowserUIForPlayer node.

C++

// After you've called <<K2_InitializeAsync>> and the plugin is initialized successfully:

if (UModioUISubsystem* Subsystem = GEngine->GetEngineSubsystem<UModioUISubsystem>())
{
    if (UWorld* CurrentWorld = GetWorld())
    {
        if (APlayerController* PC = CurrentWorld->GetFirstPlayerController())
        {
            // Create and bind a delegate to be invoked when the browser is closed
            FOnModBrowserCloseRequested OnBrowserCloseRequestedDelegate;
            // OnModBrowserCloseRequested needs to be marked UFUNCTION()
            OnBrowserCloseRequestedDelegate.BindDynamic(this, &ASomeActor::OnModBrowserCloseRequested);

            // Get a reference to the UGC browser implementation (this will be exposed in the UI Settings object
            // in a future release)
            FSoftClassPath MenuClassReference =
                "/modio/UI/Browser/Views/ModioModBrowserWidget.ModioModBrowserWidget_C";
            UClass* ReferencedClass = MenuClassReference.ResolveClass();
            if (ReferencedClass)
            {
                // Request the browser widget be instantiated and displayed
                UModioMenu* MenuWidget =
                    Subsystem->ShowModBrowserUIForPlayer(ReferencedClass, PC, OnBrowserCloseRequestedDelegate);
                if (MenuWidget)
                {
                    // Focus the user on the browser
                    UWidgetBlueprintLibrary::SetInputMode_UIOnlyEx(PC, MenuWidget);
                }
            }
        }
    }
}

Closing the UGC Browser

The UGC Browser can currently be closed from within the Quick Access tab - accessed by via the user profile icon at the top right of the window - and clicking on the 'Main Game Menu' button. This widget is located at /Modio/Content/UI5/Default/Widgets/QuickAccess/W_ModioCommonQuickAccessTabView, containing a MainGameMenuButton button, the input action for which can be customized in:

Project Settings -> Modio Common UI Settings -> QuickAccess -> Quick Access Params -> MainGameMenuInputAction

note

As mentioned in the Displaying the UGC Browser section a FOnModBrowserCloseRequested delegate is passed in, which is what is being called by the back button above.

The UGC Browser can be closed by calling CloseModBrowserUI() on the ModioUISubsystem, or conditionally after receiving the FOnModBrowserCloseRequested delegate callback.

Example

Blueprint

From Blueprint, you can use the CloseModBrowserUI node to manually close the UGC browser.

Or to perform the same logic being done with the back button, use ExecuteOnModBrowserCloseRequestedDelegate and then handle that callback to finally close the UI as above.

C++

if (UModioUISubsystem* Subsystem = GEngine->GetEngineSubsystem<UModioUISubsystem>())
{
    Subsystem->CloseModBrowserUI();
}

Or to perform the same logic being done with the back button, use ExecuteOnModBrowserCloseRequestedDelegate and then handle that callback to finally close the UI as above.

if (UModioUISubsystem* Subsystem = GEngine->GetEngineSubsystem<UModioUISubsystem>())
{
    Subsystem->ExecuteOnModBrowserCloseRequestedDelegate();
}