TextTyper Component: a Solution for AutoText in Unity

We couldn’t have characters talk in Sparklite without having them print out characters letter by letter to a text box (we call this AutoText or TextTyping). Unity doesn’t have support for text typing natively, so we had to find one. There are several open source solutions out there (unity wiki, reddit), but they all have the same bug with word wraps that drove us nuts. So we created our own plugin called Unity-TextTyper that solves the kinks in the existing text typers and made it open source. You can download the UnityPackage or code from the repository on Github.

TextTyper Features

TextTyper component provides the following major features:

• Define Text Speed Per Character: “Mayday! <delay=0.25>S.O.S.</delay>”
• uGUI Rich Text Tags: <b>,<i>,<size>,<color>,…
• Additional delay for punctuation
• Skip to end
• OnComplete Callback
• OnCharacterPrinted Callback (for audio)

TextTyper leverages the default uGUI text component, so it can only do what native UI can do.

The Naive Approach

The goal is to make a string of text print one character at a time to a UI widget, at some given speed. The most common way you will find people solve this is to set the display string in the Text widget one character at a time in a Coroutine. Something like this:

var textWidget = this.GetComponent<Text> ();
for(int printIndex = 0; printIndex < this.desiredString.Length; ++printIndex)
{
    textWidget.text = this.desiredString.Substring(0, printIndex);
    yield return new WaitForSeconds(0.05f);
}

This approach is intuitive and straightforward but it also has one major flaw; when printing long words at the end of a line, the word will partially print before wrapping to the next line, like so:

Word wrapping bug in naive text-typing approach

There is another related issue where specifying a larger rich text size will resize the layout as it types.

Our Fix

So in order to fix the wrap and sizing issues we essentially need to have the character of the string in their final position before revealing them. An easy way to do that is to use Unity’s rich text support to alpha-out the “unprinted” characters. As we advance through the text, we simply shift up the alpha color tag. Here is a look under the hood:

Side by side comparison of the two methods of printing character by character

I do want to mention that this fix does make my programmer Spidey senses tingle a little. It relies a bit on how Unity decides to render fully translucent text, and it also requires that RichText is enabled on the Text Components. I believe I could have used a TextGenerator to do this, but lack of documentation left me doing a lot of trial and error, so I gave up. If anyone has solved it using a TextGenerator, I would love to hear how and/or you could submit a PR to the repo.

The Code

The core of our text typer is a coroutine that’s triggered via the TypeText method. The coroutine has the following steps:

• Check next character to see if it’s the start of a Rich Text tag
• If It’s a tag, parse it and apply it. Right now “applying” a tag just means modifying the print delay, but other tags could be added. Add it to a list of tags that need to be closed (because we have not yet reached the corresponding closing tag in our string). Move to next character and repeat
• If it’s not a tag, print it
• Wait for the print delay
• Check if we are complete

The tool also uses RichTextTag.cs, a class that’s used to help with parsing.

There are a few details I left out, but this should give you enough to start reading through the code if you want to know more.

How to Help

As always, thanks for reading! If you want to help us make Sparklite a reality or support our open source tools, here are some things you can do.

• Use our TextTyper tool or any of our other open source tools
• Contribute and/or report issues
• Share this post and our tools with the community
• Follow the Sparklite newsletter below or this blog