MAKING A DYNAMIC COMBO SCORE INDICATOR
A SNEAK PEEK INTO DYNAMIC UI TEXT EFFECTS
Hello adventurers!
Animations can enhance UI, cautious use is crucial, where resources are often constrained. Integrating shaders into UI workflows offers several advantages such as optimizing game performance, creating reusable modular assets, speeding up iteration, and simplifying accessibility implementation.
To explore shader-based UI effects, an animated text material for a dynamic score indicator was developed in Unreal Engine 5.4 (UE5) using Unreal Motion Graphics (UMG) and the UI Material Lab (nodes starting with ‘MF_UI’ belong to the UI Material Lab plugin (nodes starting with ‘MF_UI’ belong to the UI Material Lab).
Inspired by Devil May Cry’s combo text I decided to create a similar effect with added dynamic translation and scale effects.
Let’s dive into the process.
1. Translation and Scaling
To create a reusable dynamic text translation, OffsetX and OffsetY parameters were used to be able to control movement along the X and Y axes separately while the Append node combines offsets into a single translation vector. The TexCoord provides UV coordinates as the basis for transformation, and the MF_UI_Translate function applies the translation effect. The final output is connected to the Position Offset named reroute.
Similarly, to create a dynamic scaling effect, the TexCoord node provides UV data and the Mask (R G) isolates the red and green channels. The coordinates are centered and normalised before scaling is applied. Controlled by a ScaleMultiplier parameter, the final output is connected to the Scale Offset named reroute.
2. Timer Effect
For the timer indicator fill, a FillAmount parameter controls the visible portion of the material, while the SmoothStep ensures smooth transition. The Saturate node is free on most modern graphic software and is used to clamp the values between 0 and 1. The MF_UI_WaveWarp function adds a wave distortion to the UVs, animated over time using MF_UI_LinearTime. The Mask (G) ensures the fill is happening only on the Y axis.
The result is similar to a progress bar-like animation. The fill amount decreases over time, and the wave distortion adds a bit of visual noise to the line so that the edges look less harsh.
The final setup. To manipulate the text body, the translation and scale effects are added a the Absolute Screen Position node connected to the Screen Position input of the material.
3. Animation
The motion effects are made within the material, using control parameters to manage animations through the Sequencer. Animating directly in materials is generally considered more performant as the GPU is used instead of the CPU. Two key control parameters, Updated and FillAmount, are fed into Lerp nodes to enable runtime adjustments and smooth, time-based animations. Updated controls the offsetting, while FillAmount adjusts the fill effect.
For initial testing, the UI Material Lab’s MF_UI_LinearTime and MF_UI_EaseCurves were used to quickly validate the material’s functionality before integrating it into the final setup.
The approach later transitioned to using Color Curves and Atlases, which store animation graphs efficiently in color channels. Each channel represents a different motion, and Curve Atlases allow multiple curves to be stored compactly. Managing control parameter via Blueprints instead of using the Sequencer could further improve performance.
4. Functionality
To implement the functionality, two Widget Blueprints were created:
Separating these components ensures modularity, making the functionality reusable and adaptable, for example, to create the Chromatic Aberration effect. To achieve the effect, three Score Text Widgets were used with slightly different parameters (position offset, scale and base color). Once the timer ends, the values are reset, and the text disappears.
This modular setup, with customizable parameters, allows for quick adjustments directly in the editor.
For this exercise, randomized values are used, but the idea is that the offsets could be tied to the score amount or action type. Imagine an uppercut moving the text up or a crouching kick making it go down. You can go as crazy as you like with the values!
Resources
Blueprints