Dialogue UI Tutorial

(Click Here For Video Tutorial)

This tutorial demonstrates how to customize a dialogue UI. We'll start with the Basic Standard Dialogue UI template, reposition some elements, and apply textures.

Start

Step 1. To start, make a copy of DemoScene1 and open it. Assign the prefab Prefabs ► Standard UI Prefabs ► Templates ► Basic ► Basic Standard Dialogue UI to the Dialogue Manager's Display Settings → Dialogue UI field. When prompted, select Add Instance instead of Use Prefab. This will add an instance to the Dialogue Manager's Canvas. The UI looks like this:

dialogueUIBasic.png

The NPC Subtitle Panel is at the top, the PC Subtitle Panel is at the bottom, and the Response Menu Panel is centered at the bottom.

Alert Panel

Step 2. The Alert Panel is in the center of the screen. We'll customize this first. Inspect the Alert Panel. Set the Rect Transform to these values:

  • Anchor: Top Left
  • Position: (0, 0, 0)
  • Pivot: (0, 1) (upper left corner)

Set the Image to these values:

  • Source Image: Prefabs ► Art ► Textures ► Sci-fi ► Dialog_stripes
  • Color: 255,255,255,255

Set the Animator to these values:

  • Controller: Prefabs ► Art ► Animation ► Expanding Panel Animator Controller
dialogueUIAlertPanel.png

The Expanding Panel Animator Controller expands the panel to its full size. You could just as easily assign your own animator controller that plays a different animation such as sliding the panel onto the screen.

In the screenshot above, the Dialogue Panel was temporarily deactivated to make it easier to see the Alert Panel.

These settings give the Alert Panel a clean sci-fi look in the top left corner of the screen.

The Alert Panel is assigned to the dialogue UI's Alert UI Elements:

dialogueUIAlertPanelAssignments.png
  • Queue Alerts makes alert messages wait for their turn to display. If it's unticked, new messages will immediately override any currently-displayed message.
  • Wait For Hide Animation waits for the current message to finish the panel's hide animation before showing the next queued message. If it's unticked, the next message will be displayed in the panel without hiding and reshowing the panel between messages.

Next, we'll work on the Dialogue Panel's subtitle panels.

Subtitle Panels

Step 3. Activate the Dialogue Panel if you deactivated it. Inspect NPC Subtitle Panel. Set the Image to these values:

  • Source Image: Prefabs ► Art ► Textures ► Sci-fi ► Dialog_light
  • Color: 255,255,255,255

Set the Standard UI Subtitle Panel component's Visibility to Always From Start.

dialogueUISubtitlePanels1.png

Step 4. Apply the same settings to PC Subtitle Panel. At this point, with the Alert Panel and Response Menu Panel temporarily deactivated, your dialogue UI should look like this:

dialogueUISubtitlePanels2.png

Note that the Standard UI Subtitle Panel component is a separate component from Standard Dialogue UI. Unlike the Alert Panel, which is configured on the Standard Dialogue UI, you'll configure each subtitle panels on its own Standard UI Subtitle Panel and then assign it to the Standard Dialogue UI as shown below:

dialogueUISubtitlePanelAssignments.png

They don't even need to be children of the same Canvas. As long as they're assigned to the Standard Dialogue UI's Conversation UI Elements → Subtitle Panels list, the Standard Dialogue UI will be able to use them. Note that each panel has an element number, starting from 0 (zero). Actors can use a Dialogue Actor component to specify which subtitle panel their content should display in. If the actor doesn't have a Dialogue Actor component, or if the Dialogue Actor specifies to use the default subtitle panel, the actor will use the panel assigned to Default NPC Subtitle Panel or Default PC Subtitle Panel.

  • Allow Open Subtitle Panels On Start Conversation is an optimization option. By default, it's ticked; when a conversation starts, the Dialogue System will scan the entire conversation to identify all participants' subtitle panels. If any of these panels are configured to be visible Always From Start, it will open them. If you know that no panels will need to open from the start of the conversation, you can untick the checkbox to skip this process.

Each Standard UI Subtitle Panel component has several options:

dialogueUIStandardUISubtitlePanel.png

The UI Elements fields are where you'll assign the UI elements.

  • Use Animated Portraits enables support for animated portraits. This is an optimization option. If your actors don't use animated portraits (configured on their Dialogue Actor components), leave it unticked.
  • Accumulate Text appends new subtitles to the end of the subtitle text instead of replacing it.
  • Add Speaker Name and Add Speaker Name Format add the speaker's name to the subtitle text.

The Navigation settings control joystick and keyboard navigation.

  • First Selected will be selected on open when using a joystick or keyboard.
  • Focus Check Frequency is the frequency at which the panel will make sure that some UI element is selected so the player can navigate.
  • Refresh Selectables Frequency (if nonzero) refreshes the panel's internal cache of selectables that the player can navigate to. Set this to a nonzero value if selectables are dynamically added or removed while the panel is visible.

The Visibility settings control when and how the panel appears.

  • Visibility specifies when the panel should be visible.
  • Start State is the state that the panel should be in when the game starts.
  • If the panel has an Animator, the animation triggers are set when the panel is open (Show/Hide) and when it becomes the panel that's currently showing active content (Focus/Unfocus).

Last, we'll work on the Dialogue Panel's menu panel.

Menu Panel

Step 5. Let's put the response panel in the middle of the screen and omit the scroll rect. Move Response Button Template directly under Response Menu Panel, and delete the Scroll Rect and Scrollbar:

dialogueUIMenuPanel1.png

Step 6. Inspect the Response Menu Panel. Set the Rect Transform to these values:

  • Anchor: Middle Stretch
  • Pos Y: 0
  • Pivot: (0.5, 0)

Disable the Image.

Set the Animator's Controller to Expanding Panel Animator Controller.

Assign the Response Menu Panel to the Standard UI Menu Panel's Auto-Created Buttons → Button Template Holder:

dialogueUIMenuPanel2.png

Step 7. Inspect the Response Button Template. Set the Image to these values:

  • Source Image: Prefabs ► Art ► Textures ► Sci-fi ► Dialog_stripes
  • Color: 255,255,255,255

Set the Button component to these values:

  • Transition: Sprite Swap
  • Highlighted Sprite: Dialog_stripes_selected
  • Pressed & Disabled Sprite: Dialog_stripes

Set the Vertical Layout Group to these values to give the text a little more breathing room:

  • Top: 8
  • Bottom: 8
dialogueUIMenuPanel3.png

Your dialogue UI should now look similar to this:

dialogueUIMenuPanel4.png

Similarly to subtitle panels, the menu panel uses a separate Standard UI Menu Panel component that's assigned to the Standard Dialogue UI:

dialogueUIMenuPanelAssignments.png

Finishing Touches

Step 8. Since we're showing the PC Subtitle Panel, let's make sure conversations use it. Inspect the Dialogue Manager, tick Display Settings → Subtitle Settings → Show PC Subtitles During Line, and untick Skip PC Subtitle After Response Menu.

Then play your scene to see your custom UI:

dialogueUIFinal.png

The Standard Dialogue UI system supports many options not covered in this tutorial. For example, the WRPG UI accumulates text during the conversation so the player can scroll back to review old lines. The Bubble UI uses cartoon bubbles above the participants' heads.

The best way to start customizing your own dialogue UI is to experiment with the provided templates. Find one that works similarly to your desired design and customize it.

<< Tutorials