This walkthrough provides an example of a UMG (Unreal Motion Graphics) design and its View Model bindings that you can use to create a custom UI for the Skilled Interaction device.
As you create your custom skilled interaction, make sure to set an event to begin the interaction. You can also set event triggers that grant players items for successfully completing the skilled interaction.
You can build on these examples by setting cinematic cutscenes once players or objects target certain zones.
This tutorial covers how to create a quick press-skilled interaction in which players can hold a trigger input to target the correct zones.
Before you begin customizing your UI, must create and import any assets to use in your designs. Visit Creating Custom UI with Materials to learn more about using materials in your design.
Set up the Device
Follow the steps below to create a golf example in which players target a perfect zone to grant success when hit. When designing your UI, feel free to rename the panels as you place them in the Hierarchy panel.
From the Content Browser, place a Skilled Interaction device into your project.
In the Details panel for the device, modify the following settings.
Option Value Description UI Type
Bar
Determines the type of user interface to display.
Custom Widget
Add your custom User Widget
Select a custom widget to use for the interaction.
Interaction Type
Charge and release
Charge and Release animates while holding the trigger button and activates upon release.
Meter Color
Pick a color
This example uses the color red.
Good Zone Size
80.0
Sets the good zone size as a percent of the total meter.
Good Zone Position
0.0
Sets the good zone's position.
Perfect Zone Size
15.0
Sets the size of the perfect zone as a percent of the good zone.
Perfect Zone Position
100.0
Sets the position of the perfect zone.
Good Zone Color
Pick a color
This example uses the color dark green.
Perfect Zone Color
Pick a color
This example uses the color lime green.
Add the Background Image
Follow the steps below to create the background image for the vertical meter bar in this example. The background in this walkthrough is a rounded, black bar in which the zones will sit on top of.
Use the image above as a reference when recreating the steps in this tutorial.
Create a User Widget for your interaction.
Locate and double-click the User Widget attached to the device to access its User Widget Editor.
In the Hierarchy panel, drag and nest an Overlay to serve as the overall canvas. In this example, it is named Overlay. Then, drag another Overlay to contain the background. In this example, it is named SID.
Drag and nest an Image, named Bar in the example, into the child Overlay.
In the Details panel of the Image, set the material or texture for your background.
Set up the Zones
You can create a bad zone for your example that will grant an automatic failure when targeted. However, this example only uses a perfect zone, which consists of three containers:
An initial empty area, called PerfectZoneStart.
The good or perfect zone, called SizeBox.
The empty area after, called PerfectZoneEnd.
Follow the steps below to recreate this example's perfect zone.
From the Palette panel, drag and nest a Stack Box inside the child Overlay, named SID in the example.
Then, drag and nest the following children inside the Stack Box: Scale Box > Size Box.
In the Details panel for the Scale Box panel, set the Stretch option to User Specified. Then, set the User Specified Scale to indicate how much space you want above the perfect zone. For the purpose of this example, set the scale to 0.27.
In the Size Box, set the Height Override setting to the height of the top meter.
Inside the same Stack Box, also drag a Size Box > Scale Box > Overlay > Image.
In the Details panel for the Size Box, set the Height Override to the size of the perfect zone.
In the Details panel for the Scale Box, set the Stretch setting to User Specified. Then, set the User Specified Scale setting to 1.
The Overlay PerfectZone will contain the material or texture for the perfect zone.
Inside the same Stack Box, also drag an Overlay > Size Box.
In the Details panel for the Overlay PerfectZoneEnd, set the Stretch setting to User Specified. Then, set the User Specified Scale to indicate how much space you want above the perfect zone. For the purpose of this example, set the scale to 0.49.
In the Details panel for the Size Box, set the Height Override setting to the height of the bottom meter.
To add extra detail, you can include notches for the background zones by adding an Image, named Notches in the example, underneath the Stack Box.
Set up the Scrubber
For this example, the scrubber needs to be inside a moving container. To do this, you must create a Stack Box with two items.
The first item holds a Size Box set to User Scale, which you are later going to bind to the Skilled Interaction Meter Scale in the ViewModel. The second item will hold a container with the scrubber.
Underneath the Overlay SID drag and nest a Stack Box, named ScrubberStackBox in the example, to contain two child setups of: Overlay > Size Box and Size Box > Scale Box > Image named Scrubber.
In the Details panel for the Overlay ScrubberMovingZone, set the Stretch setting to User Specified. Then, set the User Specified Scale setting to 0.
In the Details panel for the Size Box, set the Height Override setting to the height of the top meter.
Set the Height Override setting for Size Box ScrubberContainer to 0.
Change the Stretch setting for the Overlay Scale Box to User Specified. Set the User Specified Scale setting to 1.
In the Image setting for the Image Scrubber, set the material or texture of your scrubber.
Set up the ViewModel
To connect your custom UI to the Skilled Interaction device, follow these steps.
In the User Widget, navigate to Window > Viewmodels to open the Viewmodels window.
Click +Viewmodel. Then, select Device - Skilled Interaction View Model and click Select.
Either from the bottom toolbar or the Window tab, select View Bindings.
Set up your View Bindings to match the image below.
Click + Add Widget to add the ScrubberMovingZone.
Set the ScubberMovingZone to User Specified Scale and UEFN_SkilledInteraction_ViewModel to Current Meter Value.
Click + Add Widget to add the PerfectZoneStart.
Set the PerfectZoneStart to User Specified Scale and UEFN_SkilledInteraction_ViewModel to Perfect Zone Min.
Click + Add Widget to add the PerfectZoneEnd.
Set the PerfectZoneStart to User Specified Scale and add a conversion function for Add Int Double.
Set A to 1.
Set B to UEFN_SkilledInteraction_Viewmodel/Perfect Zone Max.
Set Negate B to True.
