Verse UI buttons placment is..random/wrong

I’m not sure why but the buttons aren’t showing where they’re supposed to be
the 2nd picture shows how I have them in the widget blueprint- I copied the same numbers to Verse. Any help appreciated!

*I tried changing the anchors and alignment but same thing.

I’m overlaping the buttons in top of the UI widget so in verse I’m only adding the buttons

******Code Below pictures**

GetShopUI(): canvas =
        ShopCanvas.AddWidget(canvas_slot:
            Widget:= AR_Button
            Anchors:=anchors{Minimum := vector2 {X:= 0.0, Y:= 0.0}, Maximum:=vector2 {X:= 1.0, Y:= 1.0}}
            Offsets := margin{Left := 308.0, Top := 380.0, Right := 144.0, Bottom := 30.0}
            Alignment:= vector2 {X:= 0.0, Y:= 0.0}
            SizeToContent := false
            ZOrder :=1    
        )
        ShopCanvas.AddWidget(canvas_slot:
            Widget:= Shootgun_Button
            Anchors:=anchors{Minimum := vector2 {X:= 0.0, Y:= 0.0}, Maximum:=vector2 {X:= 1.0, Y:= 1.0}}
            Offsets := margin{Left := 308.0, Top := 612.0, Right := 144.0, Bottom := 30.0}
            Alignment:= vector2 {X:= 0.0, Y:= 0.0}
            SizeToContent := false
            ZOrder :=1
        )
        ShopCanvas.AddWidget(canvas_slot:
            Widget:= SMG_Button
            Anchors:=anchors{Minimum := vector2 {X:= 0.0, Y:= 0.0}, Maximum:=vector2 {X:= 1.0, Y:= 1.0}}
            Offsets := margin{Left := 308.0, Top := 836.0, Right := 144.0, Bottom := 30.0}
            Alignment:= vector2 {X:= 0.0, Y:= 0.0}
            SizeToContent := false
            ZOrder :=1
        )
        ShopCanvas.AddWidget(canvas_slot:
            Widget:= Sinper_Button
            Anchors:=anchors{Minimum := vector2 {X:= 0.0, Y:= 0.0}, Maximum:=vector2 {X:= 1.0, Y:= 1.0}}
            Offsets := margin{Left := 636.0, Top := 380.0, Right := 144.0, Bottom := 30.0}
            Alignment:= vector2 {X:= 0.0, Y:= 0.0}
            SizeToContent := false
            ZOrder :=1
        )
        ShopCanvas.AddWidget(canvas_slot:
            Widget:= ARGold_Button
            Anchors:=anchors{Minimum := vector2 {X:= 0.0, Y:= 0.0}, Maximum:=vector2 {X:= 1.0, Y:= 1.0}}
            Offsets := margin{Left := 636.0, Top := 612.0, Right := 144.0, Bottom := 30.0}
            Alignment:= vector2 {X:= 0.0, Y:= 0.0}
            SizeToContent := false
            ZOrder :=1
        )
        ShopCanvas.AddWidget(canvas_slot:
            Widget:= ShotgunGold_Button
            Anchors:=anchors{Minimum := vector2 {X:= 0.0, Y:= 0.0}, Maximum:=vector2 {X:= 1.0, Y:= 1.0}}
            Offsets := margin{Left := 636.0, Top := 836.0, Right := 144.0, Bottom := 30.0}
            Alignment:= vector2 {X:= 0.0, Y:= 0.0}
            SizeToContent := false
            ZOrder :=1
        )
        ShopCanvas.AddWidget(canvas_slot:
            Widget:= Grappler_Button
            Anchors:=anchors{Minimum := vector2 {X:= 0.0, Y:= 0.0}, Maximum:=vector2 {X:= 1.0, Y:= 1.0}}
            Offsets := margin{Left := 968.0, Top := 380.0, Right := 144.0, Bottom := 30.0}
            Alignment:= vector2 {X:= 0.0, Y:= 0.0}
            SizeToContent := false
            ZOrder :=1
        )
        ShopCanvas.AddWidget(canvas_slot:
            Widget:= Flare_Gun_Button
            Anchors:=anchors{Minimum := vector2 {X:= 0.0, Y:= 0.0}, Maximum:=vector2 {X:= 1.0, Y:= 1.0}}
            Offsets := margin{Left := 968.0, Top := 612.0, Right := 144.0, Bottom := 30.0}
            Alignment:= vector2 {X:= 0.0, Y:= 0.0}
            SizeToContent := false
            ZOrder :=1
        )
        ShopCanvas.AddWidget(canvas_slot:
            Widget:= Rift_Button
            Anchors:=anchors{Minimum := vector2 {X:= 0.0, Y:= 0.0}, Maximum:=vector2 {X:= 1.0, Y:= 1.0}}
            Offsets := margin{Left := 968.0, Top := 836.0, Right := 144.0, Bottom := 30.0}
            Alignment:= vector2 {X:= 0.0, Y:= 0.0}
            SizeToContent := false
            ZOrder :=1
        )
        ShopCanvas.AddWidget(canvas_slot:
            Widget:= ArmoredWall_Button
            Anchors:=anchors{Minimum := vector2 {X:= 0.0, Y:= 0.0}, Maximum:=vector2 {X:= 1.0, Y:= 1.0}}
            Offsets := margin{Left := 1296.0, Top := 380.0, Right := 144.0, Bottom := 30.0}
            Alignment:= vector2 {X:= 0.0, Y:= 0.0}
            SizeToContent := false
            ZOrder :=1
        )
        ShopCanvas.AddWidget(canvas_slot:
            Widget:= InstantHealth_Button
            Anchors:=anchors{Minimum := vector2 {X:= 0.0, Y:= 0.0}, Maximum:=vector2 {X:= 1.0, Y:= 1.0}}
            Offsets := margin{Left := 1296.0, Top := 612.0, Right := 144.0, Bottom := 30.0}
            Alignment:= vector2 {X:= 0.0, Y:= 0.0}
            SizeToContent := false
            ZOrder :=1
        )
        ShopCanvas.AddWidget(canvas_slot:
            Widget:= SmallShiled_Button
            Anchors:=anchors{Minimum := vector2 {X:= 0.0, Y:= 0.0}, Maximum:=vector2 {X:= 1.0, Y:= 1.0}}
            Offsets := margin{Left := 1296.0, Top := 836.0, Right := 144.0, Bottom := 30.0}
            Alignment:= vector2 {X:= 0.0, Y:= 0.0}
            SizeToContent := false
            ZOrder :=1
        )
        ShopCanvas.AddWidget(canvas_slot:
            Widget:= Medkit_Button
            Anchors:=anchors{Minimum := vector2 {X:= 0.0, Y:= 0.0}, Maximum:=vector2 {X:= 1.0, Y:= 1.0}}
            Offsets := margin{Left := 1624.0, Top := 380.0, Right := 144.0, Bottom := 30.0}
            Alignment:= vector2 {X:= 0.0, Y:= 0.0}
            SizeToContent := false
            ZOrder :=1
        )
        ShopCanvas.AddWidget(canvas_slot:
            Widget:= SupplyDrop_Button
            Anchors:=anchors{Minimum := vector2 {X:= 0.0, Y:= 0.0}, Maximum:=vector2 {X:= 1.0, Y:= 1.0}}
            Offsets := margin{Left := 1624.0, Top := 612.0, Right := 144.0, Bottom := 30.0}
            Alignment:= vector2 {X:= 0.0, Y:= 0.0}
            SizeToContent := false
            ZOrder :=1
        )
        ShopCanvas.AddWidget(canvas_slot:
            Widget:= HouseUpgrade_Button
            Anchors:=anchors{Minimum := vector2 {X:= 0.0, Y:= 0.0}, Maximum:=vector2 {X:= 1.0, Y:= 1.0}}
            Offsets := margin{Left := 1624.0, Top := 836.0, Right := 144.0, Bottom := 30.0}
            Alignment:= vector2 {X:= 0.0, Y:= 0.0}
            SizeToContent := false
            ZOrder :=1
        )
        ShopCanvas.AddWidget(canvas_slot:
            Widget:= Exit_Button
            Anchors:=anchors{Minimum := vector2 {X:= 0.0, Y:= 0.0}, Maximum:=vector2 {X:= 1.0, Y:= 1.0}}
            Offsets := margin{Left := 347.0, Top := 952.0, Right := 1209.0, Bottom := 30.0}
            Alignment:= vector2 {X:= 0.0, Y:= 0.0}
            SizeToContent := false
            ZOrder :=1
        )

HUD UIs gets affected by HUD Scale, safe borders, paddings and offsets, while Verse UI (when consuming input) or non HUD UIs does not. (You can see your Widget Blueprint x InGame it being scalled down due to these aspects…)

This is intendeed, but also we have a limitation because we don’t have the widgets exposed for us to be able to control this in a more flexible way, sadly… (Worth a Feature Request, I think there is already some)

But, why you did not added the background image in verse directly? That should work properly for your scenario…

adding the UI widget with the buttons at once using verse solved it!

thanks!

1 Like