How do the new UI settings in the API work please?

[KyleDev]

Can we get a short snippet of code showing how the UI works please, I can not seem to get it to work as expected

[Fresnella]

Are you talking about setting the title and description in the PopUp Device, Kyle? Because if so, I was having trouble with that too recently. These:

SetTitleText(Text:message):void = external {}
SetDescriptionText(Text:message):void = external {}
SetButton1Text(Text:message):void = external {}
SetButton2Text(Text:message):void = external {}

I’m not familiar with a Verse type called “message” and I didn’t see a mention of “message” in the docs. I tried using a string like:

PopUpDayNight.SetTitleText(“It is Sunrise”)

and I got this error: “Script error 3509: This function parameter expects a value of type message, but this argument is an incompatible value of type []char”

SetTitleText and SetDescriptionText aren’t in the Verse API Digest, actually. I’m not sure what that means.

I didn’t ask about it in the Forums yet because I thought there was probably an easy answer out there and I was going to do more research, and then I got back into art mode.

[KyleDev]

Hey,
I did not mean the PopUp device, I am referring to the new UI module at the top of the verse API

I was just wondering if anyone had a basic snippet so I could see how it works as I am having no luck with it

[Fresnella]

Ohhh ok ya I don’t know how to use that either and it looks useful, so I’m gonna keep an eye on this post. I’m particularly interested in text UI because for my game I have a lot of NPCs that talk. I don’t need complex dialogue for my MVP, I just need to display text on interactions.

Snippets are super helpful for stuff like this, even tiny ones. The Core Games docs have a ton of snippets alongside each section of the API, and as a scripting novice I don’t know how I would have functioned without them. For instance, here’s the Core API page for Audio. Audio - Core Documentation . It introduces the properties and functions for audio, followed by four demo snippets, with a table of contents on the sidebar. The docs often combine multiple concepts per snippet, we don’t need a separate example for each. Obvi the Core docs have been around for years and Lua is an established language, so I don’t expect UEFN / Verse docs to be as extensive right away. But this is an example of a format that works well for me.

Also if anyone has an answer about my PopUp question I welcome the help!

[KyleDev]

Good question, you should make a seperate forum post about it for visibility.

So far the docs only have mention the types:
Logic, int, float, string, rational, any, comparable and void.

Though the following code does not work but I think it should be like (when they add it?) :

var MyMessage : message = "hello"
...
PopUpDayNight.SetTitleText(MyMessage)

But I see no reason to use ‘message’ over ‘string’ in the above example, I guess the message type will be different to a string in some way

[Fresnella]

Hey, thanks! Ok cool so I was right that I didn’t see message in the list of types in the docs! I found the PopUp mentions in the Nov 8 release notes: https://forums.unrealengine.com/t/uefn-22-35-release-2-november-8st-2022/686893

I’ll write a post when I get a chance. Do you think it’s ok for me to not set up my message as a variable, and add it directly like I did? For example PopUpDayNight.SetTitleText(“hello”)? Regardless, I guess once this is possible for the PopUp Device a variable would help me navigate my script more easily.

[Rodney_Houle]

I will post some information on message soon. We are currently aware and working on a few bugs with it.

[Fresnella]

Thanks! I look forward to using it. It will be nice to cut down on the number of PopUp Devices needed.

[ArmoredJP]

Here is an example using text buttons, a stack box and a canvas. Note that there are a number of bugs in the current release so this will not work properly until the next public release.

using { /Verse.org/Simulation }
using { /EpicGames.com/Temporary/SpatialMath }
using { /EpicGames.com/Temporary/UI }
using { /Fortnite.com/Devices }
using { /Fortnite.com/UI }

hello_world_device := class(creative_device):

    @editable
    MyButton:button_device = button_device{}

    var Canvas:?canvas = false

    OnBegin<override>()<suspends>:void=
        MyButton.InteractedWithEvent.Subscribe(HandleInteractedWithEvent)

    HandleInteractedWithEvent(Player:player):void=
        Print("Button Interacted With!")
        if (PlayerUI := GetPlayerUI[Player]):
            if (TmpCanvas := Canvas?):
                Print("Removing Canvas")
                PlayerUI.RemoveWidget(TmpCanvas)
                set Canvas = false
            else:
                Print("Create New Canvas")
                NewCanvas := MakeCanvas()
                # Add the canvas and set input mode to UI (ie mouse controls cursor and not game)
                PlayerUI.AddWidget(NewCanvas, player_ui_slot{ InputMode := ui_input_mode.UI })
                set Canvas = option{NewCanvas}

    MakeCanvas():canvas=
        NewButtonA:button_loud=button_loud{ DefaultText := "New Button A" }
        NewButtonB:button_regular=button_regular{ DefaultText := "New Button B" }
        NewButtonC:button_quiet=button_quiet{ DefaultText := "New Button C" }
        NewButtonA.OnClick.Subscribe(OnButtonClickedA)
        NewButtonB.OnClick.Subscribe(OnButtonClickedB)
        NewButtonC.OnClick.Subscribe(OnButtonClickedC)
        NewCanvas := canvas:
            Slots := array:
                canvas_slot:
                    Anchors := anchors{ Maximum:= vector2{X:=1.0, Y:=1.0} }
                    Offsets := margin{ Top:=100.0, Left:=100.0, Right:=100.0, Bottom := 100.0 }
                    Widget := stack_box:
                        Orientation := orientation.Vertical
                        Slots := array:
                            stack_box_slot:
                                Widget := NewButtonA
                            stack_box_slot:
                                Widget := NewButtonB
                            stack_box_slot:
                                Widget := NewButtonC
        return NewCanvas
        
    OnButtonClickedA(Message:widget_message):void=
        Print("ButtonA Clicked")
        if (Button := text_button_base[Message.Source]):
            Button.SetText("Message Received A")
        # Test remove the whole canvas in response to a click
        if (TmpPlayerUI := GetPlayerUI[Message.Player], TmpCanvas := Canvas?):
            TmpPlayerUI.RemoveWidget(TmpCanvas)
            set Canvas = false
    
    OnButtonClickedB(Message:widget_message):void=
        Print("ButtonB Clicked")
        if (Button := text_button_base[Message.Source]):
            Button.SetText("Message Received B")

    OnButtonClickedC(Message:widget_message):void=
        Print("ButtonC Clicked")
        if (Button := text_button_base[Message.Source]):
            Button.SetText("Message Received C")
        # Test removing single widget in response to a click
        if (TmpPlayerUI := GetPlayerUI[Message.Player]):
            TmpPlayerUI.RemoveWidget(Message.Source)

[KyleDev]

Thank you very much, I look forward to trying it next update

[Fresnella]

Hey for those who want to see the new UI in action I see that @RayBenefield used the Verse UI API as a part of this example project. There’s a video, and code snippets.

Tactics Game Proof of Concepts | Talks and demos

[Fresnella]

Hey! Dropping a link to my UI Text Popup with Next/Exit Button snippet in the repository , for anyone who might still be searching for Verse UI tips Pretty sure Kyle is likely a UI expert by now but maybe others could benefit.

I scripted and commented this snippet with Verse UI newcomers in mind, so hopefully it’s helpful.