Dialog with photo (UI question)

Announcements, support questions, and discussion for the Dialogue System.
Post Reply
nicmar
Posts: 133
Joined: Wed Aug 21, 2019 2:39 am

Dialog with photo (UI question)

Post by nicmar »

Hi!
This is basically a Unity UI question, but since it's related to a dialog setup that I think should be common, I'm hoping you could help me here.

What I want is a dialog with text that fills the bubble that autoexpands, and if I have a portrait, it will take 120 pixels space, and the text will take the rest. It should have a min-height, so the photo isn't cut off when the text is short.

The arrow in the bottom left should always be in the bottom right of the box. (It indicates click to continue)

When I resize the "Text container" (the blue one) as the GIF shows, the bubble resizes correctly, but i'm not getting the text to autofit inside of that. Unity gives me a warning when I put a Content size fitter inside "Text container", and it also behaves weirdly.

This is how I set it up, which seemed logical, but it doesn't quite work:

- Bubble (Horizontal layout group, control child size: width, Child force expand: Height + Content size fitter: H: Unconstrained, B: Preferred size)
-- Portrait container (Layout element, min height: 120, preferred width: 120)
--- Portrait (Image with pos Y -10 to move it down slightly)
-- Text container (Layout element, Flexible width: 1)
--- Vertical (Vertical layout group, control child size: width+height, Child force expand: Width + Content size fitter: H: Unconstrained, B: Preferred size)
---- Name
---- Text
---- Button (Layout element: Ignore layout)

Thank you for any ideas! :)

Image
Working on SpaceChef - A wacky open world space western, featuring a chef with nothing to loose, after he loses everything.. ;) Follow our work on @BlueGooGames.
User avatar
Tony Li
Posts: 22049
Joined: Thu Jul 18, 2013 1:27 pm

Re: Dialog with photo (UI question)

Post by Tony Li »

Hi,

The Bubble Template Standard Bark UI prefab is basically set up that way, except it doesn't have a portrait image or name, and the bubble image in the Dialogue System package was accidentally exported without its 9-slice info. (The 9-slice info is fixed in version 2.2.17.)

Here's an example with the fixed bubble image:

DS_BarkBubbleWithPortrait_2021-05-27.unitypackage

It looks like this:

barkBubble.png
barkBubble.png (55.67 KiB) Viewed 392 times

Note that it uses a world space canvas with a maximum width. If the text is longer than will fit, it will word-wrap when it hits the canvas's max width.
nicmar
Posts: 133
Joined: Wed Aug 21, 2019 2:39 am

Re: Dialog with photo (UI question)

Post by nicmar »

Oh thanks, I will check that out! :)
Working on SpaceChef - A wacky open world space western, featuring a chef with nothing to loose, after he loses everything.. ;) Follow our work on @BlueGooGames.
Post Reply