3.1 A simple Dialog Widget

Creating a Custom Dialog Widget

This guide will walk you through creating a standard Dialog Widget (UI) that can display text, speaker names, avatars, and handle player input.

Step 1: Create the Widget

Action	Details
	1. Right-click in your Content Browser. 2. Select User Interface -> Widget Blueprint. 3. Choose your parent class: UserWidget: Standard choice. Good for almost all cases. CommonActivatableWidget: Choose this only if you are using the 'CommonUI' plugin and need complex gamepad navigation support.

Step 2: Implement the Interface

For the Dialog System to communicate with your new Widget (e.g., to tell it "Here is the text to show"), you must implement the BDC Interface.

1. Open your Widget and switch to the Graph View (top right corner).
2. Click on Class Settings in the toolbar.
3. In the Details Panel, look for Implemented Interfaces.
4. Click Add and search for: BDC_DialogBackend_InterfaceUI.

Once added, you will see a new category in your Interfaces list (My Blueprint panel) containing events like OnDialogUpdated and OnDialogStarted.

Step 3: Designing the Layout

Go to the Designer View. A basic Dialog Widget typically needs the following elements:

Element	Recommended UMG Type	Description
The Message	RichTextBlock	Displays the actual dialog text. Using RichText is highly recommended to support effects like <shake> or colors.
Speaker Name	RichTextBlock	Displays the name of the character talking.
Avatar	Image	Displays the texture/portrait of the speaker.
Options Container	VerticalBox or ScrollBox	A container where you will spawn buttons when the player needs to make a choice.
Continue Button	Button	A large invisible button covering the text area (or the whole screen) to let players click to "Next".

Step 4: Scripting the Logic (Events)

Back in the Graph View, double-click the Interface functions in the "My Blueprint" panel to implement them.

1. OnDialogStarted

When it fires: Immediately when the dialog begins.
What to do:

• Play an "Open" animation (Fade In).
• Clear any dummy text from your Designer view.

2. OnDialogUpdated

When it fires: Every time the dialog advances to a new node. This is the heart of your widget.
What to do:
The event provides a CurrentData struct. Break this struct to access:

• SpeakerName: Set your Speaker Name TextBlock.
• Message: Set your Message RichTextBlock.
• AvatarImage: Set your Avatar Image brush.
• MessageSound: Play this sound (using PlaySound2D).

Handling Options:
Inside OnDialogUpdated, use the function GetAvailableOptions (from BDC Library). If it returns true:
1. Hide the "Continue Button".
2. Loop through the options array and create a button for each one in your Options Container.
If it returns false, ensure your "Continue Button" is visible and focused.

3. OnDialogFinished

When it fires: When the conversation ends.
What to do:

• Play a "Close" animation.

Step 5: Interaction (Continuing & Choosing)

Clicking "Next"

On your "Continue Button" OnClicked event, verify if options are currently displayed. If no options are visible, call the function:

BDC_Dialog_Library::InjectContinue

This signals the subsystem to advance to the next node manually.

Selecting an Option

On your dynamically created Option Buttons, when clicked, call:

BDC_Dialog_Library::SelectOption(Index)

Pass the index of the option (0 for the first button, 1 for the second, etc.).