If you’re an indie developer, you probably work a lot with text boxes. There’s a lot of fiddling around you can do: display them all at once vs. animate them, text speed, font, etc. There’s room for stylistic interpretation in all of these subjects, but some choices¹ will make your game seem unpolished.²

The biggest offender? Words jumping from one line to another while animating text.

Many indie games naively perform word wrapping, which causes text to reflow to the next line as the word is revealed. This mechanism provides a visual distraction while the user is trying to read.

To see how then naive approach looks compared to a proper approach, see the following example. Left click to animate text, right click to toggle wrapping.

Text jumping from one line to the next is jarring and will distract the reader.

Thankfully, if you’re using TextMesh Pro,³ this problem has essentially been solved for you. If you’re using a different text solution, like Unity’s built-in one, that has rich text support, it isn’t too bad. If you’re not, well, then you’re going to have to do a lot of math yourself.^{4 5}

Alternatively, of course, you can insert your newlines manually into all of your strings. If you have a few, this isn’t the most onerous approach, but it is error-prone and you’d need to redo it if you wanted to change the size of the font or text box.

TextMesh Pro

TextMesh Pro handles this for you. TMP_Text (and subclasses, like TextMeshProUGUI) have the maxVisibleCharacters property. All you have to do is set this to the number of characters to show, and it will handle the wrapping correctly for you. It’s easy! ⁶

IEnumerator UpdateText(TMP_Text textObj, String textToDisplay) {
    textObj.text = textToDisplay;
    textObj.maxVisibleCharacters = 0;
    while (textObj.maxVisibleCharacters < textObj.characterCount) {
        textObj.maxVisibleCharacters += 1;
        yield return new WaitForSeconds(0.1f);
    }
}

The above coroutine will animate in all characters, then exit. You’d probably want some sort of signal that the text box is done animating, as well as some mechanism for skipping past text boxes.

Rich Text Support

However, when I started out I didn’t know about that property, nor was I using TextMesh Pro. Instead, I was using Unity’s built-in mechanism.⁷ The following solution is also fairly easy, but it limits your options more than the previous solution.⁸

While you’re animating your characters, don’t truncate the string based on the number of visible characters. Instead, add a <color=#00000000> tag before the text that shouldn’t be rendered. The #00000000 is the hexadecimal representation of black with an alpha (opacity) of zero.

This way it will render the words correctly, as it will be laid out based on the entirety of the text. If you have tags in your text other than this one color tag, your approach will need to be more complicated, as it will need to correctly elide color tags in the invisible block and avoid splitting within tags.

IEnumerator UpdateText(Text textObj, String textToDisplay) {
    int visibleChars = 0;
    while (visibleChars < textToDisplay.Length) {
        visibleChars++;
        textObj.text = textToDisplay.Substring(0, visibleChars) 
            + "<color=#00000000>" 
            + textToDisplay.Substring(visibleChars);
        yield return new WaitForSeconds(0.1f);
    }
}

The invisible text tag will cause the rest of the text to not be rendered but be used for computing line widths, allowing for proper wrapping without having to do bounds calculation yourself.

Conclusion

If you’ve done it right, your text box should animate like the one at the top of the screen.

This small tweak will make your game feel more polished, whether you use text boxes often or infrequently. As long as you do this and have your text boxes skippable with text speed controls, text boxes probably won’t be the reason that people stop playing your game.⁹

If you’re looking for an example of a game knocking it out of the park when it comes to text box animations, check out the Ace Attorney series.