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.
