Create a custom animated timer for time sensitive games. With UI animations, you can make the timer pulse and disappear, or even add a custom countdown material that surrounds the clock.
This tutorial shows you how to:
Set up a material.
Animate a clockface.
Change the clock color.
Create a User Widget in the Content Browser by following the instructions in the UI Pop-Ups tutorial.
Step 1: Set Up the Widgets
Once you’ve created the User Widget, double-click the User Widget thumbnail to open the Widget Editor.
Drag an Overlay widget into the widget graph and resize it to 1920 x 1080 by dragging the bottom right-corner. This widget acts as the screen where the UI will display.
Right-click on the Overlay widget in the Hierarchy panel to rename the widget to Root. This name also reminds you that it is the widget acting as a model of the screen.
Drag a second Overlay widget into the Root widget. This widget will contain all the widgets that make up the design and function of the animated timer.
Rename the second Overlay widget to ParentContainer in the Hierarchy panel.
In the Details panel, set the following properties:
Padding = 25.0
Horizontal Alignment = Center Alignment Horizontally
Drag a Size Box widget into the ParentContainer widget. This will determine and enforce the size of its child widgets. The child widgets of the Size Box will become the clock face.
Rename the Size Box widget to BGSizeBox in the Hierarchy panel.
In the Details panel, set the Horizontal Alignment and Vertical Alignment to Center Alignment.
Check to select the Minimum Desired Width and Maximum Desired Height to toggle this option on, then set the properties to 130.0.
The container should sit in the Root widget as shown below
Drag an Image widget into the BGSizeBox widget.
Rename the Image widget Timer in the Hierarchy panel.
In the Details panel, set the Horizontal Alignment and Vertical Alignment to Center Alignment.
Add a material instance to the Brush > Image property. This could be a material that counts down the time.
The material fills the space inside the Parent Container widget.
Drag a Text Box widget into the Parent Container widget.
Rename the Text Box widget to TimerText in the Hierarchy panel.
In the Details panel, set the Text property to 00:00.
The Timer Text widget sits directly in the middle of the User Widget.
Next, you’ll animate the Timer Text widget to make the time more dynamic during the Urgency state.
Step 2: Animate the Timer Text
To create a feeling of imminent danger to the urgency state during the last few seconds of your timer, animate the clock time.
In the animation created below, the timer text will enlarge, turn red, then fade away. This animation will repeat for the duration of the Urgency mode set in the Timer device.
Click Animations at the bottom of the Widget Editor screen. This opens a Sequencer panel where you can create animations and add widgets to the animation sequence.
Click +Animation to create an animation file in your User Widget.
Name the animation Urgency. This animation will be set later when you add bindings to the User Widget.
A blue SELECTED square surrounds the Widget Graph.
Click +Add to open the list of objects that can be added to the animation in the User Widget.
In the Hierarchy panel, select the TimerText widget.
Select TimerText from the list to add TimerText to the Sequencer panel.
Next to TimerText, select the + icon to open the list of properties that can be animated.
Select Transform from the list. This adds all the ways you can transform the text: Translation, Rotation, Scale, and Shear.
Open the Scale options and select the + Keyframe icon to add keyframes to the timeline. The X-axis and Y-axis options increase and decrease the size of the text when you input new values.
Move the playhead in the timeline to 0.25 seconds, change the X-axis and Y-axis values to 1.5, then press the +Keyframe icon next to the X-axis and Y-axis options. Keyframes appear in the timeline showing a progression on the TimerText.
Move the playhead in the timeline to 0.5 seconds, change the X-axis and Y-axis values to 2.0, then press the +Keyframe icon next to the X-axis and Y-axis options. Additional keyframes appear in the timeline showing a progression of the text.
Select the + icon next to TimerText and select Color & Opacity from the list. This adds Red, Green, Blue, and Alpha properties to Sequencer.
Reset the playhead in the timeline and select the + Keyframe icon next to Color & Opacity. This sets the first keyframe for each of the Color & Opacity properties in the timeline.
Expand Color & Opacity, change the Red value to 1.0, the Green value to 0.0, and Blue values to 0.0. This creates a red color.
Move the playhead to 0.25 seconds, then select the + Keyframe icon next to each of the Properties under Color & Opacity. This adds keyframes to the timeline.
Move the playhead to 0.5 seconds, change the Alpha value to 0.0, and select the + Keyframe icon. When the animation reaches the last keyframes in the timeline the text disappears.
If you move the playhead back and forth across the timeline, you’ll see the animation you created play in the Widget Graph.
Next, you’ll add a View Model and add View Bindings to replace the Timer device with the User Widget.
Step 3: Add the View Bindings
To replace the default Timer device UI, you’ll bind the Text Box widget (TimerText) to the Timer device’s settings.
From the Windows menu, select Viewmodel. The Viewmodel window opens.
Click +Viewmodel, then select Device - Timer View Model > Select. All the Timer device viewmodels are now available to be bound to your User Widget.
In the Hierarchy panel, select the TimerText widget.
Click View Bindings on the bottom toolbar to open the View Bindings panel.
Click +TimerText Widget to add the TimerText widget to the View Bindings panel.
Select the TimerText field to open the widget properties dropdown menu.d
In the dropdown menu, select TimerText > Text > Select. This identifies the TimerText widget’s Text as the property being bound.
Select the blank right field to open the bindings dropdown menu.
From the bindings dropdown menu, select TimerText ViewModel > Current Time > Select. This binds the TimerText widget to the current time for the Timer device, and displays the current time on screen.
Next, you’ll add the animation to the viewmodel so it plays on screen during Urgency mode.
Step 4: Add the Animation
You’ll add the animation similarly to how you added the bindings for TimerText in the View Bindings panel.
Select +Add Condition at the top of the View Bindings panel. This adds a conditional row to the View Bindings panel.
Open the viewmodel dropdown menu and select the User Widget > Select. This adds the User Widget to the Condition.
Select the left field to open the viewmodel binding dropdown.
Select the Creative Timer ViewModel > Is Urgency > Select. This uses IsUrgency as a comparison property to see if it equals a specific value, then, based on the value that was returned (true/false), it triggers the animation.
Change the time field to 1.0. This means that if Is Urgency is equal to 1.0, then the value is true and the animation plays.
Select the right field to open the queue dropdown menu and select the User Widget > Queue Play Animation > Select. Now the animation you created will queue to play when the Is Urgency mode equals 1.0.
Next to In Animation, select the binding icon so it turns into a blue Link icon.
Select the In Animation field, then select User Widget > Animation name > Select. The selected animation plays when queued.
Customize the Start at Time value to 10.0. This value is the second/frame when the animation should start playing. If set to 0.0, this means it'll play the animation starting at the animation 0.0 seconds/frame.
Set Playback Speed to 0.5. This causes the animation to play at half the set speed in Sequencer.
Click Compile to save your User Widget.
Step 5: Add the Timer Device
The last step is to add a Timer device to the viewport and customize its settings.
From the Content Browser, select the Fortnite > Devices folder to open all the device folders.
Type Timer in the Asset View search bar to surface the Timer device.
Drag the Timer device into the viewport.
From the Details panel, set the Duration to 30.0 seconds.
Expand the Advanced option to reveal Custom Widget Class.
Select your User Widget from the Custom Widget Class dropdown menu.
Under the second Advanced option set, use the following settings:
Can Interact = No
Completion Behavior = Reset
Visible During Game = Hidden
Enable Urgency Mode = Check
Urgency Mode Time = 10.0 seconds
Now players can’t interact with the device, and when the Timer runs through its set Duration time, it will reset. With Urgency Mode enabled, your custom animation will now queue and play for the time set under Urgency Mode Time.
Save your changes, then playtest your project to see the User Widget working in the HUD.
Your playtest should result in the custom time replacing the default Timer device and playing the animation during the specified time.
On Your Own
There are a few ways you can make the timer unique to your own project.
Add a material around the TimerText that slowly disappears as the timer runs down.
Add a texture to surround the TimerText that looks like a clock.
Move the timer to the corner rather than in the center of the screen.