Subtitle boxes appear at full size, then fill with text?

MartynEm

Dear all,

I've been experimenting for a while with unity UI speech bubbles that change size based on the length of the text line they display. By default, if the "scroll subtitle text" feature of AC is enabled, these bubbles scale up as they are filled with text, but ideally the effect I want to create is one where the bubble appears at it's full (eventual) size, and then the scrolling text fills it.

Has anyone achieved a similar effect, and if so, how?

ChrisIceBox

This can be done with a (simple) custom script that records the "final" speech text when it begins - and then displays that text with an invisible colour (i.e. no alpha) in the same place as the visible text, so that the UI resizes itself to the whole text to begin with:

using AC;
using UnityEngine;
using UnityEngine.UI;

public class SpeechBubbleDummyText : MonoBehaviour
{

    public Text dummyTextBox;
    public Canvas canvas;

    private void OnEnable ()
    {
        if (KickStarter.playerMenus == null) return;

        Menu menu = KickStarter.playerMenus.GetMenuWithCanvas (canvas);
        if (menu != null && menu.speech != null)
        {
            dummyTextBox.text = menu.speech.FullText;
        }
    }

}

Create a "dummy" Text box and attach this to it, assigning the Inspector fields. When the speech kicks in and the UI turns on, this should kick in and update the dummy text - which you can then restyle to make invisible but still affect the UI's size.

MartynEm

I've plugged this in, and it doesn't seem to be working - I'm wondering if it's to do with Unity UI's parenting priority stuff. My hierarchy looks like:

Canvas (assigned in the dummy text script inspector)

• Panel 1 (max size for the speech bubble, the rect. transform I link to AC)
• • Panel 2 (the bubble itself that resizes)
• --Dummy Text (with the script on)
• --Text (the real one)

With this setup, the bubble expands as AC scrolls in the text as usual. Do you think the two panel setup is confusing it perhaps?

Thanks always for your help Chris, the support for AC really can't be beat.

ChrisIceBox

First things first: is the script actually setting the Dummy Text box correctly? I forgot to mention that you'll need Duplicate for each line? checked in your Menu's properties.

If it is (just make it temporarily visible to check), then it'll just be a case of configuring your Unity UI prefab.

You'll want to look into make your "Content Size Fitter" component (that resizes the bubble) react to the Dummy Text box. This can be a bit fiddly, so it'd be best to consult Unity's own docs on this component's usage.

MartynEm

It doesn't seem to be! Making the dummy text box visible just results in the placeholder text in the dummy text box being displayed right next to the real text line.

To clarify, the SpeechBubbleDummyText script should be on the dummy text component, not on the real text component, and the real text component is the one linked to ACs subtitle line?

MartynEm

Update: Putting SpeechBubbleDummyText on the "real text" box makes the script behave. I'm using a Horizontal Layout group to resize the bubble, not a content size fitter, and it seems to be that refusing to let the dummy and real text boxes occupy the same space causing the problem ...

ChrisIceBox

The location of the component shouldn't matter - so long as its part of the UI prefab's hierarchy and the Inspector fields are assigned.

Still, working now?

MartynEm

As far as I can tell this method hinges on my being able to place two dynamically sized text boxes on top of one another, and this doesn't seem to be supported by any of Unity UIs layout options (that do the resizing). I'm currently wondering whether I can set the real text box size from the dummy text, but all roads lead to broken at this point.

ChrisIceBox

I'm not sure I follow. The "real" text box should be able to sit in parallel to the dynamic objects in the Hierarchy. To my mind, you'd be looking at something like:

• Canvas root
• • Real text
• • Resizing Bubble
• • • Dummy text

MartynEm

The problem I was wrestling with was that the horizontal layout group component I was using to control the resizing bubble wanted the dummy text and the real text to sit next to one another - I used a layout element set to ignore to position the real text inside the dummy text's bubble, essentially achieving the exact same thing you suggested there. Thanks!

Next objective: Read the speaker's scale to flip the tail of the speech bubble to match the player's facing (I'm using the wiki's own SUC Sprite Flipping script). Any thoughts from anyone following along are greatly appreciated.

Thanks for all of your help so far!

ChrisIceBox

This can be used in the OnEnable function above to determine the character's facing direction:

int direction = (menu.speech.GetSpeakingCharacter ().GetSpriteDirectionInt ();

MartynEm

Thanks Chris! I'd found my way to checking the player's direction but this was the line I needed.

We'd like to thank you in the credits for all your help in making our game when it materialises later this year: Is Chris Burton your preferred name for things like this?

ChrisIceBox

Certainly is - thanks!

MartynEm

The next step in this saga is doing the same with the conversation menu, I'm trying to replicate:

int direction = (menu.speech.GetSpeakingCharacter ().GetSpriteDirectionInt ();

but with getting the direction of the character associated with the active conversation choice. I'm digging through the scripting guide, but any hint would surely speed my non-speedy progress ...

ChrisIceBox

What do you mean by "active conversation choice"? Would each option in a Conversation relate to a different character, or do you mean the character you're having a conversation with?

MartynEm

In this case I'm using the conversation menus to show the things that the player can ask about - a place, a character, an item etc ... so the menu is styled as coming from the player, in the same way a speech bubble does. That wasn't very clear at all, sorry!

Essentially I'm trying to "GetSpeakingCharacter" on the player, so I can flip the tail on the speech bubble to face them just as I'm doing for subtitles menu. In this case, I don't think AC formally associates a conversation with a speaker or the game object that it theoretically comes from ...

ChrisIceBox

You can use KickStarter.player to get a direct reference to the Player character.

If you want to associate different dialogue options with different characters, you'd need to hook into the OnClickConversation custom event and record a script variable by referring to the chosen option's ID.

Claudio

Hi, i'm interested too in this, but once i try to attach the script i get a compile error:
You are trying to save a Prefab that contains the script 'script', which does not derive from MonoBehaviour. This is not allowed.
Please change the script to derive from MonoBehaviour or remove it from the GameObject 'dummyTextBox'.
UnityEngine.GUIUtility:ProcessEvent (int,intptr,bool&)

ChrisIceBox

Make sure that your script's filename matches the name of the class - in the above case, SpeechBubbleDummyText.

Since this thread began, you can also get this behaviour from the "UI template: Speech bubble" template from the Downloads page - though it requires the use of Text Mesh Pro.

Claudio

thanks!

Claudio

Thanks to your help, almost achieved the result. Only missing thing, the panel resize is not affected by the DummyText. Working on it