CountdownTimer Part 3

The previous timer lesson repairs the seconds reset and zero-boundary comparisons. This lesson gives that countdown a visible Widget Blueprint, binds its text to the GameMode’s variables, and fixes a negative terminal value exposed by the new display.

The distinction between debug printing and a bound display drives the final correction. A selected print path can omit a transient value that the underlying variable still contains; a widget reading that variable can reveal it. The exact Unreal Engine release is unidentified, and the demonstration uses the side-scroller template’s local game setup.

Arrange minute, separator, and second text

At 00:01–03:00, a Widget Blueprint named HUD is created. Three text elements form the timer: minutes, a colon, and seconds. Font size, placement, and opposing text justification are adjusted to produce the intended display.

This is a visual layout only. Playing the level does not show it yet because creating a widget asset is different from creating and adding a runtime widget instance to the viewport.

The lesson’s use of “HUD” is the name and role of the Widget Blueprint being built. It does not demonstrate a separate custom HUD Actor implementation or a complete responsive UI layout system.

Create the runtime widget and add it to the viewport

During 03:00–04:01, the GameMode receives an Initialize HUD custom event. It creates an instance of the HUD widget class, then passes the returned widget reference to Add to Viewport. The initialization event is called from the existing startup flow.

The next play test shows the timer text at the bottom of the screen. At this point it still displays its design-time values; the countdown variables are not yet bound to it.

Check the class chosen in Create Widget and the object supplied to Add to Viewport. A correctly designed asset will remain invisible if the startup event is not called or the returned instance is not added.

This placement in GameMode is demonstrated in the local template. The recording does not establish remote-client widget creation or replicated timer state for a multiplayer game.

Bind each field to the matching GameMode variable

At 04:01–08:01, a Text binding is created for the minute field. Get Game Mode provides the runtime object, and access through the side-scroller GameMode type makes its timer variables available to the binding.

The instructor initially selects Seconds for the minute field, then corrects it to Minutes. Increasing the GameMode’s default Minutes value provides a visible check that the correct variable reaches the field.

The seconds field receives its own binding to Seconds. Its integer is converted to text for the binding’s return value. Play now shows the changing countdown in the widget rather than only in debug output.

Keep the data source and display target paired correctly. Two working bindings can still display an incorrect timer if both read Seconds or if their return values are attached to the wrong text fields.

The source does not build a separate cached view model or an event-driven UI update system. It demonstrates direct text bindings to the existing GameMode state.

Format seconds with at least two digits

During 08:01–10:01, the binding functions are renamed to identify minute and second values. In the seconds binding, To Text (Integer) is configured with Minimum Integral Digits set to two.

That makes a value such as five display as 05 while a value such as 59 already has the required width. It changes the presentation of the integer, not the stored seconds value or the countdown’s arithmetic.

The next test shows the two-digit seconds display and rollover to 59. Formatting solves the single-digit appearance, but it does not yet ensure that the final stored values remain nonnegative.

Reset the stored values when the countdown expires

At 10:01–13:09, the instructor tests with zero minutes and ten seconds. The widget reveals a negative value at expiration, despite the previous debug-oriented behavior appearing acceptable.

The countdown’s strict less-than-zero checks allow the internal decrements to cross below zero before reaching the terminal path. In that terminal path, the instructor adds assignments setting both Minutes and Seconds to zero.

The final test stays at zero because the stored values are explicitly reset and the repeating countdown path no longer continues. This is a state correction, not merely a text filter that hides a negative sign.

Verify both the final widget and the underlying variables when following this repair. A display formatted as 00 could conceal incorrect state if only its text were altered; the demonstrated change instead writes zero back to the timer variables.

The completed series checkpoint now includes the repaired rollover from Part 2, a runtime widget, correctly paired bindings, two-digit seconds, and zeroed terminal state. It does not establish exact wall-clock precision, pause/resume behavior, duplicate-start protection, or a multiplayer synchronization design. The final result should be assessed within those demonstrated limits.