Creating Custom Animations

This section walks you through authoring your own text animation from zero: create an animation Blueprint asset → add glyph animations → override BuildDefaultAnimation → play it in UMG.

TIP

If you have not used the built-in presets yet, complete”Using Preset Animations”first to get familiar with the widget and playback flow, then return here.

Creating a Text Animation Blueprint Asset

Applies to: starting your first custom animation Blueprint asset.

UTextAnimationBlueprint is Texturge’s core authoring asset. Each animation Blueprint holds a set of UGlyphAnimation curve assets, and the Blueprint variables declared by the designer become animation parameters (this is how preset parameters like Duration / Glyph Delay are implemented).

  1. Right-click in the Content Browser → Texturge category → Text Animation Blueprint (UTextAnimationBlueprintFactory)

    Content Browser context menu location: select "Text Animation Blueprint" under the Texturge category

  2. Name the asset, e.g. TABP_Test

  3. Double-click to open the text animation Blueprint editor

Getting Familiar with the Editor

Applies to: understanding each panel when you first open the editor.

FTextAnimationBlueprintEditor provides Designer / Graph dual modes and 7 tabs:

TabDescription
Designer (AnimationDesigner)WYSIWYG design viewport (STextAnimationDesignerView) with zoom/pan/grid/font metrics
Animation List (PreviewAnimationList)Preview animation list (STextAnimationPreviewList)
Timeline (Timeline)Sequencer integration (UGlyphAnimation keyframe editing)
Details (Details)Blueprint details panel
Preview Settings (PreviewSettings)Preview parameters (text/font/viewport size)
Track List (TrackList)Legacy track list (compatibility)
Preview Viewport (PreviewViewport)Preview text animation widget

Designer viewport: WYSIWYG preview of text animation, with zoom/pan/grid and font metrics

Graph viewport: used to override BuildDefaultAnimation and orchestrate layer/factory/bake nodes

Adding a Glyph Animation Asset

Applies to: adding keyframe curve assets to an animation Blueprint.

UGlyphAnimation is a UMovieSceneSequence subclass storing 21 channels of keyframe curves.

  1. In the Animation List panel, click + to create a new glyph animation asset (UGlyphAnimation, or select an existing asset)

    Creating/selecting a glyph animation asset in the Animation List

  2. Double-click the asset to open it in the Timeline Sequencer

  3. First add a glyph animation track (Glyph Animation Track) in the timeline as the container for sub-tracks

  4. Click the + at the top-right of the track to add concrete sub-tracks (10 types: Opacity / Translation / Scale / Tint, etc.)

  5. Add keyframes on the sub-track’s FloatChannel and adjust curves (a 1-second key axis is the preset convention)

    Track settings and keyframe editing: adjusting FloatChannel curves on a sub-track

TIP

The editor preview defaults to the "Hello Texturge" preview text (UTexturgePreviewSceneConfig::PreviewText), which can be changed in the Preview Settings panel.

Building the Default Animation

Applies to: normal custom animation creation. You need to override BuildDefaultAnimation; otherwise you only get the default baked result of a single GlyphAnimation.

BuildDefaultAnimation is a BlueprintNativeEvent on UTextAnimInstance, called by FAnimationCompiler::BakeAllStages during baking. Overriding it gives you control over curve assets, scheduling, layer composition, and factory post-processing.

1. Switch to Graph Mode

  1. Switch to Graph mode in the text animation Blueprint editor
  2. Right-click in the event graph → OverrideBuild Default Animation
  3. Add the Event BuildDefaultAnimation node, which takes GlyphCount and Text as inputs

2. Override Flow

  1. Drag a glyph animation variable: directly drag an added UGlyphAnimation variable (e.g. TABP_Test) from the Blueprint variable list — no array indexing needed
  2. Create the base layer: use Create Glyph Animation Layer (Text), connect the glyph animation variable to Glyph Animation, connect Text from the event input, and choose Override as the blend mode
  3. Create the factory: use Create Factory (Text) with the base layer and Text; it builds the schedule automatically
  4. Add overlay layers (optional): create additional layers with Create Glyph Animation Layer (Text) using Additive / Multiply / CrossFade, then add them to the factory with Add Layer
  5. Factory-level post-processing (optional): use nodes such as Multiply Glyph Translation / Add Glyph Rotation for global tweaks
  6. Bake and return: call Bake and connect the returned FBakedStage to the event’s return value

