Resolution scaling with small displays

Magix

Hey there, I’m getting really confused with resolutions atm. I want to have the UI and textures scale properly with smaller resolutions but I’m unsure how to do this.

I’ve tried viewport and expand, but when using a 800 x 480 res, and then testing 320 x 240, the UI is too small.

These are the resolutions I’m targeting for a tech demo:

1920 x 1080
1280 x 800
800 x 480
480 x 272
320 x 240

Maybe I’m overthinking it, but I’m just not sure how to do it unless I manually scale everything according to these sizes, and that seems to be what I might have to do. If I disable stretch, then the resolution will be in the bottom middle of the screen. 320 x 240 will look fine but I’d have to scale everything manually from 320 x 240 onwards.

Does anyone have any tips? Because I’m genuinely stumped and idk what to do 😣

My default window size is 800 x 480.

Magix

I'm unsure how to get the UI to look decent on all screens without being too small, too large, too blurry or too sharp. I feel like the only way I can do this is to manually code everything to fit each of the targeted resolutions... First is 320 x 240, second is 480 x 272, and last one is 800 x 480.

Magix

This is with the window maximized from 800 x 480.

I’ve noticed that using 2D instead of viewport does make things look a lot more smoother, so I might use that for resolutions bigger than 800 x 480, and make special UI containers for the other smaller resolutions.

xyz

Magix Use "disabled" stretch mode if you want ui elements to keep constant pixel size regardless of resolution. Note that you will have to properly use Godot's layout/anchoring system for them to automatically position themselves as expected.

Magix

xyz I see, would using different UI Containers and having them sized based on the areas shown on the game view be a good idea? I feel like the only way to really do it is to just make separate UI Containers with the UI of each tailored to each directly targeted resolution.

xyz

Magix No. Godot's layouting/anchoring system is quite powerful. Learn to use it properly and you should be able to make one "responsive" layout that adapts to most resolutions. You can still have separate UIs for eventual extreme cases (very large or very small resolutions) if the layout in such cases must be qualitatively completely different from your default.

Magix

xyz Ah ok, I’ll read up on it more then 🙂 Do you also have any useful tutorials on utilising the layering/anchoring system that you yourself are aware of? 🙂

xyz

Magix I'd start with the official documentation. Look at the page that explains sizing and anchoring as well as the next page that deals with containers.

You can also search for "godot ui layout" on youtube, I'm sure you'll find plenty of useful stuff.