How to make sure my UI remains the same across multiple screens?

Question

How to make sure my UI remains the same across multiple screens? I've looked at some tutorials, but they didn't seem to apply to my situation.

I tried the following, but they didn't resolve my problem:

• Various combinations in the window setting of Godot
• Making a scene with graphic options where you can resize the screen ratio

If I can manage to get the UI to not fly around every time I resize the screen I either face two other problems:

1. Making the screen smaller means the UI maintains its place but doesn't scale correctly, they stay in place.... but if the screen is; say reduced by like 50%, the UI is only reduced by like 25%, just giving random numbers cause I didn't measure it manually but visually the UI is clearly scaling at a different pace

2. This time the UI scales correctly and remains in place but resizing the screen gives black borders around the edges.... my screen is 1366x768.... my window settings say so and also my Nvidia settings say so, they aren't lying... but if I set this to be the screen size in Godot, I get black borders...

The dilemma is that I can only manage to get 2 out of following 3 things that I want:

1. The UI scaling properly
2. The UI maintaining its place
3. No black borders

How do I get all three?

I'm only showing the mininimap because changing resolutions requires me to rearrange every single piece of UI even if it is literally set to be anchored, it flies around in some screen sizes and even goes outside of the screen.

and here's the main menu, just to showcase how stupid the situation is

Answer 1

There are a few concepts to address if you want to get the entire UI working smoothly.

Black borders - The size of the screen ("game") in Godot is simply the size, in "units", of the visible area you have to work with in the editor. It is independent of the resolution that a player is playing the game at. If the player wants to play at a different aspect ratio than that of your screen size, you can control if they see "black bars" or something else by modifying your project's Stretch Settings. In particular, the stretch aspect will change whether or not the player sees black bars. Keep in mind that designing a game to work at an arbitrary aspect ratio can be very difficult, so you may want to assume a 16:9, 4:3, etc aspect ratio to make your life easier.

Scaling - if you have your project's stretch aspect set to something other than "ignore", you will not have to worry about stretching, but you will have to worry about scaling. If you are using anchors (not containers), you'll want to make sure your anchors have a non-zero size (left≠right, top≠bottom), which will allow the anchored element to expand and contract at the same rate as the player's screen resolution. If you are using containers (not anchors), the scaling problem should already be solved, provided that your top-level container has its anchors set to a non-zero size. From the screenshots you provided, it looks like the anchor (if you are using them) for the minimap is set to a zero-size in the top-right corner - the anchor should instead have its bottom-left corner set somewhere towards the centre of the screen. NOTE: for TextureRects specifically, you'll want to change the Expand Mode away from "Keep Size" - that will prevent your UI images from scaling.

Placement - This is similar to the scaling problem. If you are using anchors, you typically want your anchors to be next to some fixed position (in your case, the edge of the screen). That way, you know your UI elements will always be relative to some fixed point. If you're using containers, this problem typically solves itself, because elements are always relative to their enclosing container. If an element is not properly positioned in a container, you likely want to change the container's settings or use a different type of container.

It is a bit hard to give specifics since we can't see your project, but I hope this helps.