Radial Skill Check Architecture in Unreal Engine: How It Works

This is the first step of the Radial Skill Check in Unreal Engine guide. Before any code, it is worth being clear about how the pieces are arranged, because the whole thing is easier to follow once you see that the gameplay and the visuals are kept completely apart.

One number does the work

The mechanic is built around a single value: the gauge angle, normalized to 0-1 around the dial, where 0 is the top and 1 is a full turn back to the top. Everything is expressed on that same line:

• the gauge’s current position is a 0-1 angle;
• the good zone is a start angle plus a size, both 0-1;
• the great zone is another start angle plus a (smaller) size, nested inside the good zone.

Keeping it unitless makes it resolution-independent and lets the same number mean three things at once: a fraction of a turn for the needle, an arc length for the material, and a target range for scoring. The degrees only appear at the very end, when the widget rotates the needle by angle * 360.

Three layers that never reach across

The system is three layers, and the discipline is that each one only talks to its neighbour:

1. The component (USkillCheckComponent, a C++ ActorComponent) owns all the logic. It advances the angle every tick, randomizes the zones, scores the stop, fires events, and plays sounds. It never touches a pixel.
2. The widget (WBP_GaugeSkillCheck, on the UUI_RadialCheckWidget C++ base) owns presentation. It does almost nothing: it rotates one image and forwards the component’s numbers into materials.
3. The materials (M_DynamicRadialSlice, M_StaticBackgroundCircle) own rendering. They draw a ring and cut an arc out of it, driven entirely by parameters.

Because the seam between gameplay and visuals is just “a handful of normalized numbers,” you can rebuild the look completely, swap the materials, change the art, restyle the dial, without touching the logic, and vice versa.

The widget is mostly empty

Open WBP_GaugeSkillCheck and the hierarchy tells the whole story. Four images stacked in an overlay inside a SizeBox:

• Image_StaticCircle: the background ring, drawn by M_StaticBackgroundCircle.
• Image_AreaGood: the good zone arc, a dynamic instance of M_DynamicRadialSlice.
• Image_AreaGreat: the great zone arc, a second instance of the same material.
• Image_Gauge: the needle. This is the only thing that actually moves, and the C++ base class rotates it for you.

Notice what is missing: there is no logic in the widget for where the zones are or how big they are. Those arrive as numbers from the component and get pushed straight into the two arc materials. The needle spins; the arcs just recolor and resize.

What the base class hands you

The UUI_RadialCheckWidget C++ base does three jobs and then steps aside:

• it rotates Image_Gauge from the current angle (SetCheckAngle -> angle * 360 degrees, around a configurable pivot);
• it exposes setters for the four zone values: good size, great size, good start angle, great start angle;
• it calls a Blueprint event, OnZoneValuesUpdated, whenever those values change, so your graph can write them into the materials.

Everything past that point, the dynamic material instances, the colors, the arcs, lives in the Widget Blueprint, which is exactly why the look is yours to change.

The rest of the guide

With the shape in mind, the remaining steps build each layer:

• the rotating gauge: the tick math that advances the angle and spins the needle;
• randomizing the zones: placing the good and great targets each check;
• the arc material: how a ring becomes a colored slice;
• wiring the widget: pushing the numbers into the materials;
• scoring and events and triggering: turning a stop into an outcome and deciding when checks appear.

If you would rather drop the finished system in, the Radial Skill Check plugin packages all of it.