How to perform your own Text Shaping/Text Layout

Shaping is the act of transforming a simple String into a series of important data which the system needs to draw that text. After shaping comes layout: a sequence of calculations which tell the text where/how to be rendered. Think of features like justification, word wrapping, overflow handling etc. Animating the text, shaping it and laying it out are three very distinctive operations, that's why the plugin heavily separates these 3 concerns. In particular, shaping and layout are demanded to "TextGenerators", classes that have an API designed to take care of those functionalities and return what the plugin needs to just animate.

TextGenerator Base Class

When creating a new class, inherit from UBaseTextGenerator defined in "BaseTextGenerator.h".

UCLASS()
class TEXTANIMATORFEBUCCI_API UYourTextGenerator : public UBaseTextGenerator
{
    //[...]

TextGenerator Properties

At creation (or when layout changes), all TextGenerators by default get passed in these properties by the plugin:

  • FText Text

  • FSlateFontInfo Font

  • ETextJustify::Type HorizontalJustification

  • ETextOverflowMode TextOverflowMode

  • bool WordWrapping

  • float CharacterSpacing

  • float WordSpacing

  • float LineSpacing

  • ETextJustifyVertical VerticalJustification

So remember you can use them in your custom implemented logic.

ShapeText Method

This is where all the shaping takes place. The plugin will pass in an empty array where it expects the final shaped Glyphs that will be later used for layout.

LayoutGlyphs Method

This is where all the layout takes place. OutGlyphs is the same as in ShapeText: an empty array where the Glyphs resulting from the layout operations must be stored. InGlyphs are the current Glyphs cached by the plugin.

OnBeforeRenderingGlyphs Method

This hook was left for any non-layout dependant custom final logic to be executed just before rendering the glyphs. An example would be per-style rendering effects (drop shadows, outlines, glows, etc).

Passed arrays are the same as LayoutGlyphs.

Creating and pluggin a TextGenerator

After creating a new class inheriting from UBaseTextGenerator, either via Blueprints or C++, that class will appear in the TextGenerator property dropdown in the plugin's widget details:

DefaultTextGenerator Example

Remember we included a fully fledged UDefaultTextGenerator class where you can see how we implemented text shaping and layout from scratch.