Page 1 of 1

[HOWTO] How To: Show Overhead Conversation Bubble Text

Posted: Wed May 29, 2019 10:01 am
by 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
dialogueActorCustomSubtitlePanelInstance.png (132.37 KiB) Viewed 1331 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
dialogueActorCustomSubtitlePanel.png (138.76 KiB) Viewed 1331 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
basicStandardDialogueUI.png (60.54 KiB) Viewed 1331 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:

Re: [HOWTO] How To: Overhead Conversation Bubble Text

Posted: Mon Jan 03, 2022 9:14 pm
by 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
bubbleTextTypewriter.png (42.07 KiB) Viewed 87 times
bubbleTmpTypewriter.png
bubbleTmpTypewriter.png (48.86 KiB) Viewed 87 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).

Re: [HOWTO] How To: Show Overhead Conversation Bubble Text

Posted: Sat Feb 24, 2024 1:22 pm
by 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

Re: [HOWTO] How To: Show Overhead Conversation Bubble Text

Posted: Sat Feb 24, 2024 3:30 pm
by Tony Li
Hi,
zzzz wrote: Sat Feb 24, 2024 1:22 pmi 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.