Custom UI / HUD

So i’ve been looking around for YouTube tutorials and forum post about this topic but its basically no coverage of it.

What my focus right now is to make custom HUD that is interactive with the gameplay, for example healthbar, ammo amount etc. Myself is newbie to the Verse language and I feel that the documentation is not very starter friendly on some topics.

So if someone know how to store the players health in a variable and display in a UI widget etc. Hit me up.

With that said, lets make some buzz about the UI creation in general!

3 Likes

UPDATE

I managed to store the players health and print it. Now I need to be able to print/ update that to the UI when the health changes. Any ideas how the UI can be updated without the press of a button?

UPDATE

I have now managed to make a custom healthbar HUD, It’s not the most stylized atm but its atleast working.

So what I did was taking the players current health, insert it into a UI creation with the canvas. I then put the canvas creation in a updateUI() function which is being called through a loop. I don’t know if this is the best performance option, but for now its working as it should!

Haven’t tried it with multiple players with how it syncs etc. Still PROGRESS! :smiley:

1 Like

Hello, could you share this code? I think a lot of people would be interested!

Absolutely! It’s kind of chaos, but here it is:

using { /Verse.org/Simulation }
using { /Verse.org/Colors }
using { /Verse.org/Verse }
using { /Fortnite.com/Devices }
using { /Fortnite.com/UI }
using { /Fortnite.com/Characters }
using { /UnrealEngine.com/Temporary/Diagnostics }
using { /UnrealEngine.com/Temporary/SpatialMath }
using { /UnrealEngine.com/Temporary/UI}

dynamic_text_device := class(creative_device):    

    hud_device : hud_message_device = hud_message_device{}

    var _myIntValue:float = 0.0
    var hudIntValue:float = 0.0
    var _textWiget: text_block = text_block{DefaultTextColor:= color{R:=0.1, G:=1.0, B:=0.1}}

    OnBegin<override>()<suspends>:void=
        # set UI on a player
        var players:[]player = Self.GetPlayspace().GetPlayers()
        if (ValidPlayer := players[0]):
            AddUIToPlayer(ValidPlayer)
        loop:
            Sleep(0.1)
            if(FirstPlayer : player = players[0]):
                if(FortniteCharacter : fort_character = FirstPlayer.GetFortCharacter[]):
                    set _myIntValue = FortniteCharacter.GetHealth()
                    set hudIntValue = FortniteCharacter.GetHealth()
                    
            UpdateUI()
            if(_myIntValue <= 0.0):
                break

    AddUIToPlayer(Player:agent):void=
        if (PlayerUI := GetPlayerUI[player[Player]]):
            PlayerUI.AddWidget(CreateUI())

    CreateUI() : canvas =        
        UpdateUI()
        # align top center of screen
        ui : canvas = canvas:
            Slots := array:
                canvas_slot:
                    Anchors := anchors{Minimum := vector2{X := 0.0, Y := 1.0}, Maximum := vector2{X := 0.0, Y := 1.0}}
                    Offsets := margin{Top := 0.0, Left := 150.0, Right := 0.0, Bottom := 300.0}
                    Alignment := vector2{X := 0.0, Y := 1.0}
                    SizeToContent := false
                    Widget := _textWiget

        return ui

    UpdateUI():void=
        _textWiget.SetText(SetDynamicText(_myIntValue))
        hud_device.SetText(SetDynamicTextHud(hudIntValue))

    SetDynamicText<localizes>(IntValue:float) : message = "HEALTH {IntValue} / 100"
    SetDynamicTextHud<localizes>(hudInt:float) : message = "Dynamic text {hudInt}"

I believe the ‘hudIntValue’ can be removed, something i was working on but later scratched

1 Like

What I haven’t figured out is how to turn that float into a int, so now the health is like 100.0000/100, if you know please tell me haha

There is the Ceil (up), Floor (down) and Round (nearest integer) function to round a number.

This turns the float into an int

yeah i’ve tried that but I guess im doing something wrong, how could i do that in the code?

I made a snippet for this
Rounding a number | Epic Developer Community (epicgames.com)

Ah perfect, got it working!

1 Like

How did you get it to change man @crazeryn? It might be that my brain is just fried but I can’t make sense of Cray_Opeta’s snippet.

The healthbar to change or from float to integer?

yesssss pls @crazeryn

The new full code:

using { /Verse.org/Simulation }
using { /Verse.org/Colors }
using { /Verse.org/Verse }
using { /Fortnite.com/Devices }
using { /Fortnite.com/UI }
using { /Fortnite.com/Characters }
using { /UnrealEngine.com/Temporary/Diagnostics }
using { /UnrealEngine.com/Temporary/SpatialMath }
using { /UnrealEngine.com/Temporary/UI}

dynamic_text_device := class(creative_device):    

    hud_device : hud_message_device = hud_message_device{}

    var _myIntValue:float = 0.0
    var numberone:int = 0
    var hudIntValue:float = 0.0
    var _textWiget: text_block = text_block{DefaultTextColor:= color{R:=0.1, G:=1.0, B:=0.1}}

    OnBegin<override>()<suspends>:void=
        # set UI on a player
        var players:[]player = Self.GetPlayspace().GetPlayers()
        if (ValidPlayer := players[0]):
            AddUIToPlayer(ValidPlayer)
        loop:
            Sleep(0.1)
            if(FirstPlayer : player = players[0]):
                if(FortniteCharacter : fort_character = FirstPlayer.GetFortCharacter[]):
                    set _myIntValue = FortniteCharacter.GetHealth()
                    set hudIntValue = FortniteCharacter.GetHealth()
                    if (number := Round[_myIntValue]):
                        set numberone = number
                        
                    
            UpdateUI()
            if(numberone <= 0):
                break

    AddUIToPlayer(Player:agent):void=
        if (PlayerUI := GetPlayerUI[player[Player]]):
            PlayerUI.AddWidget(CreateUI())

    CreateUI() : canvas =        
        UpdateUI()
        # align top center of screen
        ui : canvas = canvas:
            Slots := array:
                canvas_slot:
                    Anchors := anchors{Minimum := vector2{X := 0.0, Y := 1.0}, Maximum := vector2{X := 0.0, Y := 1.0}}
                    Offsets := margin{Top := 0.0, Left := 150.0, Right := 0.0, Bottom := 300.0}
                    Alignment := vector2{X := 0.0, Y := 1.0}
                    SizeToContent := false
                    Widget := _textWiget

        return ui

    UpdateUI():void=
        _textWiget.SetText(SetDynamicText(numberone))
        hud_device.SetText(SetDynamicTextHud(hudIntValue))

    SetDynamicText<localizes>(IntValue:int) : message = "HEALTH {IntValue} / 100"
    SetDynamicTextHud<localizes>(hudInt:float) : message = "Dynamic text {hudInt}"

It is including the convert from float to integer