1
\$\begingroup\$

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.

enter image description here

enter image description here

enter image description here

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

enter image description here

\$\endgroup\$
4
  • 1
    \$\begingroup\$ This hinges on how you define "properly" and "its place". When the new screen can have a different physical resolution and different aspect ratio, "the same" is no longer an option. You have to decide on a policy for how the UI should adapt to the new situation. There is more than one reasonable policy to adopt, so engines cannot always "do the right thing" by default. Instead they give you features to implement multiple different policies. To help you implement the policy that seems right to you, we need it specified: try mocking up screenshots at different resolutions as examples. \$\endgroup\$
    – DMGregory
    Jul 7 at 20:21
  • \$\begingroup\$ @DMGregory maybe but I'm pretty sure no one wants to play game where if you swtich device the UI either becomes useless or you get black borders around the screen so I just cant pathom why th engine would even give you the option to do that... \$\endgroup\$
    – Cei
    Jul 8 at 9:32
  • \$\begingroup\$ @DMGregory especially when using my OWN actual screen size results in black borders.... \$\endgroup\$
    – Cei
    Jul 8 at 9:56
  • 1
    \$\begingroup\$ What I asked you to do was mock up screenshots of what you WANT your UI to look like on different resolutions, so we can help you achieve that. We know you don't want what you have — what we need to know is what specifically you want instead. \$\endgroup\$
    – DMGregory
    Jul 8 at 11:27

1 Answer 1

3
\$\begingroup\$

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.

\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .