Typewriter Effects

Make Enhanced Text for Prompts, Dialogue and Conversation with this Effect.

by Mark_GoodMan

Author Avatar

Hello, you absolute legends who are looking for a tutorial for your game! My name is Mark_GoodMan, I'm a young Vietnamese teenager who will make a tutorial so you can improve your game and success, today we will learn about Typewriter Effects.

Explaining

So what is the Typewriter effect? Is it useful?

  1. Typewriter is an animated text, used to make text that appears just like a person typing it.
    
  2. Of course it's useful, you want a text that **instantly** appears? Nope, no one will ever want that! So Typewriter is what you need here to improve Dialogue, Text, and chatting.
    

1. Setup

First up, we gonna insert a ScreenGui into StarterGui, and then insert a TextLabel, because the Typewriter effect requires a GUI with a text.

img|250x45

Then you can customize anything with the TextLabel, your choice, using the properties to adjust how you want your TextLabel to look like but try to resize it to fit the screen.

img|55x75

Make sure TextScaled is checked, but this is optional, checking this option will just scale the text to fit the GUI depends on its scale so you can analyze if the code for later works or not.

Now that we finished, now let's take a quick minute to review if we are correct yet or not, make sure the TextLabel is in the right position, insert a Localscript into it.

img|90x45

After we have done this, now you don't need to touch anything else (you can still customize the look of TextLabel if you want)

2. Scripting

Now you inserted that Localscript, let's double click on it and start scripting the typewriter effect.

First thing first, we need to make a variable for the current TextLabel.

local TextLabel = script.Parent

Next, we want to make a function, you can call the function anything you want, but I will call AutoText to easier understand, the object and text are just to initialize, can be renamed.

local function AutoText(object,text)

Then we will use for loops to repeat writing the text. (note: the #text have to be the same as the one you named on the local function)

for i = 1,#text,1 do

The number 1 after the #text is how many letters you want to type, example if you put to 3 then it will type 3 letters every second depends on your wait(), the default number is 1.


Next, we want to use string.sub so it will type each letter out as listened to the numbers, the number 1 determines the start of the typing, changing this will cut some letters at the start and you can say it skipped those letters to the letters after it depends on the number, I suggest leaving it at number 1. We will want to use this on any TextLabel that the script is parented to, that's why we put it as an object so you don't need to rename the name for any TextLabel with a different name.

object.Text = string.sub(text,1,i)
        wait(0.025)
    end
end

Having wait() will affect how fast the function will type each letter 1 by 1. And of course, we end the function with end.


Now you understand how the script works, here is the full script:

local function AutoText(object,text)
    for i = 1,#text,1 do
        object.Text = string.sub(text,1,i)
        wait(0.025)
    end
end

Congratulation you learned how to make the Typewriter effect!


3. Test the Typewriter effect

Now everything is done, setup and scripting, now we want to test if this effect works or not.

We gonna do it by using While true do, so it can loop the whole thing so you can test it multiple times.

Then now all we gotta do is use the function as we named it before, note if the name of the function is different then you gotta rename it correctly on this one too, and then we will take the variable before as the current parent of TextLabel, then we just want to put any text in it.

--- The function will be on top before using it.

 AutoText(TextLabel, "I don't know what to put here lol")

After this, you can run the game to test the code.

Now I tested myself, it worked, but let's see how it looks like.

img|450x45

In the first 0.37 seconds, it will say "i dont k".

img|100x45

In the next 0.74 seconds, it will say "i dont know what t". Also, make the GUI size fit the screen and put it on top so you can easily see it and spot the text changing.

img|450x45

and finally 1.43 seconds it will fully make a text "i dont know what to put here lol" exactly as you entered in the script.

You have created a simple Typewriter effect for TextLabel, I hope you Goodluck on your game project using these Enhanced effects!

You can make more text to be Typed using the effect by just duplicating the code line but with different text

--- The function will be on top before using it.

 AutoText(TextLabel, "i dont know what to put here lol")
wait(3)
 AutoText(TextLabel, "you can add more text like this as many as you want!")

Alright, that's all for the tutorial!


4. Thank you & Quick talk

Thank you for taking time to read this tutorial, I took pretty much a long time to make this tutorial, I appreciate any feedback you guys left, I will use them to improve on my next tutorial, I am sorry if there's an error occurred in these tutorials, I will fix them later! Have a nice day :D

You also learned how to make Typewriter effects for Text GUI and UI, I included everything in the tutorial, if you didn't know anything, review the tutorial again because I know you can do this, you can make it, I believe in you! Goodbye and cya later!

This tutorial was created on 8/23/2020, any editing and changes will be put here. This tutorial took 7 hours to make including 47 minutes of using Roblox studio.

Update 11/10/2020 : Added Advanced features, scroll down for more! And grammar improvements!


EXTRA FEATURES & ADVANCED (From this point on you can do many advanced things using Typewriter Effects that you just learned)

Random auto-texting

Now you probably want some sort of TextLabel or TextButton to say different words (Randomized) every second that you determined.

First, we make a table containing all the messages so the auto-text will pick a random one later!

local RandomTextTable = {
 -- The name can simply be changed to anything however you like.

"Hey, a random text I guess?",
"Another one?",
"Yo, this is getting random",
"Hey, man have you ever wonder why we having a randomized text?",
"Because I am your best friend here to save you from hours of coding!!!",
"Final text and goodbye lol" 
-- If you want to put more text, make sure to put a " , " after it
-- When you finally want to stop adding more text, don't add " , " after the final text.

}

After the table is finished, now we need to do is to use a While True Do function and use the AutoText to pick a random text in the table before and then will make Typewriter Effects for it using math.random.

while true do

    AutoText(TextLabel,RandomTextTable[math.random(1,#randomtip)])
    wait(10) -- Set to any number you want, minimum is 5-10 seconds depends on the length of the text.

end

More advanced features coming soon as this tutorial will get updated mostly overtime!