4.3
I struggle with the games UI node system and would appreciate if anyone could give me a straightforward guide to what nodes and in what order I would need to make something as shown in the uploaded image.
Just a basic HUD for a simple rpg where the player controls a party of 4. I can get one block looking about right, but cant figure out how to get the other 3, and have them stack neatly.
I love using HBox and VBox containers so this is how I would structure it. A VBox to store all four profile children. Inside each profile is a HBox to split the icon from the stats, using VBox containers for each. Every Label and TextureRect child is set to expand and fill vertically, with the Icon with a special 2.0 stretch ratio, to take up 2/3s of the box.
@gertkino’s scheme is probably what I’d do, though I’d probably split it up even further:
Character1 (PanelContainer)
Columns (HBoxContainer)
First (VBoxContainer)
Icon (TextureRect)
Items (Button)
Second (VBoxContainer)
FP (HBoxContainer)
Title (Label: "FP:", left aligned)
Value (Label: "111", right aligned)
WP: (HBoxContainer)
Title (Label: "WP:", left aligned)
Value (Label, "222", right aligned)
[...]
That should format the numbers nicely, and you can do things like:
$Character2/Columns/First/Icon.texture = WizardIcon
$Character4/Columns/Second/WP/Value.text = str(229)
func set_fp(character: int, fp: int) -> bool:
var ch: Node = get_node_or_null("Character%d/Columns/Second/FP/Value" % character)
if !is_instance_valid(ch): return false
ch.text = str(fp)
return true
Great advice from the both of you, im tinkering with both suggestions and learning a few things for sure.