How to make a typewriter effect!

You know these story games, where the dialogue has a typewriter animation? Or these horror games with objectives with the effect too? Well, today I will teach you to do just that.

Requirements

  • An object with a .Text property.
  • At least some scripting knowledge

Tutorial

Create a LocalScript under the object you selected. Let's go and create a function with these parameters:
local function typewrite(speed, text)
       
end

Now that we made this function, there is no way to create this effect with TweenService, so we will need a for loop.
We will need to figure out how many letters the string has, so let’s use string.len()!

local function typewrite(speed, text)
       local length = string.len(text)

       for i = 1, length, 1 do
            
       end
end

Now that we have the length, how will we make the effect? Good question. Because that’s where string.sub() comes in! We get a substring that starts from the second argument to the third argument!

local function typewrite(speed, text)
	local length = string.len(text)

	for i = 1, length, 1 do
		script.Parent.Text = string.sub(text, 1, i)
		task.wait(speed)
	end
end


Call the function, and see what happens!

Here’s what it looks like with a speed of 0.1.
robloxapp-20240113-1914594.wmv (950.7 KB)

:tada: Thanks for completing my tutorial! I hope you enjoy it. Please like and reply (if you can) about what I can improve on this tutorial. :tada:

JK THIS TUTORIAL COMPLETELY SUCKS

6 Likes

Or to use TweenService with the MaxVisibleGraphemes property?

9 Likes

Wait you can tween text the whole time?

2 Likes

Yeah.

3 Likes

Please dont do this anymore. It makes it impossible to use RichText or translation, use MaxVisibleGraphemes instead.

13 Likes