Unity TMPro Typing Effect

Question

I have my text aligned to the center-middle, which is why I i use the visibility of the characters instead of appending letter by letter to the text. My problem now is, that once the second line starts, the first line moves slightly up and I do not understand why.

 private IEnumerator AnimateTypingEffect()
    {
        descriptionText.maxVisibleCharacters = 0;

        // Gradually reveal the characters
        for (int i = 0; i <= descriptionText.text.Length; i++)
        {
            descriptionText.maxVisibleCharacters = i;
            yield return new WaitForSeconds(textSpeed);
        }
    }

The text is already there, every position of the words is clear and the writing occurs from left to right despite my alignment, which is how i want it to be.I just do not want the line to move but rather be static, and no i can not set the alignment to top or bottom, because the descriptionText is variable, so sometimtes it only has 1 line and sometimes 2 or 3, but I still want it to be always in the center of the screen. Can someone help me out with that?

Think about this logically. If you have 1 line of text and want it vertically centered, the center is the middle of that line of text. When you have 2 lines of text, the center is between the lines of text. 3 lines will be centered at the 2nd line of text. etc. So it is unclear what you want. If it is 2 lines, do you want the center point where 2 lines would be centered ie. underneath the first line of text, or push the 2nd line down as if it was centered on the first line? — hijinxbassist, Jun 20 '23 at 16:55
i unserstand this totally, but all i do in my coroutine is hiding the characters, they are still there just invisible so the text should already be centered, or at least that is what i thought — ZBR, Jun 24 '23 at 16:02

score 0 · Answer 1 · answered Jun 24 '23 at 19:10

The reason this happens is because of how maxVisibleCharacters works. This property excludes characters when creating the geometry, which causes the lines to "collapse" since there is nothing there anymore.

You can instead set the alpha of the text you want hidden to zero by using the rich text feature. This way all the characters remain in place and are hidden instead of removed.

The idea here is to add a clear alpha tag between the visible and hidden text. You can specify the alpha by using a hex value between #00 and #FF, in the form of <alpha=#00>. Now all characters after this tag will be invisible, and the proper geometry will be created.

private IEnumerator TypingRoutine()
{
    var text = descriptionText.text;
    var newText = new System.Text.StringBuilder();
    var clearText = "<alpha=#00>";
    
    for (int i = 1; i < text.Length; i++)
    {
        newText.Clear();
        newText.Append(text.Substring(0, i));
        newText.Append(clearText);
        newText.Append(text.Substring(i));

        descriptionText.text = newText.ToString();

        yield return new WaitForSeconds(textSpeed);
    }

    descriptionText.text = text;
}

thank you so much now it actually works as it should ^^ – ZBR Jun 26 '23 at 07:25 — ZBR, Jun 26 '23 at 07:25

Unity TMPro Typing Effect

1 Answers1