Render text animation with RichText

Hello there,

Recently, I’ve been messing some gui and stuff, including rich text, to make a dialogue. But there was a problem, you can’t render with rich text in a classic way. Because of that, I decided to write a Module to fix this problem. When I look back at what I’ve done, I thought that there was a problem to everyone too, so I shared this module.


introduction

“Rich Text Dialogue” is a module, allows to render text with Roblox’s rich text feature without leaking tags.

Benefits:

  • Different time for different position.
  • Work with multi tags in one string.
  • Supported specific character.

https://www.roblox.com/library/5864633993/Rich-Text-Dialogue

How to use

You only need to require a module and call a function:

local Module = require(game.ReplicatedStorage.RichTextDialogue)
Module.Render(Object,"String",Time,IsContinue)
--[[
- Object: TextLabel, TextBox, TextButton
- Time: + Time.
        + {
            [Position1] = Time1,
            [Position2] = Time2
          }
-IsContinue: true, false
]]--

Example:

local String = [[<b>Bold text</b> <i>Italic text</i> <u>Underline text</u> <s>Strikethrough text</s> <font color="rgb(255,0,0)">Red text</font> <font size="20">Bigger text</font> <font face="SciFi">SciFi text</font> &amp; &lt; &gt; &quot; &apos;]]
Module:Render(script.Parent,String,0.1,false)

final_5f92f5d7f3dede004655583b_501768

Different time

TimeTable = {
   [0] = 0.1,
   [5] = 1,
   [7] = 0.1
}

Once it reaches a required position (0, 5, 7), it will render that character, then wait for a following time (0.1, 1,0.1). Note that you shouldn’t choose a position in tags, if you want to make it wait before bold or italic text, I recommend choosing position before tag.

Example:

local TimePos = {
   [0] = 0.1,
   [6] = 1,
   [10] = 0.1 --1    6   10
} --            |    |   |
local String = "Hello <b>world</b>!"
Module.Render(script.Parent, String, TimePos)

The script above would render a Hello word, each character for 0.1 seconds, and there’s a 1 second waiting time because it rendered to Position 6, then it renders the next word, World!, it ignores the tag, so it wouldn’t wait for another 1 second.


If you have any suggestion, feedback or bug, please reply below, I’d be very appreciate about that.

Logs

Edit 2:

  • Fixed bug prevented from rendering second string.
  • Render time should now be normal when under load (lower framerate).

Edit 3:

  • Supported <br/> tag.

Edit 4 → 9:

  • Supported <smallcaps> and <sc> tag.
  • Supported <uppercase> and <uc> tag.
  • Supported <!-- --> tag.
  • Fixed bug that leaks text after closing tag.

Edit 10:

  • Added new feature: Continue rendering; if true, it won’t delete text to render a new one.
  • Fixed bug that leaks text when<tag> and </tag> are next to each other.
23 Likes

Pretty nice, but please replace wait(t) with Heartbeat:Wait(). wait(t) will cause the animation to go out of sync if the client is under load.

7 Likes

Thanks for your suggestion. I’ve changed the script a little, so it should work normal with lower framerate or under load (Hopefully).

Finally had a chance to rewrite the script, it should now run better.

Feel free to use it and reply if you have a question.

2 Likes