Typewriter Effect: New property MaxVisibleGraphemes (Live)

Updates Announcements
#18

Nice! Love to see these kinds of things get implemented into Studio.
It’s gonna help a lot. The other methods of achieving this effect are somewhat unreliable

2 Likes
#19

For once a type writing effect doesn’t have to be so broken with localization, the text shifting slightly, or the text changing size a bit. This update was most definitely needed.

2 Likes
#20

At this point you’re literally writing my game for me :smile:
I can finally incorporate typewriting effect with custom colored words and no flickering.

Thanks!!

2 Likes
#21

To be honest this is a bit of a non necessity considering its something that you can readily and easily do by just writing some simple code to do it. Instead of adding utilities like a typewriter effect i feel people would get much more utility out of something like being able to import your own fonts. But i digress, now if i want to i dont have to write my own version of this feature, so there are positives.

This also proves useful to ignore things that string will ignore. I hope that we can see graphemes being used for effectively and more use cases to come.

5 Likes
#22

Wow man, this is so cool :smiley:!
Will there be some API available for the beta?

2 Likes
#23

They won’t always be the same, try: utf8.len("👍🏾"), that’s one grapheme but two characters (thumbs-up + dark skin tone modifier).

15 Likes
Rich text Typewriter
#24

This is an excellent addition! Finally a built-in method to create typewriting text effects, long overdue.

3 Likes
#25

Thank for the suggestion. I will update the example there.

3 Likes
#26

Amazing! I honestly will use this so much.

1 Like
#27

This is a super good update for people who do UI work and this also helps with emphasizing things that are dramatic or bold in games like story or actions based games. Keep up the great work Roblox! :+1:

1 Like
#28

Hell yeah! Something that a lot of developers including myself wanted to get added.

1 Like
#30

Hi!

I just want to add in; I really hope this is added to TextBox (i.e. entry field) objects too! Specifically, their actual input text field, not only the placeholder.

Currently, I can’t find an easy way to limit the amount of characters a player can input, so I just limit their final entered text’s length using string.sub, and give them an appropriate feedback message.

With this property, I can set the maximum visible characters to the max string length; although the player will still be able to enter (invisible) text past the limit, it will give them instant feedback of what their final text would be.

While in the future I’d love to be able to outright limit the input size of strings, this is a nice bandaid.

Thanks!

7 Likes
#31

I second this–TextBoxes are one of the most neglected UI elements to date. We’ve been needing MaxLength, Type (e.g. ‘number’), and Max/Min properties for years, but are still forced to use expensive listeners for post-input modification. We also have no access to numeric keyboards on touchscreen devices.

8 Likes
#32

Several questions:

  1. Will this "typewriter’ effect support typing from the left and not just typing from the center alignment?
  2. Where is the API? I want to learn more about this, because I’m new to utf8’s and all that funny stuff
  3. Does it support other methods of typewriter effects? Like fading characters, dropping characters, turning characters etc

And will this work properly with richtext? Because my typewriter types out stuff with the richtext prefixes, before the entire word is spelt, THEN it updates to the richtext version

6 Likes
#33

That’s a good idea! I just made a feature request for it:

4 Likes
#34

Finally a feature I really could use. Looking forward to test it in the field. :3

2 Likes
#35

Can this be done in reverse? So the characters start disappearing left to right.

2 Likes
#36

I guess you could modify my typewriter for that same effect with RichText. Though it’s extremely unlikely Roblox will implement that feature as it’s such a specific case. utf8.graphemes does give you each character anyway so you can still use it for those special transitions though.

1 Like
#37

Can you explain to me why this is better than using this:

local function removeTags(str)
    return (str:gsub("%b<>",""))
end

To me it seems that it’s easier to remove all tags with a single gsub method. However, I’m no expert on string manipulation, so there may be something I’m missing. Is there any additional benefit to using your way rather than mine?

EDIT:
After running some benchmark test by running the same string through both functions 5 million times, I got the average execution time for each method.
Method #1: 2.1190112975196 – Original method
Method #2: 0.48316200119676 – My method
This means that Method #2 is about 4x faster than Method#1.

5 Likes
#38

How do you manually calculate textwrapping?

1 Like