Typewriter effect not working when user clicks to skip effect

For my game tutorial I am making a gui where words appear with a typewriter effect, I have added a click to skip feature which stops the effect putting all of the text on screen instantly.
This works fine the 1st time, when I click, all of the text appears. However, when using another bit of text, it runs fine with the typewriter effect but when i click it fills with the old text.

Script
if Time.Value < 1 then
	
	local function typewrite(object, text)
		for i = 1,#text,1 do
			object.Text = string.sub(text,1,i)
			wait(0.06)
			clickDetector.MouseButton1Up:Connect(function()
				textLabel.Text = text
				brokenLoop = true
			end)
			if brokenLoop == true then 
				brokenLoop = false
				break -- breaks loop if user clicks
			end
		end
	end
	
	wait()
	screenGui.Enabled = false
	tutorial.Enabled = true
	typewrite(textLabel,"Hi there! You must be new here, if you are I recommend playing through the tutorial, to give you the greatest experience.")
	startButton.Visible = true
	skipButton.Visible = true
	skipButton.MouseButton1Up:Connect(function()
		tutorial.Enabled = false
		screenGui.Enabled = true
	end)
	
	startButton.MouseButton1Up:Connect(function()
		blackTransition.Visible = true
		local Tween = TweenService:Create(blackTransition, tweenInfo, {ImageTransparency = 0})
		Tween:Play()
		
		skipButton.Visible = false
		startButton.Visible = false
		
		wait(1)
		camera.CameraType = Enum.CameraType.Scriptable
		camera.CameraSubject = cameraOne
		camera.CFrame = cameraOne.CFrame
		
		local Tween = TweenService:Create(blackTransition, tweenInfo, {ImageTransparency = 1})
		Tween:Play()
		
		typewrite(textLabel,"this is a test")
		
		local tweenGoal = {CFrame = cameraTwo.CFrame}
		local tweenAnim = TweenService:Create(camera, cameraTweenInfo, tweenGoal)
		tweenAnim:Play()
		camera.CameraSubject = cameraTwo
	end)
	
end

More specifically, when I want the text to show “this is a test” fully when clicked, it instead displays the previous message.

2 Likes

The reason that it isn’t working is because you never disconnect the function above. Meaning that every time it’s clicked it will call that function even after the for loop has finished. I am going to supply code that I believe should fix it, but it also uses the new property that Roblox recently introduced. Typewriter Effect: New property MaxVisibleGraphemes (Live) - #3 by PysephDEV

This should work if you just replace the current typewrite function with both of these functions, though with your use case the removeTags function might not be necessary.

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 function typewrite(object, text)
	object.Text = text
	object.MaxVisibleGraphemes = 0
	local displayText = removeTags(script.Parent.LocalizedText)
	
	local tempConnection --have to declare here so I can call it in the function
	tempConnection = clickDetector.MouseButton1Up:Connect(function()
		object.MaxVisibleGraphemes = -1 --Shows the whole string
		tempConnection:Disconnect() --Cleans up the loose ends in the script.  This is essentially all you were missing that caused the error before.
	end)

	local index = 0
	for first, last in utf8.graphemes(displayText) do
		if object.MaxVisibleGraphemes == -1 then break end --Terminate the loop if it's been skipped
		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
end

But if you don’t want to use the new property, you can change this

clickDetector.MouseButton1Up:Connect(function()
	textLabel.Text = text
	brokenLoop = true
end)

to this

local tempConnection
tempConnection = clickDetector.MouseButton1Up:Connect(function()
	textLabel.Text = text
	brokenLoop = true
    tempConnection:Disconnect()
end)
2 Likes

The new typewriter function works perfectly. Thank you for alerting me of this feature as well, it will be very handy in the future.