🖥️UI

In MSquared, our core offering is intended to be fairly light on UI elements, just adding the minimum required to showcase our features. The expectation is that downstream projects can add UI to their own project however they like, in the same flows as native Unreal (we make no changes to Unreal's default flow).

The M2Example content, such as the ExampleMaphas some basic UI in it, which can be used as a reference or starting point for downstream projects.

Setting up your HUD

If you want a starting point for adding UI to your project, see how it is done in the Example content:

• A HUD class is defined in the chosen game mode

  
• This HUD class spawns a user widget that contains your HUD elements

  
• This "HUD widget" contains a canvas panel with all the on-screen widgets added, positioned and anchored to the screen how they are intended to show up in-game.

  • (Individual widgets can then be collapsed when they are meant to be hidden, either through the HUD widget, or managed by the widget itself)

    

There are two common approaches to designing a HUD, either by having all the widgets added to a central HUD widget, or having each widget get individually added to the viewport/player screen (or some combination of the two approaches). The benefit of the former is that all your widgets are in one place, making it easier, but the trade-off is that the widget can get very bloated if you have a lot of UI elements. It is up to the project to determine what setup is the best fit for them.

A note on ZOrder

If you want to achieve "Layers" in your project, i.e. having certain widgets appear in front of other widgets, the easiest way is by setting the ZOrder. Widgets with a higher ZOrder will be drawn on top of widgets with a lower ZOrder, which you can use to e.g. make sure your settings menu appears on top of your normal in-game UI.

NOTE: It is recommended to be consistent whether you are using AddToPlayerScreen or AddToViewport. Both can be used, but the "player screen" is always beneath the "viewport", regardless of the ZOrder used for each.

Making a "Settings Menu"

WBP_M2Example_SettingsMenu is an example of a simple settings menu, triggered from the HUD widget, and shows how to modify a number of in-game settings. This includes:

• Graphics settings: See User Settings
• Volume settings: See Volume Settings
• Arbitrary custom settings: Using the OnCustomSettingChanged, GetCustomSetting and SetCustomSetting helpers in J_GameUserSettings, you can save arbitrary custom string values to named settings. These will then persist across plays of the game for the same client (e.g. if you close the application/PIE then reopen it, the values will remain the same).

  

Other Useful Links

• See Streaming & Multiplatform (and GFN on mobile) for some additional details on setting up UI that handles mobile (including streaming to mobile) correctly

• See M2Extras: Skins System for a simple example of achieving "UI skins" for a project, i.e. having the same UI appear differently in different circumstances.