Displaying simple HUD - items alignment | Godot Engine | Page 1

worn olive May 5, 2025, 7:29 PM

Hi! I want to build a simple HUD where I'll display two things only for now - one is user's score, the other one is animated sprite of a coin next to it. I am having a hard time thinking about how to center-align them though. After some trials and failures I've came up with a following node's structure:

CanvasLayer
 - HBoxContainer
  - AnimatedSprite2D
  - Label

And I thought that'll suffice, but the result looks like so: and I'd very much like to center-align them vertically, and also make the coin display to the right of the score. Would that be achieved through some settings of HBoxContainer that I'm not aware of? Or maybe I've used completely wrong nodes? All help appreciated!

TLDR: What's an idiomatic way of positioning things? 🙂

I guess I could just manually move things into place but not sure if that's a good practice.

wind birch May 5, 2025, 9:36 PM

Hbox -> control -> animated sprite. Try setting control container sizing to vertical - shrink center and maybe horizontal too with expand. Kind of have to play around with the sizing section.
The sprite just wants a single position to know where to be displayed. The hbox doesn't give one. The control places one in the HBox area it's given.

#Displaying simple HUD - items alignment