Typewriter effect

Help and Feedback Scripting Support
#1

Hey developers,

I know how to create a normal typewriter effect, but I don’t know how to apply this:


Video provided by @PysephDEV

As you can see the characters tween in position and transparency. I know this is going to require a single TextLabel for each character, TextService, TweenService. But I don’t know how to calculate the positions. Help would be appreciated!

Have a nice day!

14 Likes
#2

Here is some full video to that

16 Likes
#3

Please reread OP’s post,

They already know how to apply a simple typewriter effect to text, they just want to know how to achieve the effect seen in the video

iirc, the only way to achieve this is to create a new TextLabel instance for each character which can be confusing, especially when working with RichText.

Defaultio has a module for this, thankfully.
https://www.roblox.com/library/1014847041/Rich-Text-Markup

4 Likes
#4

Thanks, now I don’t have to finish my own post anymore :joy:

#5

Is there any guide on how to use it? I only see stuff about Rich Text.

#6

Yes! The API Documentation is written in comments in the module itself. The 2 ScreenGuis under the module are just examples for you to play with. RichText is referring to the module itself. The module even has an example script below:

local richText = require(richTextModule)
local text = "Hello world!\nLine two! <AnimateDelay=1><Img=Thinking>"
local textObject = richText:New(frame, text)
textObject:Animate(true)
print("Animation done!")

Quick Note: The module supports RichText, not that you have to use it.

5 Likes
#7

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
#8 
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
#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.

3 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