PROTO Animated Text

This is a broad-strokes overview of how the plugin operates.

Before continuing, it is recommended to first understand how Epic's default Rich Text, Text Styles, and Decorators work.


Learn about them here.

Getting Extra Information to Font Materials

The main trick this plugin performs is getting extra information into font materials to enable per-character animations.

Unfortunately, Unreal’s font shader only gets access to a limited amount of information, and a plugin cannot modify this Engine code.

The solution is to pack more information into the vertex colors of text. When Unreal draws text, each glyph (or visible symbol) is drawn on a quad with 4 vertices. Typically, vertex colors are used to tint text in UMG, but we can replace that information with our own data packed into the R, G, and B channels.

Decorators

The mechanism the plugin uses to do this is a custom Decorator. The decorator is why text has to be marked-up with special tags, and it handles the setting of vertex colors every frame, as well as setting the alpha of characters as print-outs occurs.

ProtoRichTextBlock

ProtoRichTextBlock is the most important class in the plugin, and where the bulk of logic begins.

Behind the scenes, a ProtoRichTextBlock automatically creates the following decorators:

  • ProtoRichTextCharColorDecorator - handles packing animation data in text vertex colors.
  • ProtoRichTextImageDecorator - handles drawing in-line images.
  • ProtoRichTextWidgetDecorator - handles drawing in-line widgets.

Unlike normal Rich Text decorators, these decorators are created automatically (they do not need a blueprint child class to be created, and do not need to be listed in the Decorator Classes list on the Text Block.)

Limitations

Because of how information is packed into vertex colors, the plugin introduces limitations to text using ProtoRichTextBlock and <text> mark-up.

  • The “Color” parameter in your Text Style will no longer be used.
  • RGB Tint from parent widgets will no longer tint your text’s RGB.
    • Note: Alpha transparency from parent widgets will still work.

The result of this is that your Font Material is solely-responsible for what color your text appears. If you have two Text Styles that are identical except for color, you will need a different Material (or Material Instance) for the alternate color.