Better Text Typeout in Unity

Text typeout, or the “typewriter effect,” is a popular way to spruce up text delivery in games. It’s pretty simple to add and can be done in just a few lines of code. The common Unity implementation probably looks something like this:

    public Text label;
    public float timeBetweenCharacters = 0.15f;
    private IEnumerator TypeoutCoroutine(string content)
    {
        var index = 0;
        while (index < content.Length)
        {
            index++;

            this.label.text = content.Substring(0, index);

            yield return new WaitForSeconds(this.timeBetweenCharacters);
        }
    }

At some interval, advance a counter up to the length of the total content to display. Assign a subsection of our content, from 0 to the current index, to the Text component’s Text property. Repeat until the whole string is displayed.

But while this definitely gets us a working typewriter effect, it’s not perfect. Words that expand past the bounds of the Text component while animating will suddenly jump to the next line.

This mid-word wrapping simply looks wrong. Continue reading