Typewriter problems with positioning individual textlabels. How?

I want to know how I can position a typewriter effect in a custom way so I can add growing to it or fade effects to make it look more fancy for the kind of game I’m making.

I tried configuring the position and offset for hours but I haven’t been able to get the text right. I also know about textservice and how to get the text size.

If someone could provide me a tutorial, or find the courage to send an example on how to do it I would highly appreciate it. Because whenever I ask how to do this, I get extremely vague answers which is upsetting.

2 Likes

Each letter is a new textlabel positioned right after the previous letter, then do your effect

1 Like

I know this, but positioning it without getting the textbounds will look awkward. And when I get the textbounds it’s still awkward because the calculation is weird with some texts overlapping another or even being extremely spaced out.

your container that holds all the letters must have the final size, scale or offset.

and your letter scales up to 100% in y size (1:1 size constraint obv)

also, you can have a wrapper for the letter and use uilistlayout in your main container

:sob: I’m not sure if I understand what you are telling me, sorry. I would really appreciate some guidance or demonstrations.

What is a wrapper? What does final size and all the other stuff mean? I really respect your insight, but I have no clue what you’re saying.

• TextEffectFrame
   • UIListLayout
   • LetterWrapper
       TextLabel --// Apply Effect on this
   • LetterWrapper
      TextLabel --// Apply effect on this

The UIListLayout will automatically position your letters, you can wrap your letter in a frame so that u can edit the frame relative to the wrapper position

1 Like

Ohhh!! Thanks so much dude, I’ll give this a try real quick.

Could you explain a bit more on letterwrapping? I know the purpose of UIListLayout, but that part is unclear to me.

You wont be able to scale the textlabel if its in the same hierarchy as UIListLayout because it will keep it intact, thats why u wrap it in frame which UIListLayout will keep intact and u can modify children inside it

It’s definitely more stable, but the spacing still looks very awkward. Also using ListLayout the problem is it needs new rows of text if the dialogue is super long.

I will note that position text is actually rather involved. Roblox doesn’t give you the data you need for positioning the glyphs, you can only hope to infer them. As such any text size approach will only work for sure with a monospace style font. A good example of what makes this complicated is kerning. Like how the start of the a is tucked under the W in the combo WA.

I’ve not used it, but I’ve heard of something called TextPlus which may solve these problems if you need something that isn’t monospace.

dont use individual text labels its just a worst approach, just format the text for it to appear one letter after the other, this tutorial shows how to do it.

Typewriter tutorial

for the game i’m making i want to be able to make cool effects like fading in text, but I can’t do that using your tutorial I already previously made it that way it’s so easy it doesn’t even need a tutorial to do.

I wanna know how I can make dialogue systems like Deepwoken, Type Soul, all those games have extremely well made dialogue systems and nobody seems to be able to explain to me how I can do it.

you can absolutely format each letter even if its one label, look trough what rich text is
https://create.roblox.com/docs/ui/rich-text

So if I add a different font it would fix it? But I don’t know how to calculate the positioning of the message that’s the main concern. If I am unaware on how to do this, how do I move forwards with the system you’re telling me to use?

So I can size individual texts and make them grow as they are being displayed?

yep.

code:

TextButton.Text = [[<font size="40">This is big.</font> <font size="20">This is small.</font>]]

make sure to enable

TextButton.RichText = true

This isn’t growing text though it’s static in place. This is growing text:

well of course you need to find the last letter and run it trough a tween to grow the text.

1 Like