Currently learning the UI system for resizing UI. How would I achieve this?

Question

As said in the title, I've been trying to figure out how the UI system works, and I think I understand the basic ins and outs of it, but have been struggling to figure out the which project settings and UI setup to use to achieve my desired result.

My game's layout is practically identical to Jardinains (a breakout clone) with a camera that can shake, and a 1:1 aspect ratio for my game view. (I understand that I can utilise a canvaslayer to keep the UI still).
Ideally, this is what I am aiming for:

at its default resolution

reduced width, increased height

increased width

my current game scene setup

As demonstrated, the camera should always keep height, centering on the game world, and on either side UI elements should maintain aspect ratio, expanding to fill space between the game borders and the edge of the screen.

Is there a way to pin UI to points in the game world? Am I looking in the wrong place? Please let me know if there is an easier way to achieve this, or if you need clarification on something. Thanks for your help!

Phosgene

Answer 1

Follow up - I figured out how to get it working. I have yet to set up any functionality and iron out some text sizing issues, but in terms of scaling the bounding rectangles of all the separate parts, here's how I did it:

First, I created a SubViewport node for my game scene, and created a ViewportTexture to display it in a TextureRect. I also added two VBoxContainer nodes to hold banner UI elements, and put them all inside a HBoxContainer.

To make them scale properly without overlapping, I set the TextureRect's expand mode to "Fit Width Proportional", setting all three elements' container sizing to fill both axes and setting expand to "true".

For the individual elements in each banner, I parented them to control nodes, which were also set to expand, and used an AspectRatioContainer to keep their contents properly proportioned. Each AspectRatioContainer's stretch mode is set to "Width Controls Height".

working as intended

Hopefully this helps someone in a similar situation. If there is a better way to do this, or if you know if there's a way to make text shrink on overrun without writing custom scripts, please let me know.

Phosgene