Only use Build Schedule Info and nodes like Set Glyph Delay / Set Start Delay when you need advanced per-glyph control such as staggering, skipping whitespace, or classification-based scheduling.

3. Key Points

  • GlyphAnimations must contain at least one valid asset; otherwise the default implementation returns an empty stage
  • Every Layer/Factory node returns itself, so calls can be chained
  • Factory-level overrides apply once to the final combined state and are not multiplied by the number of layers
  • Index = -1 means the operation applies to all glyphs

Blueprint graph overview: BuildDefaultAnimation override event wiring drag glyph animation variable → CreateLayer(Text) → CreateFactory(Text) → AddLayer → Bake → return

Compiling the Animation Blueprint

Applies to: compiling the Blueprint after configuration to generate runtime baked data.

  1. Click the Compile button in the toolbar
  2. FTextAnimationBlueprintCompilerContext runs Kismet compilation, generating a UTextAnimationBlueprintGeneratedClass and incrementing CompileCount
  3. After compilation the cache invalidates and the preview source auto-switches (None → Glyph Animation), triggering a re-bake
  4. Observe the animation in the preview viewport

NOTE

The preview text is only for real-time editor preview and does not affect the actual display text of UAnimatedTextBlock at runtime. Runtime text is controlled independently by the widget’s Text property.

Using in UMG

Applies to: binding the compiled animation Blueprint to a UMG widget.

Creating the Widget

  1. Right-click in the Content Browser > User Interface > Widget Blueprint, name it WBP_HelloWorld
  2. Search for Animated Text Block in the Palette and drag it onto the canvas
  3. Adjust the widget’s size and position

Create widget and bind animation blueprint result: Animated Text Block on canvas configured with TABP_Test

Binding the Animation Blueprint

  1. Select the Animated Text Block widget (UAnimatedTextBlock) on the canvas and set Text Animation Blueprint to TABP_Test in the Details panel
  2. Set the Text property to the runtime display text
  3. Optional: check Auto Play or Loop Playback
  4. Compile and save the widget

Fine-Tuning via Parameter Overrides

Expand the 6 override maps under Instance Parameter Overrides (UAnimParameterOverrides) in the Details panel to override Blueprint default variables per widget instance:

Override groupKeyValue type
Float Overridesvariable namefloat
Int Overridesvariable nameint32
Bool Overridesvariable namebool
Vector Overridesvariable nameFVector
Color Overridesvariable nameFLinearColor
Vector2D Overridesvariable nameFVector2D

Each variable row has a Reset button (restores the Blueprint default; the CDO is never modified).

Complete parameter list created in Blueprint: showing variables such as Duration, Glyph Delay, Intensity

Complete parameter list displayed in UMG Details panel: all Blueprint variables listed under Instance Parameter Overrides

Testing

Applies to: verifying actual in-game playback in PIE.

  1. Create the widget in a level and add it to the viewport (Level Blueprint: Event BeginPlayCreate WidgetAdd to Viewport)
  2. Run PIE (Alt+P)
  3. The text plays according to the animation defined by the animation Blueprint

Runtime Control

Applies to: dynamically controlling playback and parameters in Blueprint or C++.

UAnimatedTextBlock Blueprint nodes:

  • Play / Pause / Resume / Stop / Skip to End / Is Animating
  • Set Blueprint Variable (6 overloads: Float/Int/Bool/Vector/Color/Vector2D) — modify animation parameters at runtime, triggering a cooldown re-bake (3 frames)
  • Events: Glyph Revealed (Blueprint), Animation Complete (Blueprint)

NOTE

VariableName must match a variable declared in the animation Blueprint’s Class Defaults (FName comparison is case-insensitive). For int32 / bool use the Set Blueprint Variable (Int) / Set Blueprint Variable (Bool) overloads.

At this point you have completed the full authoring workflow from asset creation to runtime playback.

TIP

Publish your custom animation as a preset: after finishing, configure a tag entry for it in a Data Asset to reuse it in rich text via <anim id="..."> tags just like the built-in presets. Continue with”Multi-Layer Animation”and”Advanced Effects”for further learning.