We have wanted to support developers with a better way to add a “typewriter” style effect to your text. The most common method used today, is to update the string by adding 1 additional character repeatedly, which can cause some issues. Besides enabling a cool effect, there are additional benefits with using the new solution:
- More performant and intuitive method to add a typewriter effect to an entire string
- Remove visual issues with text wrapping, as the text string no longer changes in size/length
- Eliminate issues with localization as you no longer need to break up the string into individual characters
The solution is a new property called MaxVisibleGraphemes.
This new property will be added to text objects in about 1 week.
NOTE: in the unlikely event that you happen to have an existing child with the same name under a text object, you would need to use a different name.
What does it do
The property is an integer that is initialized to -1 by default. Once it is set to a non-negative value, it will render the same number of graphemes that is specified by the MaxVisibleGraphemes property. This can be applied to text objects with or without rich text enabled.
What is a grapheme?
A grapheme is the smallest functional unit of a writing system. You can read more about definitions of graphemes here.
For better compatibility with localized forms in other languages and emojis, we recommend you that count graphemes in the following way:
local len = 0
for _ in utf8.graphemes(text) do
len += 1
end
This will get you a correct graphemes count of 3 when text is
AB😊
while the string.len() will return 6 in this case.
Code example
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
local displayText = removeTags(script.Parent.LocalizedText)
local index = 0
for first, last in utf8.graphemes(displayText) do
local grapheme = displayText:sub(first, last)
index += 1
-- Uncomment this statement to get a reveal effect that ignores spaces.
-- if grapheme ~= " " then
script.Parent.MaxVisibleGraphemes = index
wait()
-- end
end
!