Free tool

World UI layout editor

Tell World UI Kit where the clickable zones of your Widget Blueprint are: paste its hierarchy, check the zones it finds, try them as a player would, then download the Verse files. About World UI Kit

Your widget

Paste its hierarchy: the zones, the size and the path are read from it.

Widget hierarchy (T3D)

In the WBP Designer, select the root widget in the Hierarchy panel and press Ctrl+C. Paste it here, or anywhere on the page.

Widget BlueprintComponent wbp_shop_layout · Verse Shop.WBP_Shop_entity

Widget size

1200 × 800 units

In widget units, as in the Designer.

Kit moduleVerse path of the WorldUIKit folder: WorldUIKit when it sits at the root of Content, else its folders with dots (Verse.Products.WorldUIKit).

Screen field

Writes the active screen to a Screen (int) field of the WBP. Bind it to the Active Widget Index of a WidgetSwitcher.

Per-player copies

With States = PerPlayer, each player gets their own copy of the WBP, so its fields are personal too.

Clickable zones

Drag on an empty area of the widget to draw a zone, drag a zone to move it.

Zones (12)

Select a zone on the canvas or in the list, or draw a new one.

Verse files

Describes the widget: download it again whenever the zones change.

wbp_shop_layout.verse

1# World UI Kit layout for WBP_Shop. Made with https://store.simnjs.fr/tools/world-ui2# Widget Blueprint: /MyIsland/Shop/WBP_Shop3# 1. Save this file in your project's Content folder, next to the WorldUIKit folder. 2. Build Verse code.4# 3. Add the wbp_shop_layout component to your WBP_Shop entity, next to interactive_widget_component.5# It only describes the widget: download it again when the layout changes. Your actions go in wbp_shop_logic.verse.6using { /Verse.org/SceneGraph }7using { /Verse.org/Simulation }8using { WorldUIKit }9 10wbp_shop_layout<public> := class<final_super>(component, interactive_layout, interactive_fields):11 12    GetLayout<override>()<transacts>:interactive_layout_data =13        interactive_layout_data{Width := 1200.0, Height := 800.0, Elements := array{14            interactive_element{Name := "Items", Kind := interactive_kind.Tab, X := 664.0, Y := 40.0, Width := 232.0, Height := 72.0, StartOn := true, Group := "Tabs", OpensScreen := 1},15            interactive_element{Name := "Skins", Kind := interactive_kind.Tab, X := 912.0, Y := 40.0, Width := 232.0, Height := 72.0, Group := "Tabs", OpensScreen := 2},16            interactive_element{Name := "BuyBlade", Kind := interactive_kind.Button, X := 96.0, Y := 488.0, Width := 448.0, Height := 72.0, Prompt := "Buy the Storm Blade", Screen := 1, Cooldown := 0.5},17            interactive_element{Name := "BuyShield", Kind := interactive_kind.Button, X := 656.0, Y := 488.0, Width := 448.0, Height := 72.0, Prompt := "Buy the Shock Shield", Screen := 1, Cooldown := 0.5},18            interactive_element{Name := "SkinRed", Kind := interactive_kind.Choice, X := 56.0, Y := 148.0, Width := 344.0, Height := 300.0, StartOn := true, Group := "Skin", Screen := 2},19            interactive_element{Name := "SkinBlue", Kind := interactive_kind.Choice, X := 428.0, Y := 148.0, Width := 344.0, Height := 300.0, Group := "Skin", Screen := 2},20            interactive_element{Name := "SkinGold", Kind := interactive_kind.Choice, X := 800.0, Y := 148.0, Width := 344.0, Height := 300.0, StartEnabled := false, Group := "Skin", Screen := 2},21            interactive_element{Name := "Equip", Kind := interactive_kind.Button, X := 428.0, Y := 480.0, Width := 344.0, Prompt := "Equip", Screen := 2},22            interactive_element{Name := "Music", Kind := interactive_kind.Toggle, X := 56.0, Y := 640.0, Width := 312.0, Height := 96.0, StartOn := true},23            interactive_element{Name := "VolumeDown", Kind := interactive_kind.Stepper, X := 432.0, Y := 652.0, Width := 72.0, Height := 72.0, Prompt := "Volume down", Target := "Volume", Steps := -1},24            interactive_element{Name := "Volume", Kind := interactive_kind.Slider, X := 528.0, Y := 664.0, Width := 488.0, Height := 48.0, MaxValue := 100.0, Step := 5.0, StartValue := 75.0},25            interactive_element{Name := "VolumeUp", Kind := interactive_kind.Stepper, X := 1040.0, Y := 652.0, Width := 72.0, Height := 72.0, Prompt := "Volume up", Target := "Volume"}}}26 27    SetHovered<override>(Widget:entity, Element:string, On:logic):void =28        if (W := Shop.WBP_Shop_entity[Widget]):29            Value := if (On?) then 1.0 else 0.030            case (Element):31                "Items" => set W.ItemsHover = Value # Render Opacity of the widget to show32                "Skins" => set W.SkinsHover = Value # Render Opacity of the widget to show33                "BuyBlade" => set W.BuyBladeHover = Value # Render Opacity of the widget to show34                "BuyShield" => set W.BuyShieldHover = Value # Render Opacity of the widget to show35                "SkinRed" => set W.SkinRedHover = Value # Render Opacity of the widget to show36                "SkinBlue" => set W.SkinBlueHover = Value # Render Opacity of the widget to show37                "SkinGold" => set W.SkinGoldHover = Value # Render Opacity of the widget to show38                "Equip" => set W.EquipHover = Value # Render Opacity of the widget to show39                "Music" => set W.MusicHover = Value # Render Opacity of the widget to show40                "VolumeDown" => set W.VolumeDownHover = Value # Render Opacity of the widget to show41                "Volume" => set W.VolumeHover = Value # Render Opacity of the widget to show42                "VolumeUp" => set W.VolumeUpHover = Value # Render Opacity of the widget to show43                _ => {}44 45    SetPressed<override>(Widget:entity, Element:string, On:logic):void =46        if (W := Shop.WBP_Shop_entity[Widget]):47            Value := if (On?) then 1.0 else 0.048            case (Element):49                "BuyBlade" => set W.BuyBladePressed = Value # plays BuyBladePressedAnim50                "BuyShield" => set W.BuyShieldPressed = Value # plays BuyShieldPressedAnim51                "Equip" => set W.EquipPressed = Value # plays EquipPressedAnim52                "VolumeDown" => set W.VolumeDownPressed = Value # Render Opacity of the widget to show53                "VolumeUp" => set W.VolumeUpPressed = Value # Render Opacity of the widget to show54                _ => {}55 56    SetOn<override>(Widget:entity, Element:string, On:logic):void =57        if (W := Shop.WBP_Shop_entity[Widget]):58            Value := if (On?) then 1.0 else 0.059            case (Element):60                "Items" => set W.ItemsOn = Value # Render Opacity of the widget to show61                "Skins" => set W.SkinsOn = Value # Render Opacity of the widget to show62                "SkinRed" => set W.SkinRedOn = Value # Render Opacity of the widget to show63                "SkinBlue" => set W.SkinBlueOn = Value # Render Opacity of the widget to show64                "SkinGold" => set W.SkinGoldOn = Value # Render Opacity of the widget to show65                "Music" => set W.MusicOn = Value # plays MusicOnAnim66                _ => {}67 68    SetValue<override>(Widget:entity, Element:string, Value:float, Fraction:float, Text:string):void =69        if (W := Shop.WBP_Shop_entity[Widget]):70            case (Element):71                "Volume" =>72                    set W.VolumeValue = Fraction # 0..1 along the slider73                    set W.VolumeFill = Fraction * 488.0 # Width Override of the fill (a SizeBox)74                    set W.VolumeText = InteractiveText(Text)75                _ => {}76 77    SetEnabled<override>(Widget:entity, Element:string, On:logic):void =78        if (W := Shop.WBP_Shop_entity[Widget]):79            Value := if (On?) then 0.0 else 1.080            case (Element):81                "SkinGold" => set W.SkinGoldDisabled = Value # Render Opacity of the widget to show82                _ => {}83 84    SetScreen<override>(Widget:entity, Screen:int):void =85        if (W := Shop.WBP_Shop_entity[Widget]):86            set W.Screen = Screen87 88    # Per-player copies (States = PerPlayer): a fresh widget of the same WBP.89    NewCopy<override>():?entity = option{Shop.WBP_Shop_entity{}}90

