Page 1 of 1

Multi-actor speech dialogues with chat bubbles

Posted: Mon Feb 27, 2023 4:16 pm
by snilldog
Is there an easy way to set something like this up using Dialogue System?

Where multiple actors in a scene will speak (with the user clicking anywhere on the screen to proceed once the dialogue finishes, unless prompted with a choice).

Image

I understand I can have a dialogue between two or more characters with the window in one place, but I want the chat bubbles to appear above each character's head when they speak.

Or I could have multiple actors with individual dialogue and have them send each other events when dialogue completes, but that breaks up dialogue into separate trees which is confusing to follow.

Basically I'm looking for a way to set up a multi-actor sequence with chat bubbles above actor heads in a single sequence.

Edit: I was able to get something like this working with the Bubble Subtitle Example, but I have two issues:
  • I would like to remove the 'Continue' button to FastForward, but still make it so that if the player clicks anywhere, the fastforward still occurs.
  • Is it possible to have characters move around the scene and play animations inbetween dialogue entries? I know the cutscene tutorial showed how to make a character play an animation - but I'm also interested in moving characters around. (Edit: I found that there are MoveTo sequencer commands, so I believe that solves that problem.)

Re: Multi-actor speech dialogues with chat bubbles

Posted: Mon Feb 27, 2023 8:49 pm
by Tony Li
Hi,

For the continue button: Make your bubble subtitle panel's continue button transparent (color > alpha set to zero) and size 0x0. Add a UIButtonKeyTrigger component to it, and set the Key to "Mouse 0".

For moving around: You can use MoveTo() commands, or your own custom commands, or Unity Timeline or SLATE. For example, you can set up a timeline that animates and moves the character, and use the Timeline() sequencer command to play it. However, if it's just a single move and animate you might find it simpler to use MoveTo() and AnimatorPlay() sequencer commands.

If you want the bubbles' tails to better follow the character, you can take a look at the Lively Chat Bubbles integration or the example bubble in the Feel + Text Animator + Dialogue System demo scene.

Re: Multi-actor speech dialogues with chat bubbles

Posted: Tue Feb 28, 2023 3:01 am
by snilldog
Thank you so much. I actually have Feel and TextAnimator so this is great. Is there a way I can easily add portraits to the side of the speech bubble?

I'm a little confused about how to best configure it with the layout settings given that the text expands.

Re: Multi-actor speech dialogues with chat bubbles

Posted: Tue Feb 28, 2023 8:02 am
by Tony Li
Hi,

The second part of How To: Show Overhead Bubble Text explains how to limit with the width of the chat bubble so it doesn't expand too wide.

You can absolutely add portrait images to your chat bubbles. The Dialogue UI Tutorials explain how to add elements such as portrait images to subtitle panels. The video shows a screen space panel, but the same applies to world space chat bubbles, too.

Re: Multi-actor speech dialogues with chat bubbles

Posted: Tue Feb 28, 2023 2:28 pm
by snilldog
Thanks so much. It looks pretty good now.

Image

My only problem is:
  • Using a 3D World Space, the bubble is rendered at different sizes depending on the distance from the camera. Is there some way to make the size consistent?
  • The bubble is not constrained by the screen size. So it can pop up outside the camera view.
I looked into using Lively Chat Bubbles and those work pretty well, but I like being able to use TMP for TextAnimator and Feel.

Edit: I did find the screen space bubble overlay example with the UIFollowObject, which seems to work well, but it doesn't seem to properly align when the resolution is changed.

Sorry, I am relatively new to this.

Re: Multi-actor speech dialogues with chat bubbles

Posted: Tue Feb 28, 2023 3:33 pm
by Tony Li
Hi,

If you want bubbles to have constant sizes regardless of distance from the camera, you can switch to screen space UIs like in the Dialogue System Extras page's UI Smooth Follow example (direct download). It doesn't take care of keeping the entire bubble within the screen bounds (that's still a to-do item; if I recall correctly it just ensures the center point is onscreen), but you can write a bit of code to do that, such as in this StackOverflow answer.