Hello, everyone!

Today I bring you a quick tutorial on how to make the writing text effect in Unity like those you can see in Visual Novels for example by using UniRx. This is something pretty similar to what I am doing for Summer Snow Day or that you can see in the dialogue system of A Toad’s Trip. So let’s start!

Get UniRx

First of all, you will need to get UniRx in order to do achieve what we are going to do in this example. In order to do that, you can get it from UniRx’s GitHub page.

“UniRx (Reactive Extensions for Unity) is a reimplementation of the .NET Reactive Extensions. The Official Rx implementation is great but doesn’t work on Unity and has issues with iOS IL2CPP compatibility. This library fixes those issues and adds some specific utilities for Unity.”

There are other ways to do what I am going to show you, like using coroutines, but I got used to using UniRx more than coroutines so that’s why I am doing it with UniRx. I also recommend UniRx for doing a lot of other things if you are interested you should probably check it out!

Setting up the scene

First of all, we are going to set up a Scene and add a TextMeshPro GUI Component. You can use the standard component or show your text in another way by I guess this is the most common one and the most efficient way to do it.

Apart from this, we are going to create a new MonoBehaviour script and add it somewhere so we can reference it.

Writting the actual code

Now let’s jump into the code. First, we are going to create a method to actually show the text. So, in order to do that we are going to write the following:

public void ShowDialogueWith(string text)
{
        _currentDialogue = text;
        ClearText();
        if(text.Length > 0)
                _dialogueDisposable = Observable.Interval(TimeSpan.FromSeconds(pauseSecondsBetweenCharacters))
                    .Subscribe(_ => AddNewCharacter());
}

First, we are going to save the whole text in a field:

private string _currentDialogue;

Then we are going to have a method to clear our text. This will be useful in case we already had a text and we need to start with a new one.

private void ClearText()
{
        dialogueText.text = "";
}

And then we are going to create the observable using an interval. Basically, we are going to what an x amount of seconds, using the variable pauseSecondsBetweenCharacters, and for every interval, we are going to call the method AddNewCharacter(). Make sure to save the IDisposable so we have a way to stop it when we need to.

Now let’s see how that AddNewCharacter method is:

private void AddNewCharacter()
{
        dialogueText.text += _currentDialogue[dialogueText.text.Length];
        if(dialogueText.text.Length == _currentDialogue.Length)
                _dialogueDisposable.Dispose();
}

For every interval, we are going to add the next character from the dialogue we wanted to show. After that, we are going to check if we did complete the dialogue and if we did, we are going to dispose of the observable because we don’t want to keep adding more characters.

With this, we should be able to have already a fully functional writing text effect in Unity but there are a bunch of this that you can keep adding if you want! Let me show you something very similar to what we used in A Toad’s Trip or we are using on Summer Snow Day.

Adding a complete on click

We could do that if the user press a click the current dialogue fills. For that, we could have the following method call:

public void CompleteCurrentDialogue()
{
      dialogueText.text = _currentDialogue;
      _dialogueDisposable.Dispose();
}

As you can see, this will complete the current dialogue and after that, it will dispose of the observable so it doesn’t keep adding more characters.

Wrapping up

This should be enough to make that writing effect in Unity like the ones you see in visual novels by using UniRx. Of course, there are other ways to do it but I find this one pretty simple and straightforward.

Also, if you didn’t know about UniRx it can be a good entry point to start so consider it as a small practice.

Hope you found this useful and thank you for reading!