To check

No problem found.

In UEFN

1
Copy the WorldUIKit folder into the Content folder of your project, then Build Verse code.
2
Drag WBP_Shop into the level (a widget entity, scale 10 works well).
3
Add interactive_widget_component to that entity.
4
Save wbp_shop_layout.verse and wbp_shop_logic.verse in Content, next to the WorldUIKit folder (not inside it), then Build Verse code.
5
Add wbp_shop_layout and wbp_shop_logic to the same entity.
6
Write your actions in wbp_shop_logic.verse: replace its Print lines with your code.
7
In WBP_Shop, create these Verse fields (Variables, Verse box ticked), then:
- Render Opacity of the widget to show · float
  ItemsHoverItemsOnSkinsHoverSkinsOnBuyBladeHoverBuyShieldHoverSkinRedHoverSkinRedOnSkinBlueHoverSkinBlueOnSkinGoldHoverSkinGoldOnSkinGoldDisabledEquipHoverMusicHoverVolumeDownHoverVolumeDownPressedVolumeHoverVolumeUpHoverVolumeUpPressed
- ▶ BuyBladePressedAnim when == 1 · float
  BuyBladePressed
- ▶ BuyShieldPressedAnim when == 1 · float
  BuyShieldPressed
- ▶ EquipPressedAnim when == 1 · float
  EquipPressed
- ▶ MusicOnAnim when == 1, reversed when == 0 · float
  MusicOn
- 0 to 1 along the slider, for your own bindings · float
  VolumeValue
- Width Override of a SizeBox (0 to 488): the fill bar, or a spacer that pushes the knob · float
  VolumeFill
- Text of a text block · message
  VolumeText
- Active Widget Index of your WidgetSwitcher · int
  Screen
Animations: create each one in the Animations panel of the WBP, with the name shown. Then Window › View Bindings › + Add Condition: the field, ==, the value, and the action Queue Play Animation (Play Mode Reverse for == 0).
Bind Screen to the Active Widget Index of your WidgetSwitcher: screen 1 is index 1.
8
Play: aim at a zone, your WBP shows the hover, fire or press E.

A WBP placed in the world must not have Verse event fields: UEFN then skips its entity class and the layout cannot write its fields. Clicks come from the kit: ClickedEvent (with the player), SubscribeClicked, or the logic file.

Your layout is kept in this browser.

1 Your widget

2 Clickable zones

Zones (12)

3 Verse files

To check

Your widget

Clickable zones

Verse files