Dialogue typewriter effect glitches when player does action too fast

[grimmerschool2 (notGrim)]

Hello!

While programming a shop UI, I came a problem with the dialogue.
When the player clicks an item too fast (clicking on an item while the vendor is speaking to be specific), the dialogue glitches: (ignore video glitching at start & blame xbox game bar)

Here’s a snippet of code of where the typewriter effect executes:

TextLabel:GetPropertyChangedSignal("Text"):Connect(function()
	local index1 = 0
	for first, last in utf8.graphemes(TextLabel.Text) do
		index1 += 1
		TextLabel.MaxVisibleGraphemes = index1
		task.wait(.05)
	end
	finished = true
end)

[notMundaze (mundaze)]

Whenever you iterate to the next letter for the typewriter effect, you should insert an if-statement that checks if a certain boolean (perhaps focused) is true, at which point it iterates. If the player interacts with the shop menu at any time while the typewriter animation is playing, the boolean will be set to false, at which point the currently running iteration of the typewriter effect sets it back to true and breaks, allowing for the new text to be displayed without issue.

@grimmerschool2

for first, last in utf8.graphemes(TextLabel.Text) do
		index1 += 1
		TextLabel.MaxVisibleGraphemes = index1
		task.wait(.05)
	end

This loop should constantly check said boolean should you go this route. Could be wrong on this since I don’t see how you’re handling the changes in the GUI from player input currently from your snippet.

[Denneisk]

My solution would be to store the running thread in an upvalue. When the connection runs, check if a thread exists already. If it is, cancel it, then store the current thread. At the end of the connection, set that thread variable to nil.

[af_2048]

The problem with your code: it can run several threads if update of the TextLabel happens too fast.
Since each thread has own index1, they set different values to TextLabels.MaxVisibleGraphemes effectively causing this “bug”.
I’d suggest move this into a “thread”, remember running thread and cancel it before starting new one.

local update_thread : thread?

TextLabel:GetPropertyChangedSignal("Text"):Connect(function()
	
	if update_thread then
		task.cancel(update_thread)
	end
	
	update_thread = task.spawn(function()
		local index1 = 0
		for first, last in utf8.graphemes(TextLabel.Text) do
			index1 += 1
			TextLabel.MaxVisibleGraphemes = index1
			task.wait(.05)
		end
		finished = true
		update_thread = nil
	end)
end)

and it looks this way: