How to make a Text Typewriter effect (for dialogs)

Open Source Code & How Tos
,
#1

this is an updated version of the typewriter effect I made last year, shhhh!!!

Introduction
Have you ever wanted to recreate those fancy typewriter effects from games like Undertale or Hollow Knight??!?!? No??? Well, you probably have or would have at some point. Anyways, you’re in LUCK!! Because this topic will cover how to create a simple & working typewriter effect. I am not the best explainer so please don’t go too hard on me.

How to actually do it
For this tutorial, we’ll be using custom blocks because they are awesome they are very handy for code reusing and abiding by the classic Don’t Repeat Yourself rule. If you have a very strong grudge against them, you are free to skip the steps marked with a :hs_bear:.

Step 0: Prepare an Object
Before we start coding, we obviously need an object for the code to be put in! So go ahead, either create a new text object or use one that already exists.

:hs_bear: Step 1: Creating a Custom Block
First of all, we’ll create a custom block that you can name anything BUT be sure to add 2 parameters; text and delay. You don’t have to name them exactly that but I’ll be using those names for this tutorial.

FOR THOSE WHO AREN’T USING CUSTOM BLOCKS: Create 2 local variables named text and delay!

Step 2: Creating an ‘Index’ variable
For the next step, we’d need to create an Index local variable. I’ll explain its purpose in a bit!

Step 3: Code!
Now it is time for us to cook up code! Brace yourselves!

  1. Insert a Set variable block and change the 2 parameters into Index and 0 :hs_bear: inside the custom block.
  2. Insert a Repeat times block afterwards.
  3. Change the parameter in the Repeat times block with length(text) (Use the local variable!)
  4. Add a Increase variable block inside the Repeat times block and change it to Increase Index by 1
  5. Afterwards, add a Set Text block (still in the repeat block) and change the first parameter to characters in text between 0 and Index (Use the local variables! You can change the color to anything you want btw)
  6. [OPTIONAL] Add a Start Sound block (stilll in the repeat block) and change the sound to anything you want.
  7. Add a Wait seconds block and change the parameter to delay. (the local variable)
  8. :hs_bear: Fill in the details of the custom block! Change the text parameter to the text you want and the delay parameter to how long you want the delay for every letter to be.
Explanation

For you to actually understand what you just coded, we’ll need to grasp on how this typewriter system works in general.
We want to have the text start from nothing, then have the code add more letters with a delay for every character until it fully forms a sentence.

In the repeat times block, the code inside will loop for the same amount as the amount of characters in the text you put in within the custom block. And what the code does is that it adds how many letters that can be seen (what the characters in text between block does).

And you may be asking, “what’s the purpose of the Index variable??? you havent explained it AT ALL!!!” Index variables within loops are usually used to keep track of how many times the loop has run. And you may be asking, “what’s the purpose in that???” And to that, you can see that it was used within the characters in text between block.

The Index variable makes the text you see longer based on how many times the loop has run. It basically tells the character in text between block, “hey! this code has run for the Xth time, so you should add Xth amount of letters to display!” in which the character in text between block would respond with “Ok” and do what it said.
And as explained before, the repeat times block will run for the exact amount of letters from the text parameter/local variable, so that means the code will end with a fully formed sentence, courtesy of Index and character between text’s hard work.

…And that’s it!
If you did it correctly (and if I actually wrote this tutorial correctly), it should work beautifullyyyy! I deeply apologize if I explained things very awfully or some of the code won’t work even though you’ve followed this tutorial very closely, you can always ask me for questions!

So, thanks for reading. <3

10 Likes
How to make a Text Typewriter Dialog effect....thing
#2

Project example:

5 Likes
#3

I made one once (for Cutelittlepuppydog, of course)

I used only 3 variables:

  • main text string (game variable)
  • idx (game variable, short for index)
  • text (object trait variable)

Mine works by using something called “recursion” to print sentences one letter at a time.

5 Likes
#4

Pretty slow, ngl.
I use this a lot, figured it out on my own last month.
Here is an example of one of my published projects with my non-advanced mode typewriter.

Code was really easy to figure out.

3 Likes
#5

Great tutorial! Somehow I have not gotten my head around how to do this effect. Will bookmark this tutorial!

6 Likes
#6

(updated the project to also feature an example of the code without the wait block and sound lolololololo)

3 Likes
#7

and i made one sorta half based off of it haha
(crosbyman mostly just helped me work out bugs)

2 Likes
#8

aaaand this topic gave me motivation to improve my old wordwriter algorithm (which was, by the way, been improved several several times in the past, from typewriter to wordwriter)

can you feel the speed? mathematically the wordwritter can write 1800 words in only one minute - more than the double of what typewriters algorithms can do.

3 Likes
#9

This topic made me think of some code I took from Fighting Cheery🍒 for a backwards typewriter.

Link to copied code:

At the time, I thought it was impossible to create a forwards typewriter without pro (after seeing @Crosbyman64’s typewriter, of course), and look at me, I found out the code by myself.

3 Steps on how I discovered my own typewriter

  1. Just thought about doing that

  2. Magically found the code within a minute (actually I thought about the code and found a working algorithm)

  3. Why is there a step three?

2 Likes