Typewriter effect

Help and Feedback Scripting Support
#9

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.

#10

Thank you everyone!

Though, I still have one question:

How would I calculate the distance between characters?

#11

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.

#12

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.

#13

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

#14

This is not what I mean. Please read this:

#15

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

1 Like
#16

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
#17

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.

5 Likes
#18

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

3 Likes
#19

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
#20

He wants to make that letters falling down sort of thing

3 Likes
#21

you can use this for Animating Text too! Animating Text

2 Likes
#22

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!)

3 Likes
#23

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

#25

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
#26

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

1 Like
#27

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)

#28

I’d like to do something like this:

local text = "your text here!"
local textLabel = "" -- put your textlabel here
for i = 1, #text do
		textLabel.Text = string.sub(text, 1, i)
		if string.sub(text,i,i) == "!" or string.sub(text,i,i) == "?" or string.sub(text,i,i) == "." then
			task.wait(1)
		else
			task.wait(0.05)
		end
	end
#29

I’ve managed to do a similar effect a while ago. For it to work properly, you shouldn’t be using the Text property but MaxVisibleGrapeheme instead.

Here’s the function I used:

function module.DisplayText(Content: string, Choices)
	ContentTextLabel.Text = ""
	module.ShowMainFrame()
	Content = Content or ">> NPC process stopped unexpectedly. <<"
	
	for i = 1, #Content do
		ContentTextLabel.Text = string.format("<stroke>%s%s%s%s</stroke>%s",
			string.sub(Content, 1, i - 3),
			string.format('<font transparency="0.25">%s</font>', Content:sub(i - 2, i - 2)),
			string.format('<font transparency="0.5">%s</font>', Content:sub(i - 1, i - 1)),
			string.format('<font transparency="0.75">%s</font>', Content:sub(i, i)),
--			string.format('<font transparency=".75">%s</font>', 
--				i<#Content and module.GenerateRandomCharacter() or ""),
			string.format('<font transparency=".99">%s</font>', Content:sub(i+1, #Content))
		)
		local CurrentCharacter = Content:split("")[i]
		if CurrentCharacter ~= " " and CurrentCharacter ~= "." then
			module.PlaySoundAtSpeed("press_button_ui", 1)
		end
		wait(0.06)
	end
	
	ContentTextLabel.Text = Content
end