Typewriter effect is "clipping"

Help and Feedback Scripting Support
1

I’m trying to use the Roblox typewriter effect to create some chat, however whenever I use i,v in pairs, it ends up clipping. Does anyone know an alternative I can use?

(text in the code is a table)
Code:

	for i,v in pairs(text) do wait()
		AnimateUI.typeWrite(dialog.Frame.textframe.text, v, 0.08)
		wait(waittime)
		if(i == #text) then
			dialog.Enabled = false
			camera.CameraType = Enum.CameraType.Custom
			player.Character.Humanoid.WalkSpeed = 16
		end
	end
end

Typewriter 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

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

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

	-- Replace line break tags so grapheme loop will not miss those characters
	displayText = displayText:gsub("<br%s*/>", "\n")
	displayText:gsub("<[^<>]->", "")

	-- Set translated/modified text on parent
	guiObject.Text = displayText

	local index = 0
	for first, last in utf8.graphemes(displayText) do
		index = index + 1
		guiObject.MaxVisibleGraphemes = index
		wait(delayBetweenChars)
	end
end

return AnimateUI

Video of the problem:

1 Like
2

I’ll have a video of it clipping uploaded in a minute.
edit: uploaded

3

Is there not a debounce being used in the program? I’m not 100% if that’s the problem though.

4

I mean, use For Loop instead of for key, value.

5

It seems that there isn’t a debounce set in place, you should create a system that indicates that the player is already experiencing this and not to run it on top of what’s already running.

6 
for i = 1, 1, #text do 
        local index = text[i]

        wait()
		AnimateUI.typeWrite(dialog.Frame.textframe.text, index, 0.08)
		wait(waittime)
		if(i == #text) then
			dialog.Enabled = false
			camera.CameraType = Enum.CameraType.Custom
			player.Character.Humanoid.WalkSpeed = 16
		end
	end
end

I think this will work, though it is untested. :grin:

7

Apologies for the late response, adding a debounce did not help (unless I didn’t do it right). Here’s the output if it helps.

image
image781×23 5.75 KB

(this is after 2 text lines, so it prints 5 times each time the text changes)

Here’s the updated code including the debounce.

	local debounce = false
	for i,v in pairs(text) do wait()
		if debounce == false then
			debounce = true
			print("this should only print once per text line")
			AnimateUI.typeWrite(dialog.Frame.textframe.text, v, 0.08)
			wait(waittime)
			debounce = false
			if(i == #text) then
				dialog.Enabled = false
				camera.CameraType = Enum.CameraType.Custom
				player.Character.Humanoid.WalkSpeed = 16
			end
		end
	end
end
8

Unfortunately this hung on the 1st line of text, and never changed to the second. I’ll try building on this though.

9

Quick update, figured out the problem; when the character touches the brick that activates the dialog prompt, it is registered multiple times, causing the code to go off multiple times. Thanks for all the help, everyone!

Edit: By the way, I fixed it by adding a debounce to the script that activated the event, for those wondering

1 Like