Unity typing text effect for dialogue | Unity tutorial

In this video, I show how to make a typing text effect (typewritter effect) for a dialogue system built in Unity.

Thank you for watching and I hope the video was helpful! 🙂

► INK + UNITY TUTORIAL PLAYLIST
The full Ink + Unity tutorial playlist that this video is part of can be found here.

► TIMESTAMPS
0:00 Intro
0:54 The typing effect
4:03 Disallowing continue while typing
4:47 Hiding UI while typing
6:43 Skipping to the end of a line
7:45 Handling Rich Text Tags
10:12 Outro

► OTHER UNITY DIALOGUE SYSTEM TUTORIALS
Here's a playlist containing all of the tutorials I've done around creating a Dialogue System in Unity.

► GITHUB PROJECT
The '3-portraits-implemented' branch is what we started with at the beginning of this video, and the '4-typing-effect-implemented' branch is the final result by the end of this video.

► MUSIC
The backing music is custom made by @themaykit.

► DISCORD
Come ask questions, suggest a video topic, or just hang out!

► THE PATH OF REN
Wishlist The Path of Ren on Steam!

► SOCIAL MEDIA LINKS

► SUPPORT
Any support is much appreciated! I may receive a commission on any assets purchased using the below Unity Asset Store link.

#gamedev #unity2d #unity

[nathancongdon]

For anybody having issues with the full text of lines 2+ being displayed, it's likely due to the "submit" button triggering the skip at the same time you submit an answer. To solve this, I slightly changed the code to only allow a skip once three letters are visible.

I also followed the advice of another comment down below, who suggested that we use = n", with "n" being the iteration you are on in a for loop. This prevents text wrapping errors, and does not require the code to account for rich text tags!

My resulting code looks like this:

for (int i = 1; i < lineLen; i++)
{
yield return new WaitForSeconds(typingSpeed);
= i;
if && i > 3)
{
= lineLen;
break;
}
}

Hope this helps!

[takicomposer]

I was having a problem where after I skipped the dialogue one time the next line didn't had the typing effect. The problem was the same as the jump problem in the first video, the input was calling the next line and skipping the coroutine at the same time, so here my fix to this:

1 - I created a private bool called canSkip with a default value of false and created a new coroutine to make the variable true after a WaitForSeconds().

private IEnumerator CanSkip()
{
canSkip = false; //Making sure the variable is false.
yield return new WaitForSeconds(0.05f);
canSkip = true;
}

2 - Created another private bool called submitSkip for the input and in the Update method I set the submitSkip to true (this is need because just use or for the new input system doesn't work properly, I think it works better in the Update() because it's called every frame).

private void Update()
{
if
{
submitSkip = true;
}

if (!dialogueIsPlaying)
{
return;
}

if (controls.UI.Submit.triggered && canContinue)
{
ContinueStory();
}
}

3 - In the DisplayLine Coroutine I set the submitSkip to false at beginning (because when you go to the next line submitSkip will be set to true), call the CanSkip Coroutine and in the foreach you put the canSkip and submitSkip variables in the if statement. Also for good measure, at the end I set false to the canSkip variable.

private IEnumerator DisplayLine(string line)
{
dialogueTMP.text = "";
//Change to animation.

submitSkip = false;
canContinue = false;

StartCoroutine(CanSkip());

foreach (char letter in line.ToCharArray())
{
if (canSkip && submitSkip)
{
submitSkip = false;
dialogueTMP.text = line;
break;
}

dialogueTMP.text += letter;
yield return new WaitForSeconds(typingSpeed);
}

continueIcon.SetActive(true); //Change to animation.
canContinue = true;
canSkip = false;
}

And that's it, if you were having the same problem should work fine now.
Also thanks for the videos, Trevor. They are being a huge help in my game's development.

[PastaLaFeasta]

Thank you so much for this detailed and easy to understand tutorial!!! I was struggling with this for quite some time now!

[SestoMazzanti]

Best video I've seen about autotyping in unity. Thanks

[noahjames]

keep it up! this is the best dialogue system tutorial i've seen

[facumorazzani]

I say this in all your videos, but i love you treveeerrr!!!!

[Bwukly]

I was looking for a simple way to implement this. Appreciate the video, thanks.

[humbaba]

Hi, thanks very much for this helpful series. You may want to consider setting the full text of the Text Mesh Pro object ahead of time and incrementing the maxVisibleCharacters property from zero for each character processed. This helps the situation where the layout may start to write on one line, then split to the next line if the word grows too large, "removing" the characters typed on the first line.

[MaxIzrin]

While this will work, there may be an issue with line wrapping, as the text adjusts when additional letters are added.
Using a text mesh pro, you can set the vertex colors to a transparent color, and then revealing them one letter at a time.
It should prevent the text from adjusting mid-type, and also make handling the rich text tags trivial.

[indijuegos]

i just want to say tha THIS is the exactcly dialog system that i was searching for now

In the nexts weeks i will try to add an assets that adds animation on texts, works by tags on text mesh pro and support ink files, this could be great if it works

[Wilhelm]

This is fantastic thank you!! I was able to follow along with everything except my rich text codes are still being typed out awkwardly.

[Afflictionability]

your tutorials should be the standard lol

[imgeorgeirl]

I've tried to implement this but whenever I add the if statement in the display choices foreach loop so I can skip dialogue, it will ignore it completely and not display the whole line, but for every subsequent line it displays the whole line without the typewriter effect. I cannot seem to figure out what's going wrong

[qzlocx]

how would we add interpuncuation delays?

[Dhanen]

Great tutorials, I am enjoying them and understanding most great part even (as you can note by my horrible writting) english is not my first language (neither my second). I want to ask you for the tag for the displaying speed, if it exists (instead using the X.XXf variable) just if you want, for exmple, make slower a couple of words to create expectation. I also want to ask if there is an alternative way to do all those effects to make translations easier is it done with TextMeshPro as you said in your fixed commentary? Thanks so much in advance.

[payasoprince]

Great video dude! But I did notice an issue. When you call "WaitForSeconds(typingSpeed)" the submit button cannot be received while you wait. So there should be a (small) chance that the player presses submit while WaitForSeconds is waiting. To avoid this, you could make a for/while loop for the timer and inside the loop you can check for input. That way player input can be received the entire time.

[DataDrifterOFC]

Hi Trever! First let me thank you so much for awesome tutorials, these are a lifesaver!
I have a weird problem, I use the dialog to trigger form a button and everything works perfectly but the first line of dialog is shown immediately instead of getting a typing effect. If you have any insight of where I should start looking for the culprit I'd be very grateful.

[hitm]

7:24
you should put getkey instead of getkeydown here

[thejfisher]

how conlangers really make languages: 3:07

[jaydenhall]

my skipping to the end of a line code isnt working and im not sure why, do you have any clue

if
{
dialogueText.text = line;
break;
}