Suggestion: Speech Bubbles UI 💬

kloot

It would be really nice if AC had a built in Unity UI for using speech bubbles (for subtitles).

It seems quite a popular ask here on the forum and getting positioning and sizing to work properly seems to be no small feat

ChrisIceBox

My understanding is that it's mainly a styling topic - what is the main issue beyond using AC's "Above Speaking Character" position option, in conjunction with Unity's content resizing components?

kloot

Yes, this is totally a styling topic. But one that seems surprisingly hard to pull off and fairly common in these types of games.
Challenges:

• Getting the size of the bubble to expand to a specified max while still collapsing together for shorter texts
• Having the bubble flow upwards until it reaches the top of the screen, then if necessary flow downwards, below the character's speaker position
• Making sure it's always visible while still aiming the "tip" part of the bubble towards the character's speaker position

ChrisIceBox

It still sounds like a case of using Unity's UI components to handle the bulk of things, with a script to handle some of the finer details e.g. the tip position.

Do you have mockup images / screenshots to show more clearly the intent? This may be suited for a downloadable template.

kloot

This repro illustrates a size related problem that actually occurs using both regular subtitles (when shown above speaker) and when using speech bubbles:
https://1drv.ms/u/s!Amz_vh8OYDX3vOJYmY6arLBUNMiHcQ?e=Un98th

Play to see the problem in action

ChrisIceBox

I'll take a look.

ChrisIceBox

TextMeshPro has a convenient GetPreferredValues, which can be used to get the width/height of a TMPro component given a string. This can be used to work out if the RectTransform boundary needs to be shunk or not. If so, you can then also have AC update the Menu's position to avoid a momentary glitching while it resizes:

using UnityEngine;
using TMPro;

namespace AC
{

    public class DynamicPanelWidth : MonoBehaviour
    {

        [SerializeField] private RectTransform rectTransform = null;
        [SerializeField] private TextMeshProUGUI textBox = null;
        [SerializeField] private Canvas canvas = null;
        [SerializeField] private float maxWidth = 350f;
        [SerializeField] private float minWidth = 50f;


        private void LateUpdate ()
        {
            float preferredWidth = textBox.GetPreferredValues (textBox.text).x;
            float panelWidth = Mathf.Min (preferredWidth, maxWidth);
            panelWidth = Mathf.Max (panelWidth, minWidth);

            if (rectTransform.sizeDelta.x != panelWidth)
            {
                rectTransform.sizeDelta = new Vector2 (panelWidth, rectTransform.sizeDelta.y);

                Menu subsMenu = KickStarter.playerMenus.GetMenuWithCanvas (canvas);
                KickStarter.playerMenus.UpdateMenuPosition (subsMenu, Vector2.zero);
            }
        }

    }

}

kloot

Ah, Interesting solution - thanks!

MartynEm

While I'm not a fraction of the coder that @kloot is*, the speech bubbles for our game are still a little more primitive than I'd like, and they took literally months and help from @ChrisIceBox to get up and running, so I'd def. reiterate the suggestion for a template, or maybe a tutorial or wiki entry.

*or of any coder, really

ChrisIceBox

A template would be most appropriate, IMO. In what way does yours differ from the above, @MartynEm?