Animating Text

Animating Text

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.

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.
  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:

  • text
  • animate
  • localization