GSmGpE6CwX2y9JjB25B8
We use cookies on this site to enhance your user experience

Animating Text

Animating Text

Aug 29 2019, 9:19 AM PST 5 min

Outputting in-game text like NPC conversations, player instructions, and prompts can be visually enhanced with effects like this:

Typewriter Module

The following module mimics the effect above and can be used on virtually any TextLabel or TextButton. To use it in your game:

  1. Create a new ModuleScript within ReplicatedStorage.
  2. Rename the new script TypeWriter.
  3. Copy the following code into the script.
local SOURCE_LOCALE = "en"

local LocalizationService = game:GetService("LocalizationService")
local Players = game:GetService("Players")

local player = Players.LocalPlayer

local translator = nil
pcall(function()
	translator = LocalizationService:GetTranslatorForPlayerAsync(player)
end)
if not translator then
	pcall(function()
		translator = LocalizationService:GetTranslatorForLocaleAsync(SOURCE_LOCALE)
	end)
end

local TypeWriter = {}

local defaultConfigurations = {
	delayTime = 0.2,
	extraDelayOnSpace = true
}

function TypeWriter.configure(configurations)
	for key, value in pairs(defaultConfigurations) do
		local newValue = configurations[key]
		if newValue ~= nil then
			defaultConfigurations[key] = newValue
		else
			warn(key .. " is not a valid configuration for TypeWriter module")
		end
	end
end

function TypeWriter.typeWrite(guiObject, text)
	guiObject.AutoLocalize = false
	guiObject.Text = ""
	local displayText = text
	if translator then
		displayText = translator:Translate(guiObject, text)
	end
	for first, last in utf8.graphemes(displayText) do
		local grapheme = string.sub(displayText, first, last)
		guiObject.Text = guiObject.Text .. grapheme
		if defaultConfigurations.extraDelayOnSpace and grapheme == " " then
			wait(defaultConfigurations.delayTime)
		end
		wait(defaultConfigurations.delayTime)
	end
end

return TypeWriter

Key features of this module are:

  • Supports localized translations for outputting text in languages which you’ve configured in the articles/Introduction to Localization on Roblox|localization portal.
  • Easy customization options like text output speed and whether there’s a natural delay between word breaks in a sentence.
  • Full support for UTF-8 encoding when outputting non-Latin characters as in Chinese or Korean.

Script Implementation

To display typewritten text using the module, you’ll need a GUI object which can display text, for instance a TextLabel. If you’re unfamiliar with text labels and their basic options, see articles/Intro to GUIs|Intro to GUIs.

  1. Create a TextLabel. For testing, a suitable location is within a ScreenGui parented to StarterGui.
  2. Create a new LocalScript as a direct child of the TextLabel.
  3. Copy the following code into the new LocalScript. Feel free to change the text within quotes on line 7 to whatever text you desire.
-- Roblox services
local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- Require module
local TypeWriter = require(ReplicatedStorage:WaitForChild("TypeWriter"))

TypeWriter.typeWrite(script.Parent, "Beyond this door is the Great Zorgoth...")
  1. Playtest your game in Studio and the text should be output letter by letter in the TextLabel.

Configuration Options

For convenience, the module contains a configuration function which accepts these parameters:

Parameter Description Default
delayTime Delay time, in seconds, between output of each text character. 0.2
extraDelayOnSpace Whether to add a natural delay when a space in the text string is encountered. true

To change these settings, simply call the configure() function of the module, for instance:

-- Roblox services
local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- Require module
local TypeWriter = require(ReplicatedStorage:WaitForChild("TypeWriter"))

TypeWriter.configure({
	delayTime = 0.05,
	extraDelayOnSpace = false
})

TypeWriter.typeWrite(script.Parent, "Beyond this door is the Great Zorgoth...")
Tags:
  • text
  • animate
  • localization