How to Customize the HUD

Overview

Contrary to default Unreal Engine HUD which does not provide any standard user interface elements, World Builder project can be configured to use 2 variants of standard HUD user interfaces, customizing it, adding more elements to project’s version of the HUD or removing/modyfing elements to suit project needs.

Default World Builder map and HUD

Default HUD is desktop optimized and no longer in active development, it may be replaced by new HUD in one of the next World Builder versions.

New HUD is aiming for usability on both mobile and desktop devices, it is in active development. Below is the standard desktop view of the approchability HUD with click to move funtionality and the new chat system.

Click to move is not enabled by default, can be configured as needed.

(TODO additional documentation link required for configuration How to set up Approachability )

Approchability HUD layout

-Top-Left Text chat button - click/touch it to show text chat, Text chat offers desktop or mobile optimized view, optional party system and interaction with web chat (people outside of experience can chat with people inside experience and vice versa). Can be resized vertically (mobile variant) or both horizontally and vertically (desktop variant). Resizing it to smallest possible height will result in collapsing to button again.

More information about new chat system can be found here: In-and-out-experience chat

New chat system optionally supports party system, additional information here: Player Party System Legacy chat system documentation can be found here: In-experience chat

Currently connected players counter - simple information how many people are on the same server

-Top-Right Profile and settings button - click/touch it to enter game menu, where user can select profile image from his collection, change his user name and adjust certain experience settings

-Bottom-Center Device and objects quickbar - can be used to use various devices, use consumables or place objects in the world. When device or object is currently selected, additional information will appear in Bottom-Left corner of the HUD. More documentation about inventory / quickbar / devices can be found here: The Inventory System Devices reference:Existing devices

-Bottom-Right Emote-picker: Can be used directly or with keyboard shortcut ‘b' to open emote selection. Character will perform selected emote action and emote icon will appear above character. For some emotes, these icons will be visible to other players, for some emotes, only performed action is visible to other players without the icon itself.

More information about Emotes here: Emotes Microphone toggle: used to activate voice chat. On mobile version, toggle to enable/disable microphone, on desktop version, hold 'c’ while talking.

Certain aspects of the HUD are controlled using live config values, please see live config reference [HERE - TODO put documentation link]

Step-by-step HUD configuration

Initial list of steps to achieve hud customization, resulting in new assets in the project plugin for the existing hud extended with a new button that executes some arbitrary blueprint logic (i.e. prints something)

When changing HUD, first lets access world settings - they can be enabled there if there are not visible already

In the world settings look for “Game Mode” section

There are two ways to change HUD used here -

1. Change whole game mode which includes HUD, Player Controller class and others listed above

1. Create your own new game mode where you can customize every element

Here’s how to do that in more detail:

• Make your own game mode which is a copy of one of example ones

  

  Select a copy afterwards

  

  Rename the gamemode and select it from the list in your map

  • Repeat same operation with a HUD class, so you have your own where you can setup your layers

  • Lastly again make a copy of HUD WBP to have your own version to customize what players see when they enter the experience, to do that, first locate the currently used widget class

Game layer should be configured to new HUD widget blueprint (class before the change on the screenshot)

Once located in Content Browser, drag it to your plugin, make a copy, change the name and go back to settings pictured above to use new HUD widget blueprint.

Customizing HUD widget blueprint:

Provided new HUD has a lot of widgets, most of them are modular and can be removed without breaking the functionality of the HUD itself. Many of these have exposed settings like M2TextChatWindow in above example screenshot - on the right in the Details panel you can see Config section.

Adding a simple widget to the HUD:

Here M2 Standard Button was added anchored to middle right of the screen set up to be Action Button with “Click Me” label

On the bottom section of Details Pane of that button, there are exposed Events, here OnButtonClicked event was crated to show debug text on the screen when button is clicked

In non-click to move mode, to access mouse and buttons, use right click, after button is clicked, message should appear

If we want to build a more advanced widget, like a window appearing when this button is clicked, we can create a new widget blueprint extending J_JunoCoreWidget

After adding a few elements to the new widget:

Hooking up closing the widget:

Finally hooking up showing the window widget to “Click Me” button mentioned before:

Showing new widget in action: