Hi, This is kind of a Small Tutorial to show you how to make a Simple Typewriting Effect
This isn’t really Advanced, But more of Basic and Simple way of doing it, but still can be useful to know.
(Please Note that this is just my way of doing this, sorry if I'm a bit confusing on some parts)
Put this script is inside:
-
StarterGui -
ServerScriptService
It can be any Script:
-
A Standard
Script -
A
LocalScript
MATERIAL
string Library:
Model Kit (In Case you are Lazy):
TUTORIALS:
MaxVisibleGraphemes Version
- Assign a Variable to your
TextLabelorTextButton
This is just so you can get the Text Part, Kind of Important
local TextLabel = script.Parent.ScreenGui:WaitForChild("TextLabel")
- Create a function!
Create a function and Assign a Argument as astring, Doing this will make the function look for a string and not anything else, if there is another type, it will error
local function TypeWrite(str: string) -- "str" is assigned as a String
-- Will Come in...
end
- Apply Text and
MaxVisibleGraphemes
We make sure to set the text to the string we write, if we dont, it will just typewrite was is already there.
Inside your TextLabel, SetMaxVisibleGraphemesto0, what this will do is make the Characters Disappear, For Example: adding a number like1, will make one Character Appear,
local function TypeWrite(str: string)
TextLabel.MaxVisibleGraphemes = 0 -- Makes 0 Characters Visible
TextLabel.Text = str -- Sets the Text to the String we wrote
end
- String Length
Get the Length of the String! Obviously we don’t have a string at the moment but still, this is important to know how big our String is, Lets way our String isHi, There is only 2 Characters inside so its Length is 2, You can get the Length of the String by using:len()
Example:
local Str = "Hi" -- "Hi" is our string
print(Str:len()) -- Will Print "2"
As For our code, We will Create a For Loop, Since our String Length is 2, We can create a loop so it fires for the length of the string (so 2 Times),
Please NEVER forget to add a wait inside a loop, it will Crash your game!
local function TypeWrite(str: string)
TextLabel.MaxVisibleGraphemes = 0
TextLabel.Text = str
for i = 1,str:len() do -- Since the Length of our string is a Number, Will Determine how many times it will run
task.wait(.1) -- Waits for 0.1 Seconds (1/10)
-- More in a sec...
end
end
- Add Graphemes!
Add the Graphemes inside the Loop, we do this because it will make the Characters Visible, and since the Length ofHiis2, It will fire two times to form the WordHi, This Should be the finished code:
local TextLabel = script.Parent.ScreenGui:WaitForChild("TextLabel")
local function TypeWrite(str: string)
TextLabel.MaxVisibleGraphemes = 0
TextLabel.Text = str
for i = 1,str:len() do
task.wait(.1)
TextLabel.MaxVisibleGraphemes += 1 -- Adds Graphemes (Visible Characters)
end
end
And Finally…
- Test the Code!
If you test it now, you may notice that its not firing, thats because we havent called it yet, to do this we write the name of the function (Which in the Script isTypeWrite) and add Parenthesis(), and since the function is also looking for a string, we add one inside of it:
TypeWrite("OMG This is a Typewriting Effect!") -- String Inside the Parenthesis, otherwise it will error
Now Test it, and it should work as intended!
(Note in this Clip, i added sound and made the Speed Faster)
string.sub Version (Slightly more Advanced)
If MaxVisibleGraphemes Doesn’t get you the result you like, try using string.sub, This is slightly more complicated, but i will go over the same steps as the Other Example:
I recommend Reading This to understand a little better.
- Assign a Variable to your
TextLabelorTextButton
This is just so you can get the Text Part, Kind of Important
local TextLabel = script.Parent.ScreenGui:WaitForChild("TextLabel")
- Create a function!
Create a function and Assign a Argument as astring, Doing this will make the function look for a string and not anything else, if there is another type, it will error
local function TypeWrite(str: string) -- "str" is assigned as a String
-- Will Come in yet again...
end
- Length
To Get the Length of the String, you can use:len()for this, we will Apply a for loop, since the length of the String is a number, it will determine how many times it will run.
Once Again
NEVER forget the wait inside the Loop, it will crash your game!
local function TypeWrite(str: string)
for i = 1,str:len() do -- Length is a number, Determines how many times it will run
task.wait(.1)
-- More in a sec..
end
end
- Apply Text with
string.sub
string.subcan be a bit confusing to use, hopefully this Post can help you out with that
-
s: stringis our String -
i: numberis the Number our string start’s at
lets say you have a string namedcarl, if we start at2, the string will bearlsince we took away the first two letters, I will show how to fix to make it saycalater (Default is1) -
j: numberis our Target, This integer is optional but will be very useful here (Default is-1)
As I said I would, to change the arl to ca we would do this:
local s = "carl"
print(string.sub(s,1, 2)) -- will print "ca"
For Better Explaination
We are setting i to 1 with is the Default Value (gives us the first letter),
while j is the Targetted value so if it was 1, then it will only print c, but since its 2, it will also print a which gives the result of ca
As for our for loop, we will assign j as the index
local function TypeWrite(str: string)
for i = 1,str:len() do
task.wait(.1)
TextLabel.Text = string.sub(str,1,i) -- It will add the Text instead of Subtracting it, And our Target is the string's length
end
end
- Test The Code:
To test the code, we do the same thing as the first Tutorial, Call the function
TypeWrite("OMG This is a Typewriting Effect!")
After this, it should work wonderfully 
- Very Useful
- Good
- Ok
- Bad
- Not Helpful
0 voters
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
0 voters
, since it combines 2 characters, the thumbs up emoji and a dark skin modifier.