Graphemes TypeWriter Effect Help

Alright so Recently (quite late) I found out there was a new way to use typeWriter (spoiler it’s about MaxVisibleGraphemes) and I got quite interested in it from forums, but I got into trouble and I can’t seem to figure it out.

Thing is that even when I use String like this

Whoohoooo <font color="rgb(255,200,50)">SCARY!</font> <font size="69">💀</font>

It would end up like this
https://gyazo.com/5ddc6a2ffa84b678c58573e7a6ebf3b4

I am quite new with this feature so I would gladly use any kind of help.

In case anyone wants to see the typeWrite script

local LocalizationService = game:GetService("LocalizationService")
local Players = game:GetService("Players")

local SOURCE_LOCALE = "en"
local translator = nil

local AnimateUI = {}

function AnimateUI.loadTranslator()
	pcall(function()
		translator = LocalizationService:GetTranslatorForPlayerAsync(Players.LocalPlayer)
	end)
	if not translator then
		pcall(function()
			translator = LocalizationService:GetTranslatorForLocaleAsync(SOURCE_LOCALE)
		end)
	end
end

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

function AnimateUI.typeWrite(guiObject, text, delayBetweenChars, sounder)
	guiObject.Visible = true
	guiObject.AutoLocalize = false
	local displayText = text

	-- Translate text if possible
	if translator then
		displayText = translator:Translate(guiObject, text)
	end
	
	displayText = removeTags(displayText)

	-- Set translated/modified text on parent
	guiObject.Text = displayText
	local index = 0
	for first, last in utf8.graphemes(displayText) do
		index += 1
		guiObject.MaxVisibleGraphemes = index
		local sound = sounder:Clone()
		sound.Parent = game.SoundService
		sound.PitchShiftSoundEffect.Octave = math.random(85,145)/100
		sound:Play()
		game.Debris:AddItem(sound,0.5)
		
		if string.sub(displayText,index,index) == "," or string.sub(displayText,index,index) == "." or string.sub(displayText,index,index) == "!" or string.sub(displayText,index,index) == "?" or string.sub(displayText,index,index) == ":" then
			wait(delayBetweenChars)
			wait(0.5)
		else
			wait(delayBetweenChars)
		end
	end
end

return AnimateUI

That’s why.

You’re removing the tags before displaying them.

I already tried to do without removing the tags.
this is what ended up
https://gyazo.com/6fc1c8fd4800da8afdcdcea53a90539e

You also need to enable rich text on the text box :slightly_smiling_face:

See Using Rich Text.

1 Like

OH I needed to enable that? I will try that right now and see.

It worked. Never knew I had to use RichText. Thank you kindly