This do not require much knowledge, however, an understanding of GUI and user interfaces in general could help understanding this better.
This tutorial was created 2 years ago, the date was 8/23/2020. (MM/DD/YY)
This tutorial took 7 hours to make including 47 minutes of using Roblox Studio to make images.
As of the reimagined update, this took an additional 7 hours to remake, this includes rewriting the entire tutorial, adding new scripts, rewriting outdated scripts, getting new images, fixing grammar issues and code formatting. (Even then, I'm still not done with this tutorial even if it's perfect, because I truly care about teaching you guys about this, so I'm not going to leave this in the dumpster fire)
Last updated and checked: 12/13/2022 (MM/DD/YY)
Hello you absolute legends, my name is Mark_GoodMan and welcome to the Typewriter Effects tutorial, we are going to see what we can do to achieve this simple yet effective feature.
What is a Typewriter effect?
In other words, it's an effect that causes text on GUI to appear over a given period, instead of instantly appearing like most old games do. Here's an example:
SomeTextLabel.Text = "Hey look, it's me!"
This code will make the selected TextLabel instantly change it's current text to the said text. However, most people want to make it more immersive or make some special effects to make it look professional, or at least not making it look low-quality in some cases. This is where the Typewriter effect comes in.
First up, we gonna insert a ScreenGui into StarterGui, and then insert a TextLabel in it.
Customize anything with the TextLabel! Using the properties to adjust how you want your TextLabel to look like, but try to resize it to fit the screen, we don't want people to zoom their eyes in if the text is too small.
Make sure TextScaled is checked, but this is optional, checking this option will automatically scale the size of the text based on a person's device resolution.
Place a Localscript inside the TextLabel, then check to make sure the setup is correct as shown below:
Everything looks good? Great, let's begin the next phase.
Begin by double-clicking on the Localscript you inserted.
First thing first, we need to make variable for the current TextLabel.
local AnyTextName = script.Parent
Now after this, there are 2 methods to create a Typewriter effect, however, I recommend the newest method in 2022 as it's more efficient, but the old method will be kept because that's what this tutorial was originally meant to be.
#2.5: METHOD A (2020)
Now, after assigning the variable, we want to make a function, you can call the function anything you want, but I will call it AutoText for an easier understanding. We will add two assignments, object and text, they can be renamed. Make sure to end the function with an end.
local AnyTextName = script.Parent
local function AutoText(object,text)
end
Then we will use for loops to repeat on checking each letter. (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 are how many letters you want to type, for example, if you put to 3, then it will type 3 letters every second depending on your task.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 object so you don't need to rename the name for any TextLabel with different name.
local function AutoText(object,text)
for i = 1,#text,1 do
object.Text = string.sub(text,1,i)
task.wait(0.05) -- Going below 0.05 can cause issues
end
end
Having task.wait() will effect how fast the function will type each letter 1 by 1. Then we end the "for do" statement with an end.
Now you understand how the script works, here is the full script:
local AnyTextName = script.Parent
local function AutoText(object,text)
for i = 1,#text,1 do
object.Text = string.sub(text,1,i)
task.wait(0.05) -- Going below 0.05 can cause issues
end
end
Congratulation, you learned how to make the Typewriter effect! We will move on to method B.
#2.5: METHOD B (2022)
After assigning the variable, now, we begin by making a function that can be made to allow you to do multiple Typewriter effect without copy and pasting on your script. You will need three assignments, which is theText, HowmanyCharacters and writeSpeed, these values are self-explanatory. However, we also need to use TweenService to make it smooth!
local AnyTextName = script.Parent
local Tween = game:GetService("TweenService")
local function AutoText(theText, HowmanyCharacters , writeSpeed)
end
First, we can put the text we want into our TextLabel as usual, it should be placed in the theText argument (first argument in this local function)
local function AutoText(theText, HowmanyCharacters , writeSpeed)
AnyTextName.Text = theText
end
Now, recently Roblox introduced a new property called MaxVisibleGraphemes, this will allow the text to be rendered based on the number value provided in there, with this in mind, we can use it intentionally as a Typewriter effect!
With that being said, the next thing we should do is create a tween for our new text when we enter them soon. Combine the TextLabel variable, with the Tween information variable, and then the Text we want to give in the table to animate it! Don't forget to put the MaxVisibleGraphemes at 0 value at the start each time this function fires.
local function AutoText(theText, HowmanyCharacters, speed)
AnyTextName.MaxVisibleGraphemes = 0 -- Pretend the text got deleted lol
AnyTextName.Text = theText
Tween:Create(AnyTextName, TweenInfo.new(speed), {MaxVisibleGraphemes = HowmanyCharacters}):Play()
end
Alright, it seems like everything is working, here's the full code to double-check:
local AnyTextName = script.Parent
local Tween = game:GetService("TweenService")
local function AutoText(theText, HowmanyCharacters, speed)
AnyTextName.MaxVisibleGraphemes = 0 -- Pretend the text got deleted lol
AnyTextName.Text = theText
Tween:Create(AnyTextName, TweenInfo.new(speed), {MaxVisibleGraphemes = HowmanyCharacters}):Play()
end
Let's test out the code to confirm that it works!
Again, this will split into neither of both METHOD A and B:
#METHOD A
As previously mentioned, the object is the TextLabel your going to target, and the text is the text you want that given target to write out.
local AnyTextName = script.Parent
local function AutoText(object,text)
for i = 1,#text,1 do
object.Text = string.sub(text,1,i)
task.wait(0.05) -- Going below 0.05 can cause issues
end
end
task.wait(5) -- Load the game first or the text will finish before your eyes lol
AutoText(AnyTextName, "i dont know what to put here lol")
After this, you can run the game to test the code.
Now I tested it myself, and it worked, but let's see how it actually looks like. Also, make sure the GUI size fits the screen, put it on top so you can easily see it and spot the text changing.
Wow, that was an awesome magic trick right there buddy! It took ~1.43 seconds to fully animate the text "i dont know what to put here lol". Very well indeed! It looks like everything is done, congratulation!
#METHOD B
This new method has the same results from METHOD A. However, this one will animate the text more smoothly, while the text will stay in it's position and doesn't move when new text are being added. Also, the variable is already inside the function, so we don't need to put it again when running the function.
Give the HowmanyCharacters a number based on the amount of characters your Text has. If the text didn't fully render out all the words, increase the HowmanyCharacters until it did.
Why don't you go try it yourself?
local AnyTextName = script.Parent
local Tween = game:GetService("TweenService")
local function AutoText(theText, HowmanyCharacters, speed)
AnyTextName.MaxVisibleGraphemes = 0 -- Pretend the text got deleted lol
AnyTextName.Text = theText
Tween:Create(AnyTextName, TweenInfo.new(speed), {MaxVisibleGraphemes = HowmanyCharacters}):Play()
end
-- Setting "speed" to 2.5 means it takes 2.5 seconds to render everything
while task.wait(4) do
AutoText("uhh, what am i doing here?", 40, 2.5)
task.wait(4)
AutoText("it seems like its raining a lot here man", 50, 2.5)
end
Now one final thing to note is that the method B that I wrote wasn't as efficient, you could use something such as the utf8 library to make a better version of Typewriter than mine, but I'm only here to show the basics.
#4. ENDING & EXTRAS:
I would like to thank you everyone for reaching the end, and for reading this tutorial.
I hope this serves you when you're making your own game, goodluck and have fun!
#Both method are included, copy the ones that you need.
RANDOMIZED TYPEWRITER
local RandomTextTable = {
-- The name can simply be changed to anything however you like
"Hey, a random text I guess?",
"Can I have another one please? Thanks.",
"Yo, this is getting so random, uh...",
"The heck is this abomination dude?",
"Hey, man have you ever wonder why we having a randomized text?",
"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 comma after the text ( , )
}
-- METHOD A
while task.wait(6.5) do
AutoText(TextLabel,RandomTextTable[math.random(1,#RandomTextTable)])
end
-- METHOD B
while task.wait(5) do
AutoText(RandomTextTable[math.random(1,#RandomTextTable)], 100, 3)
end