Animating Text

5 min

Game UI can be significantly enhanced by outputting in-game text like NPC conversations, player instructions, and prompts with animated effects.

Animation Module

Animation effects can be bundled into a ModuleScript for convenient access from multiple text objects in your game.

Create a new ModuleScript within ReplicatedStorage.
Rename the new script AnimateUI.

Paste the following code into the script:

			
				ModuleScript - AnimateUI
			
				Expected Output
			
				Expand
				
			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
		
				Copy Code
			
				Light Theme

If your game's source language is not English, change the articles/localization portal additional features#locale-code-reference|locale code on line 4 (en) to match the game's source language setting in the localization portal.

Typewriter Effect

The “typewriter” effect is ideal for TextLabel|TextLabels that tell a story, output NPC conversations, etc.

Create a TextLabel (for testing, a suitable location is within a ScreenGui parented to StarterGui).
Insert a new LocalScript as a direct child of the label and paste in the following code. Note that each message is output by calling AnimateUI.typeWrite with parameters for the parent object, the string to output, and the delay between characters.

			
				LocalScript - Typewriter Effect
			
				Expected Output
			
				Expand
				
			local ReplicatedStorage = game:GetService("ReplicatedStorage")

local AnimateUI = require(ReplicatedStorage:WaitForChild("AnimateUI"))

local label = script.Parent

-- Load translator if game is localized
--AnimateUI.loadTranslator()

local message1 = [[Beyond this door is the<br /><font size="46" color="rgb(255,50,25)">Great Zorgoth...</font> <font size="40">🗡</font>]]
AnimateUI.typeWrite(label, message1, 0.05)

wait(1)

local message2 = [[...who rules this dungeon <font color="rgb(255,200,50)">unchallenged!</font> <font size="30">😈</font>]]
AnimateUI.typeWrite(label, message2, 0.05)
		
				Copy Code
			
				Light Theme

How it Works »

The module’s AnimateUI.typeWrite function works as follows:

Initial setup occurs, including declaration of the displayText variable equal to the text parameter, and text translation if a Translator has been loaded by the module’s AnimateUI.loadTranslator function.

If the text uses articles/gui rich text|rich text tags, XML/HTML line breaks and other formatting characters are replaced, then the translated/modified text is set on the parent.

The displayText string is iterated over by UTF-8 grapheme clusters, increasing the TextLabel/MaxVisibleGraphemes property with a wait of delayBetweenChars between characters.

Tags:

text
animate
localization

Animating Text

Animating Text

Animation Module

Typewriter Effect

How it Works »

Related Articles

Utilizing Localization APIs

Localizing Non-Text Instances