Typewriter effect

Pleasant surprise to see me being mentioned, haha.

As for the effect, it’s quite simple - create a text label for each individual character and then tween them to your liking.
Someone mentioned Defaultio’s module, and while I did try using it at first, I didn’t like how the module was made (the OOP structure in general), so I made my own little short typewriter module.

3 Likes
local message = ""
local TextLabel = --where ever the gui is located
for i = 0, #message do
    TextLabel.Text = string.sub(message, 1, i)
end
--this is the simplest way to do it for me
12 Likes

Reread OP’s post, I already told someone else to do so yet what OP wants is still being looked past.

They want to achieve the effect shown in the video using a typewriter, not how to make a typewriter.


Can agree on this one, creating a new object for every message I want to typewrite out is a little tedious.

Thank you everyone!

Though, I still have one question:

How would I calculate the distance between characters?

I’m not that experienced in related cases like this, but I’m going to assume you position each TextLabel (unless it’s the first) the same X offset as the X size of the previous TextLabel then offset the TextLabel by a certain number, depending on the spacing your font uses.

Roblox has created an official module for Typewriting which may just work better than some modules seen here.

View the tutorial here: Typewriter

Key features of this module are:

  • Supports localized translations for outputting text in languages which you’ve configured in the localization portal.
  • Easy customization options like text output speed and whether there’s a natural delay between word breaks in a sentence.
  • Full support for UTF-8 encoding when outputting non-Latin characters as in Chinese or Korean.

Since the module is open sourced, you can modify it in case you want to add sounds.

I heard something about using game:GetService("TextService"):GetTextSize() for this… I don’t know

This is not what I mean. Please read this:

Yes, you could indeed use this which may be more accurate and nicer looking than random guessing.

1 Like

There is actually a new property coming to TextObjects soon that allows you to define how many utf8 characters show which will be very useful. I’ll update this post when I find the announcement thread.

Edit: Typewriter Effect: New property MaxVisibleGraphemes (Live)

1 Like

What you can do is create a string to start with. For example, your text will be like:
local Text_To_TypeWrite = "This is what I want to typewrite."
Then, you will do a function for typewriting like this:

function typewrite(TextLabel,text)
	for i = 1,#text do -- We will get the amount of letters in the string.
		TextLabel.Text = string.sub(text,1,i) -- We will then type those letters out one by one.
		wait() -- We will do a slight wait effect so that it looks like we are typing it out
	end
end

In the actual code, we will call the function:

typewrite(RandomTextBox.Message,Text_To_TypeWrite)

For now, this is the best way to do it until the new property is released.

3 Likes

Nice explanation! Though, this is not what I’m asking for:

3 Likes

A lot of people seem to be missing what OP needs help with, OP wants to achieve the effect seen in the video, so please stop replying with scripts on making typewriters, because that’s not what OP asked for.


@iamajust if any of the posts were what you were looking for, mark it as the solution so people know you've already been helped.
1 Like

He wants to make that letters falling down sort of thing

3 Likes

you can use this for Animating Text too! Animating Text

1 Like

I don’t know if this is answered or not but someone has posted a solution that may help you: Created an advanced TypeWriter Script. (THIS IS CRAZY!)

2 Likes

Is it possible to insert a wait function while the typewriter function is running?

Search for “advanced fall in place animation” in Google and you will see a devforum post, it will explain everything on how to do it, it will tell you about a module BTW, you will edit a small part of it.

1 Like

Someone already asked that question and got the solution
Link: How do i animate letters like this?

1 Like

After searching for a long time I’ve actually found the module that most people use to create their dialogue systems

-Rich Text Markup (Credits to Defaultio)