[ad_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.
[ad_2]