Gradually appearing text (recursive)

Hello everybody this is my first community resource so i hope people actually find this useful!
This script is about creating a gradually appearing text like you have probably seen in multiple games by now.

This resource uses recursive functions in order to print each letter out.

Only thing you have to do is put the sentences you want to print out in a StringValue contained within numbered folders.

With a little bit of editing you can add more effects like pausing on a period for 1 second e.t.c.
In order to add anything you may want you only have to edit the Dialogue function. Here is an example that pauses briefly when encountering double dots:

function Dialogue(plr,pointer,MaxPTR,Object)
	local tab = {}
	plr.PlayerGui.Dialogue.Mai.Main.Title.Text = Object.Name
	tab = decodestring(Object.Dialogue[pointer].Des.Value,1,tab)
	for i,v in pairs(tab) do
		plr.PlayerGui.Dialogue.Mai.Main.Dialogue.Text = plr.PlayerGui.Dialogue.Mai.Main.Dialogue.Text..v
		if v == "." and tab[i+1] == "." then
			wait(1)
		else
			wait(.02)
		end
	end
	wait(3)
	if pointer >= MaxPTR then
		plr.PlayerGui.Dialogue.Mai.Main.Dialogue.Text = ""
		plr.PlayerGui.Dialogue.Mai.Visible = false
		return
	else
		Dialogue(plr,pointer+1,MaxPTR,Object)
	end
end

Applications:

  • Tutorials
  • Dialogues
  • e.t.c

Details:
In order to use it in your own projects you must have a basic understanding of lua in order to edit the script properly(mainly regarding the ui elements). This is a module script and therefore must be called by another script.

Table visualization:
table = {[1] = “This is a community resource about gradually appearing text”,
[2] = “Thanks for reading”
}
this will do the following
T
Th
Thi
This
…
This is a community resource about gradually appearing tex
This is a community resource about gradually appearing text
T
Th
Tha
Than
Thank
Thanks
…
Thanks for reading

Format I used:
image

Each number represents a different sequence meaning when it has finished printing out all the letters it will wait 5 seconds before wiping the text in the ui and printing the next sequence so it goes 1->2->3 e.t.c

image
Keep in mind you can use any format you want as long as you edit the script properly

In order to initialize the script you must call the following function:

DialogueModule.PlayDialogue(plr,Object)

Object represents the part/folder that contains the Dialogue folder (see screenshot 1)

The module:

local DialogueModule = {}

local function decodestring(strin,curr)
	local tab = {}
	if curr <= string.len(strin) then
		table.insert(tab,curr,string.sub(strin,curr,curr))
		decodestring(strin,curr+1)
	else
		return tab
	end
end


function DialogueModule.Dialogue(plr,pointer,MaxPTR,Object)
	local tab = {}
	plr.PlayerGui.Dialogue.Mai.Main.Dialogue.Text = Object.Name
	tab = decodestring(Object.Dialogue[pointer].Des.Value,1,1)
	for i,v in pairs(tab) do
		plr.PlayerGui.Dialogue.Mai.Main.Dialogue.Text = plr.PlayerGui.Dialogue.Mai.Main.Dialogue.Text..v
		wait(.02)
	end
	wait(5)
	if pointer >= MaxPTR then
		plr.PlayerGui.Dialogue.Mai.Main.Dialogue.Text = ""
		plr.PlayerGui.Dialogue.Mai.Visible = false
		return
	else
		DialogueModule.Dialogue(pointer+1)
	end
end

function DialogueModule.PlayDialogue(plr,Object)
	local MaxPTR = #Object.Dialogue:GetChildren()
	DialogueModule.Dialogue(plr,0,MaxPTR,Object)
end

return DialogueModule

How can I use this on my own ui?
In order to use this on your own ui you should keep the format used in the first screenshot and edit the script properly to match your ui. Here are 2 lines you would have to change for example:

plr.PlayerGui.Dialogue.Mai.Main.Dialogue.Text = ""
plr.PlayerGui.Dialogue.Mai.Visible = false

Thank you for reading! This is my first community resource post so I really hope you found it useful. Please leave any feedback or questions you may have in the comments so I can improve this resource. If you believe this post should be in the tutorials section instead please message me so I ask for it to be moved!

1 Like

Here’s a suggestion: Take advantage of the MaxVisibleGraphemes property.
It’s not documented very well on the wiki, but you can read more about it here:

Using MaxVisibleGraphemes is more efficient, and doesn’t have a chance to cause small artifacts.

1 Like