Skip to main content

UI

Narrative Navigator comes with several UI widgets to handle displaying the navigation info to the player. It can be added to your existing UI to keep it nice and clean.

Creating your HUD

To set up a simple HUD, open your Content Drawer, right click -> user interface -> Widget Blueprint and name this WBP_HUD.

note

If you already have an existing HUD, add the below widgets to that. It's much better for performance than having multiple HUD's rendering.

Open the HUD and add the widgets you require.

Navigator comes with a series of widgets that you can use to customise your experience. These will be covered in more detail later in the docs.

Compass

This is the compass that sits normally at the top or bottom of the screen. Used as a replacement for a map by showing you what's in the direction you are facing.

compass.webp

Add the widget WBP_Navigator_Compass. Some good default details are:

NameValue
Anchors0.5, 0, 0.5, 0
Position X0
Position Y0
Size X600
Size Y60
Alignment0.5, 0

Minimap

This is the minimap that sits in the corner and gives the player a map surrounding their location.

minimap.webp

Add the widget WBP_Navigator_Map_Minimap. Some good default details are:

NameValue
Anchors1, 1, 1, 1
Position X0
Position Y0
Size X250
Size Y250
Alignment1, 1

World map

This is the world map widget that gives players access to view the entire map. It is not commonly added to the HUD but instead using the OpenMenu option via a key press instead.

introduction.webp

You do not need to add this as a widget. We will open this via an event later.

Screen Space markers

Screen space markers are the visible markers on screen in the player's viewport. They show in the 3d world.

screen-space-markers.webp

Add the widget WBP_Navigator_ScreenSpaceMarkers. This needs to be set to full screen and lowest priority order (put it at the top of your Hierarchy list).

HUD display

Finally, go back into your Player Controller, and on begin play, create the widget, promote it to a variable then add it to the viewport.