What is the proper way to do UI?

Development Programming & Scripting Verse
, ,
1

Ok so for UI I have been making custom UMG widgets using the tracker and stat creator device view models, and placing those widgets into the devices custom UI. This works for now but I’m running into the issue where sometimes it doesn’t look right, or there’s too many trackers at once so they don’t render, etc.

I am thinking about converting to a fully UMG UI. Where basically I would get the values from those devices with verse, then update the UI. I am planning on placing smaller widgets into one singular parent widget that I constantly update with verse. Is this the right idea?

Also side question, for updating UIs is it better to just Add the UI to the player each time its updated, or remove their UI then readd it?

2

To get values you can use:

@editable Tracker : tracker_device = tracker_device{}
@editable StatCreator : stat_creator_device = stat_creator_device{}


# Later in the code to get values
if: 
    TrackerAgentValue := Tracker.GetValue[Agent] # for each player
    TrackerGlobalValue :=Tracker.GetValue[] # global value ( all players )

    StatCreatorAgentValue := StatCreator.GetValue[Agent] # for each player
    StatCreatorGlobalValue := StatCreator.GetValueForMatch[] # global value
then:
    # use it

To use them in UMG, create widget first in content browser, add verse variable to use values from verse.
For example, lets say widget name is TestWidgetUMG and verse variable name is WidgetValue:

# if your widget is located in UI folder for example, then it will be
# var UMGWidget : UI.TestWidgetUMG = UI.TestWidgetUMG{}
var UMGWidget : TestWidgetUMG = TestWidgetUMG{} #

To update the widgets you don’t need to add and remove them everytime you want to update.

In my opinion, best way is to create a class for each type of widget:

tracker_widget<public> := class:
    @editable Tracker : tracker_device = tracker_device{}

    var TrackerValue : int = 0

    var PlayersMap<private> : [player]TestWidgetUMG = map{}

    AddPlayer<public>(Player:player):void=
        if:
            Player.IsActive[]
            not PlayersMap[Player]
            PlayerUI := GetPlayerUI[Player]
        then:
            NewWidget : TestWidgetUMG = TestWidgetUMG{}
            if. set PlayersMap[Player] = NewWidget 
            then:
                PlayerUI.AddWidget(NewWidget)
                UpdateWidget()

    RemovePlayer<public>(Player:player):void=
        if:
            Player.IsActive[]
            PlayerWidget := PlayersMap[Player]
            PlayerUI := GetPlayerUI[Player]
        then:
            PlayerUI.RemoveWidget(PlayerWidget)
            RemoveFromMap(Player)

    UpdateWidget<public>():void=
        for (Key -> PlayerWidget : PlayersMap):
            if. set PlayersWidget.WidgetValue = Tracker.GetValue[Key]

    RemoveFromMap(Player:player):void=
        if. PlayersMap[Player]
        then:
            var NewData:[player]TestWidgetUMG = map{}
            for (Key -> Value : PlayersMap, Key <> Player):
                if. set NewData[Key] = value
            set PlayersMap = NewData

To use it:

TestManager := class(creative_device):
    @editable TrackerWidget : tracker_widget = tracker_widget{}
    
    OnBegin<override>()<suspends>:void=
        for (Player : GetPlayspace().GetPlayers())
        do:
            TrackerWidget.AddPlayer(Player)

Now you can use TrackerWidget.UpdateWidget() each time you want to update, or use a loop.

1 Like