Greetings,
I’ve been working on a game but have some questions about UI scaling as I’m working on the UI currently.
I’ve watched a few tutorials and made some changes to my project, but things are still a bit odd.
I’ve changed my ui design to use anchors, as that was pointed out it was needed for the ui to scale at all, which was my first problem, the ui was very tiny at larger sizes. I also changed my Window Height & Width Override in the project settings, this gives me a bigger window to view the game and the UI is a bit large now. I changed the the stretch mode to viewport, aspect to expand and scale mode to int. These seemed to keep everything in a better-looking display overall with resizing the window.
I’ve been designing a viewport size of 1152x648, and things have been showing up in the smaller debug window. And I was making it all readable for that window size. I designed my ui to fit that debug window, not originally taking in to consideration about different sizes. I’m still designing the look on the UI elements
But when I resize it fit the screen larger the UI items are still the same ratio size to the original size, which makes them very large in size. At full screen the ui is huge and that is not what I am wanting to happen. I actually had two pictures but they look the same size on the post.
Should I be designing the UI at a larger screen size, then accounting for the game to scale it down for smaller sizes? If yes, what size would that be?
But also, wouldn’t that make the ui really small on smaller screen sizes?
I’m going for a desktop game in this version and maybe later a mobile game, so maybe the smaller size doesn’t apply as much in this situation.
I found the Multiple Resolutions and Aspect Ratios official demo and used some of its code to create a resolution change settings window in my test application. The problem I’m having is setting the items to scale properly at the different resolutions.
The project is set to 1142x648, and then in the window override its 2304x1296.
That view is what I have been designing things in, and it works. When the project is running there are options for 648x648, 800x600, 1152x648, 1280x800, 1680x720, and 2304x1269. I don’t know if I need all of these or not.
The project seems to work on everything below 1152x648, but when I go up the display is messed up.
could you post your anchor settings for that control? i’m still new to godot myself but if i had to guess the ‘Left’ property of the ‘Anchor Points’ when the preset is set to ‘Custom’ instead of ‘Top-Left’ might be what you’re looking for. this adds a cushion to the left of that control based on width of the screen, whereas the screenshots you posted look like they have a fixed pixel distance
i’m trying to figure out the same scaling issue you’re having by having the UI grow with different resolutions but haven’t had any luck. there’s a content scale factor you could try adjusting but I’m not sure if that’s what you’re looking for
Hi, the anchor points are different for each panel on the ui scene. From what i read they are a fixed point in the display where the element is located.
There are a several videos on youtube about anchors that could help explain them better than i can.
I still have not figured out the screen size problem but i’ve not had much time this week to really dig in to it.
Seems like your book in the middle UI would benefit from “Full Rect” anchors. to scale up and remian centered as the viewport grows. I don’t know how the time display is set, maybe “Top Wide” or just centered top.
When it comes to UI dynamic adaptation, you got to choose between “fitting things around a fixed resolution” and “fitting things around a fixed point”. You can mix both in layers, but cannot really use both at the same time on the same layer without a massive headache.
For your case, I would have a possible solutions depending on what you aim to achieve.
Use a VBox Container and set 3 children (containers) to it which would divide your upper, middle and lower part of your UI. If you anchor this VBox Container with Anchors/Full Rect and set all its children with Container Sizing Horizontal AND Vertial as “Fill” and, only on the middle container, enabling “Expand”.
The top container children would have a HBox Container with its Container sizing Horizontal Fill “Expand” enabled. It would have 2 control children Called “Left Upper Corner” and “Right Upper Corner”
“Right Upper Corner” would have a VBoxContainer containing the Time container and the Resources / Product container. The “Left Upper Corner” would have a HBox container containing the “Current Cash” container and the Day Time container. (I think this is where you face an issue)
The bottom container would have children containers based on how you want the element to be place. Unlike the top container, if you absolutely want the skill bar to remain in the middle, I would suggest setting the containers with simple anchors. Using a HBox Container would make a mess as it would move the skill bar away from the lower center whenever another container would be on its left or right. Instead, I would set the right “message” container with a Container Sizing Vertical “expand” and set its width via script based on how width the gameplay screen is as it requires a bit of basic maths to consider the middle skill bar width and the current screen width. (Take the screen width, divide it by 2, then remove from the value half of your skill bar width. Remove a bit of padding from the result and that’s your message box max “width”.)
For the middle container, it would depend on how your want the book to work. If you want the player to be able to move the book around, it’s one thing (but it would still work with the setup explained here), but if you want the book the be set in the center of the screen, you can just set its Layout Mode to Anchor and its Anchors Preset to “Center”.
Important Note: You might not want “everything” in the menu to scale based on the screen height/width. Unless you use 100% vector-based images, you’ll have some pixelated issues with up-scaled images background and icons that don’t have proper corners and stretched/looping sides to be used as panels which is why I would consider the Skill Bar as a fixed sized element regardless of the game’s screen resolution. (The exception would be if the skills icon are SVGs and while it’s cool for dynamic resolution icons, it’s a double edged situation as the details in the SVGs affects the resources it takes to load them up. You don’t want your skill icons SVG to include dozen of thousands of vectors each.)
For example, I doubt the book background is a SVG because of its gradients. Having that kind of result is 100% possible with optimized SVGs, masks and a complex layering system, but considering the issues at hand, I doubt it’s the case here. As such, you don’t want the book to scale up with any screen resolution as it could most likely exceed the book’s image resolution. you might want to do it via scripts to cap the max height or width to the book’s image resolution.
