Jan 27, 2018
Better text reveals (Unity code inside)
Tutorial texts, dialogs, user interfaces... Revealing text (often known as typewriter effect) is present in most games yet is often overlooked. I have been working on a text-based project recently and I wanted to share some tips based on this experience.
The naive approach
When facing this problem for the first time, I'm sure most programmers do something very similar to this:
Which produces this effect:
It could work as a first step, but we can make it better!
Step 1: Ignore spaces
This is the easiest problem to solve but also the most subtle in this example. In longer texts it can be quite noticeable and annoying: Notice how the rhythm of the words appearing is not completely smooth? It seems there are small pauses that make the effect less clean.
Spaces are the culprits; they are invisible and create unnecessary pauses when "revealed". Two extra lines in the previous code fix the problem:
And this is how it looks:
The change is not so obvious in this short text and with the lower framerate of these GIFs, but it does make a difference.
Step 2: Words shouldn't jump between lines
Notice how the word "little" jumps from the first to the second line? This is a more serious problem but also harder to fix... And many games decide to keep it like that.
I think the fix is worth the effort, especially if your game has a lot of text. It's easier to read feels more professional:
See how words don't jump between lines anymore? Our code knows the full text from the beginning and we can make it smart enough that words appear right where they should from the first to the last letter.
There are other ways to achieve this but in Unity we can simply use the HTML text feature. The picture below explains the trick; you should be able to figure out the code.
Step 3: Fade in
Do this when you want to go the extra mile:
Letters start appearing slowly to draw the attention of the reader. Then, they start fading in more quickly until it starts slowing down to signal that the paragraph is ending. It's almost like words are caressing you from the screen...
Again, there are probably better ways to do this but the HTML text trick works here as well and in our project doesn't seem to affect performance in a noticeable way. This picture shows how it works in detail:
Writing the code for this can be a bit trickier, even more, if you want to support additional features like skipping the animation when the reader impatiently taps on the screen. I decided to provide the source code from my latest project to make it easier for you:
Feel free to use it and improve it if needed.
Why all the effort?
Some of this tips may not be needed depending on the kind of game you are creating.
In my case, all of this was needed to create La Última Flor de Lazlar, an immersive story composed mostly of text. Revealing text in a nice and appealing way was one of the keys to making it look great.
I needed to work on these details with two goals in mind: Text should be revealed in a way that helps reading and it should convey a bit of the bigger-than-life, almost magical tone of the story.
This is how it looks in-game:
Follow me on Twitter if you like what I write :)