Skip to content

Adding a User Interface

Once a dialogue is started, you need an interface to display the speaker lines, and to provide the ability to advance the dialogue, by either simply continuing through lines, or making choices.

Creating a Widget Blueprint

The simplest way to provide a UI for your dialogue is to create a Widget Blueprint which implements the Blueprint interface "BP_SudsProDialogueWidgetInterface".

  1. In your Content Browser, click "Add" then find "User Interface", then "Widget Blueprint"
  2. When asked to pick a parent class, select "User Widget"
  3. Give it a name

Implementing BP_SudsProDialogueWidgetInterface

Implementing this interface provides the link between your widget and the dialogue. To do this:

  1. Open your new widget blueprint by double-clicking it.
  2. Click "Graph" in the top-right to go to the Event Graph View
  3. In the toolbar, click "Class Settings"
  4. In the Details tab, find the Interfaces section
  5. Under "Implemented Interfaces" click the "Add" drop-down
  6. Type "suds" in the search
  7. Find "BP_SudsProDialogueWidgetInterface" and select it Adding the widget interface

After you've done this, the implemented interfaces section will look like this:

Implementing BP_SudsProDialogueWidgetInterface

This interface provides the functions you need to implement in order to show a UI for the dialogue:

UI interface methods

  • Init Dialogue Widget is called when dialogue is started, so the UI should initialise itself and attach itself to the viewport. You get the dialogue instance here, as well as an indication of whether this dialogue should take over input (by default dialogue always takes over input, but scripts can turn this off)

  • Show Speaker Line in Widget is called when there's a new speaker line to display. At this point your UI should read the current line details and display them somehow, see Stepping Through Dialogue below.

  • Shutdown Dialogue Widget is called when the dialogue is over, and the UI should be torn down.

Configuring SUDS to use your widget

You configure the system to use your Widget in Project settings, under Plugins > SUDS Pro:

Project Settings

When you start dialogue, there's an optional "Ui Class" argument. You never need to supply this if you just want to use the Widget approach. However, there are more advanced options for UIs if you want, see Non-Widget UIs

Initialising Your Widget

On receiving the "Init Dialogue Widget" event, at a minimum you're going to want to add the widget to the viewport:

Initialise widget

In addition, your UI should respect the "Should Take Over Input" boolean, and change the player's input mode to reflect that. How exactly you do that depends on what input system you're using, but we've provided an example.

By default, dialogues assume that you'll be taking over the player's input, so that they're not moving the character around during the dialogue. However, you can change this default using the AllowPlayerInput variable.

Stepping Through Dialogue

Dialogue always pauses at speaker lines, and your UI will get a call to the previous "Show Speaker Line in Widget" event. From here, you will want to query the passed in Dialogue Instance for the following data, in order to display it to the player:

  • The speaker display name
  • The speech text
  • Whether there are choices, and if so what those choices are

For example:

Common data

"Is Simple Continue" is a useful method because it tells you whether there's any need to display choice buttons, or just a simple continue prompt. "Get Number of Choices" can return 1 and there still be text to display in that only choice button, sometimes, if the script is written that way.

If there are choices, you can iterate over them like this:

Choices

If there are no choices, you can progress the dialogue just by calling "Continue". Otherwise, you'll want to get the text of each choice and then when the player chooses one, you call "Choose" to progress:

Continue

Once dialogue is stepped with either one of these functions, it will either have ended, in which case the "Shutdown Dialogue Widget" will be called (see above), or it will have run through to the next speaker line, and "Show Speaker Line in Widget" will be called again. That's the loop, you just repeat the same thing again.

Tip: you can ask whether a choice has been taken before, using the "Has Choice Been Taken Previously" function. However, be aware that it relies on Localisation Text IDs if you want to be consistent when scripts are edited.

Example Project

Making a full UI is a bit too involved to describe here. To see a fully worked example, see the SUDS Pro Example Project.

Non-widget UIs

Skip this section if you just want to use User Widgets for your UI, you don't need it.

You might have noticed a couple of things we haven't talked about yet:

  • The "Ui Class" option in the start dialogue functions
  • The "Default UI Class" setting in Project Settings > Plugins > SUDS Pro

They both refer to the same thing, the former being a class you can specify explicitly when starting a particular dialogue, and the latter being the default class if this is left blank.

Usually, the "Default UI Class" is set to "BP_SudsProUiWidgetLink", which then communicates with a User Widget you specify, as described earlier.

But what if you don't want to use a User Widget? You can replace the "Default UI Class" with something else, derived from the USudsProUiLink class:

Project Settings

By implementing the methods of USudsProUiLink differently, you can implement any kind of UI you like, not just a User Widget based one.