Scaling UI down

steelyglint

I made a stupid decision early on while building the UI for my game Fortifend. It was designed around 2 by 2 pixels to give a bit of a pixel art look to the UI elements, and I originally intended to only support 1080p monitors. UI nodes use nearest neighbor texture filters.

Now I'm thinking about support for lower resolutions. If I apply a 0.5 content_scale_factor to the Viewport, some UI elements get ugly stretched bits and label text is jostled and stretched in wonky ways. Interestingly, scaling the UI up with a 1.5 or 2.5 content_scale_factor does not cause these problems (whole numbers also work fine).

Obviously, the best solution would be to go back in time and not build the whole UI wrong. Given this mess, is there any way to support low resolution monitors without a complete UI overhaul?

Toxe

steelyglint How is your Viewport setup? Do you only have the main Window or are there SubViewports?

steelyglint

Toxe
There's only the main Window, no explicit Viewport or SubViewport nodes in the scene tree.

Toxe

steelyglint Can you make an MRP?

steelyglint

Sure, here's a minimal project that scales the UI down by 50%. It uses the same font as most of my game, and the nearest neighbor filtering on UI elements. Pretty sure it's not the font in particular, since I see the same issue with other fonts and non-font UI elements.

I built it in Godot 4.4.1, same as my game.

ui-scale-down.zip

6kB

Here's what this demo project looks like when it's run:

Toxe

steelyglint Try this one.

ui-scale-down-v2.zip

7kB

Take a look at project settings -> Display -> Window:

The game is now rendered in 480x270 (which is 25% of 1080p).
The window is size to 1920x1080.
Stretch mode is "viewport".
Scale mode is "integer".

Considering that you have a pixel art game and a pixel'ish font I'd say your best bet is to render the game in a lower resolution and then upscale it. In this case it is scaled by 4 to 1080p. If you resize the window it won't scale with fractional scale factors.

steelyglint

Toxe

I appreciate the time you spent looking at this, but it's too late for me to completely overhaul the UI. Fortifend releases next week and I simply don't have the time for it.

However...

Tinkering with my toy demo project made me realize there might be at least a partial solution. I noticed the default font line_spacing constant is 3, which explains why every other line of text gets a bit of visual jank when scaled down to 0.5 size. Setting an even override to line_spacing in all my fonts might be able to make things playable at low res.

Edit: It's not a full solution, but it sort of works. Doesn't fix any UI elements already placed on odd coordinates, but maybe it's a lost cause to get everything neatly lined up.

Toxe

steelyglint You could always add it after release.