Typewriter Effect: New property MaxVisibleGraphemes (Live)

[LitTurtleMan]

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!

[g2ming (psychosis)]

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

[hellhawk]

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!

[DevSpec (iJava)]

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.

[Sensei_Developer (Sensei)]

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

[Fire540Games (FireForge)]

@DevSpec

We also have no access to numeric keyboards on touchscreen devices.

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

Number keyboard support for TextBoxes

As a Roblox developer, it is currently not possible to use the number keyboard on mobile devices. Sometimes you only want a TextBox to accept numbers, and having a numbers-only keyboard for those cases would be very useful. It would make it easier for players to type in number values, and help clarify that you are only supposed to type numbers in that TextBox. This could be added through a new property on TextBoxes that determines whether the regular keyboard or number keyboard is used. This i…

[lucasfortheday]

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

[LeafpoolTheMC (Leafpool)]

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

[Rigid_Studios (Lorn)]

(DEPRECATED) Easy Typewriter [OPEN-SOURCE]

View on GitHub Easy typewriter is usable through just two lines of code and even considers RichText tags! local TP = require(game.ReplicatedStorage.TextProcessor); TP:Typewriter(TextLabel, "Test: <b>Lua</b> <i>Text <b>Processor</b></i>", { length = .15 }); Simply running this code with the text processor in position and TextLabel defined will do: Alternative video link. If you have a special case you can always modify the code/adopt a simpler usage of the API: TP:Make("<highlig…

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.

[BuilderBob25620 (BuilderBob)]

@0xabcdef1234

local function removeTags(str)
	-- replace line break tags (otherwise grapheme loop will miss those linebreak characters)
	str = str:gsub("<br%s*/>", "\n")
	return (str:gsub("<[^<>]->", ""))
end

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.

[iSyriux (Oneironaut)]

How do you manually calculate textwrapping?

[Sudobeast (Christian)]

@0xabcdef1234

The entire string is sent to the text filter once

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.

[synical4 (Synical)]

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

[Kirill_King155 (DefinitelyNotCarl)]

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

[Rototally]

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.

[0xabcdef1234]

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.

[Rototally]

Thanks for the feedback. We’re actively working on improving TextBox and we like this idea. I have included this on our to do list along with other improvements. Cheers.

[darkpixlz]

This is great! It takes forever to program a working Typewriter effect kind of thing, so glad it’s here!

[IAmNotTheReal_MePipe (MePipe)]

I know this is off-topic, but that is some amazing GUI design.

I wish I was good at something other than programming

[ConfidentLetter]

I’ve been using strings to make text occur. It works well but hopefully, this will improve my scripts quite a bit.