[HOWTO] How To: Show Overhead Conversation Bubble Text

[Tony Li]

Just reposting these steps for folks who want to know how to show dialogue above each character's head:

1. Add this prefab as a child GameObject of your NPC:
Plugins / Pixel Crushers / Dialogue System / Prefabs / Standard UI Prefabs / Template / Bubble / Bubble Template Standard UI Subtitle Panel

2. Add a Dialogue Actor component to your NPC.

• Set the Actor dropdown to the NPC's actor.
• Change Dialogue UI Settings > Subtitle Panel Number to Custom.
• Assign the NPC's child Bubble Template Standard UI Subtitle Panel to the Custom Subtitle Panel field.

dialogueActorCustomSubtitlePanelInstance.png (132.37 KiB) Viewed 1295 times

By adding an instance to the scene as a child of NPC, you can see it to be able to customize it in relation to your NPC. However, you can assign a prefab to the Custom Subtitle Panel field instead of adding a scene instance if you prefer:

dialogueActorCustomSubtitlePanel.png (138.76 KiB) Viewed 1295 times

Note: Your Dialogue Manager's main dialogue UI should be a Standard Dialogue UI. (The dialogue UI that's assigned to the Diaogue Manager by default is a Standard Dialogue UI.)

basicStandardDialogueUI.png (60.54 KiB) Viewed 1295 times

The Basic Standard Dialogue UI only shows UI elements when a subtitle panel or menu panel is visible. If your regular dialogue UI shows UI elements -- such as a UI frame image on the Dialogue Panel GameObject -- when subtitle panels and menu panels are not visible, then add an Override Dialogue UI component to the actor's GameObject, and assign Basic Standard Dialogue UI to it.

The Dialogue System Extras page has some example scenes. (Search for "BubbleSubtitleExample".)

Alternatively, use the Lively Chat Bubbles integration.

Related:

• How To: Make World Space Canvas Appear On Top Of Everything Else
• How To: Change Subtitle Bubble Image

[Tony Li]

Typewriter Effect
To make the text type out character by character, add a UnityUITypewriterEffect if you're using UI Text or a TextMeshProTypewriterEffect if you're using TextMeshProUGUI:

bubbleTextTypewriter.png (42.07 KiB) Viewed 51 times

bubbleTmpTypewriter.png (48.86 KiB) Viewed 51 times

How To Constrain Width
To constrain a UI to a maximum width, you can use settings similar to what's below.

First, assume the UI hierarchy is:

Code: Select all

Canvas (e.g., Bubble Template Standard UI Subtitle Panel)
    Main Panel
        Bubble Panel
            Text

On Main Panel:

• Set Rect Transform to bottom left, Pivot (0,0), Width=500 (the max width allowed for bubbles)
• Added Content Size Fitter > Horizontal=Unconstrained, Vertical=Preferred
• Added Vertical Layout Group > Control Child Size ticked, others unticked

Setting the Rect Transform to bottom left is necessary if you're using the UISmoothFollow script included in the UI Smooth Follow example on the Dialogue System Extras page. If you're not using that script, you don't have to set the anchor to bottom left.

On Bubble Panel:

• Vertical Layout Group > Control Child Size ticked, others unticked
• Remove the Content Size Fitter if present

Make sure any scene instances of the UI haven't overridden the Main Panel's RectTransform values (in particular the Width value).

[zzzz]

hello Tony, thanks for the help as always

i followed the instructions in this post but the subtitle panel being used is the DialogueSystemController's default one, for some reason.

attached you will find how my the DialogueActor on my NPC is setup.

what should I be looking at, assuming all is configured correctly in the DialogueActor?

thanks

[Tony Li]

Hi,

i followed the instructions in this post but the subtitle panel being used is the DialogueSystemController's default one, for some reason.

Make sure the GameObject with this Dialogue Actor component is being used as the GameObject for "crow". See: Character GameObject Assignments. Also see: Logging & Debugging for instructions to see which GameObjects are being used for the active conversation.