Effects and animations

The kit handles interaction only: aiming, clicks, states and events. It draws nothing on your widget. For every state players should see, the layout writes a Verse field of your WBP, and your WBP shows the state with its own look: an animation, a glow, a lock, a fill bar.

Each element has five states: hover, click, on or selected, the value of a slider, and disabled. In the online editor, you choose for each state of each element how your WBP shows it.

By default, every element gets a hover and a click field, and toggles, choices, tabs and sliders a field for their state. Disabled is off by default: turn it on for elements you disable.

The fieldsCopy Anchor Link

The name of a field is the element name followed by the state.

Show a widgetCopy Anchor Link

Example: the element Buy, with a highlight on hover.

1. In the WBP, put an image over the button: the highlight, with the same shape as the button.
2. Add a variable BuyHover, of type float, and tick its Verse box.
3. In Window > View Bindings, bind the Render Opacity of the highlight to BuyHover.

The highlight is visible (opacity 1) while a player aims at the button, and invisible (opacity 0) otherwise. The same pattern works for a selection (<Name>On), a press flash (<Name>Pressed) or a lock (<Name>Disabled).

Play an animationCopy Anchor Link

Example: the element Buy, whose hover is an animation.

A condition runs when its field changes value: the animation plays when the player starts aiming at the button, and plays in reverse when they look away.

SlidersCopy Anchor Link

A slider gets two floats:

• <Name>Fill, its position in widget units. Bind it to the Width Override of a SizeBox (the Height Override for a vertical slider): the SizeBox holds the fill bar, which grows from the left. To move a knob, put a SizeBox bound to <Name>Fill before it, in a horizontal StackBox: it pushes the knob along the track.
• <Name>Value, from 0 to 1, for your own bindings.

Tick Text field in the editor to also write <Name>Text, the value as a text, and bind it to the Text of a text block.

In the generated layoutCopy Anchor Link

The layout writes each field when the state changes. A comment says what the field is for, and the editor reads it back when you open the file again.

SetHovered<override>(Widget:entity, Element:string, On:logic):void =
    if (W := Shop.WBP_Shop_entity[Widget]):
        Value := if (On?) then 1.0 else 0.0
        case (Element):
            "Buy" => set W.BuyHover = Value # Render Opacity of the widget to show
            "Gold" => set W.GoldHover = Value # plays GoldHoverAnim
            _ => {}

SetPressed<override>(Widget:entity, Element:string, On:logic):void =
    if (W := Shop.WBP_Shop_entity[Widget]):
        Value := if (On?) then 1.0 else 0.0
        case (Element):
            "Buy" => set W.BuyPressed = Value # plays BuyPressedAnim
            _ => {}

SetValue<override>(Widget:entity, Element:string, Value:float, Fraction:float, Text:string):void =
    if (W := Shop.WBP_Shop_entity[Widget]):
        case (Element):
            "Volume" =>
                set W.VolumeValue = Fraction # 0..1 along the slider
                set W.VolumeFill = Fraction * 488.0 # Width Override of the fill (a SizeBox)
                set W.VolumeText = InteractiveText(Text)
            _ => {}

SetEnabled<override>(Widget:entity, Element:string, On:logic):void =
    if (W := Shop.WBP_Shop_entity[Widget]):
        Value := if (On?) then 0.0 else 1.0
        case (Element):
            "Gold" => set W.GoldDisabled = Value # Render Opacity of the widget to show
            _ => {}

To write fields, the layout needs the path of your WBP: the editor reads it from the pasted hierarchy, or from the Widget Blueprint box. A WBP inside a folder named UI cannot be used this way, because that name clashes with the UEFN UI module: move it to another folder.

Per playerCopy Anchor Link

With States set to PerPlayer, each player has their own states, but the fields of the WBP belong to the widget, which everyone sees. Keep Per-player copies on in the editor (on by default): each player then gets their own copy of the widget, and its fields show their own states. See Shared and per-player states.