Typewriter Effect: New property MaxVisibleGraphemes (Live)

Updates Announcements
#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
#39

Does this mean if I have an NPC named “Christian” and another NPC called on them, Christian’s name would get replaced with “#########”?

This is a very useful update, but with the glitches in the text filter, I am not certain that important dialogue would not be inappropriately censored.

3 Likes
#40

How do devs even make that “falling” effect? Do you make individual text labels and tween them?

2 Likes
#41

cool! I think this update was necessary for many people!

#42

It means “Christian” is sent to text filter instead of “C”, “Ch”, “Chr”, Chri" etc…

ADDITIONAL NOTE: we have different systems for filtering chat and static game text. You don’t have to worry about things like names and numbers if your text is static, this is just for any text that is from user input.

4 Likes
#43

It is fine to remove the tag with what you provided too, but just to remember to always replace br tags with line return character if you want to count grapheme correctly in this case.
And there are actually more complicated cases like the following:

<<sometag>text</>

would render as what it is. While using existing quick tag-removal string gsub functions it will not return the correct display text. We tried to ship a readonly property to help with getting display text, but with a bad naming of Content, we have to revert it for resolving regression issues. We will rename it and try to ship that again soon.

2 Likes