Scaling UI graphics for different screen resolutions?

I use the method of scale the size of elements using a reference size to compute the ratio needed, example : Ratio = SpriteWidth / 1920.0f
Distance field can be used to scale the sprite and font with good quality at the end.

Scalable vector graphics tend to work best. If you know the potential scaling sizes you can also get crisp lines. For example in Windows 10, the smallest scaling factor step is .25 so horizontal/vertical lines that are multiples of 4 px (reference/low res scale) wide and aligned to a 4px grid will be crisp, without blurred antialiased edges.

If you do go the raster graphics route, I'd recommend assuming the highest current resolution and always scale down (you can potentially do this at load time, no need to keep the high res graphics in VRAM). And make sure to use a high quality scaling filter, not linear interpolation (another reason to do this once before copying to the GPU) You should however at least allow for scaling up as well, because higher resolutions will likely be available in the not-too-far future.

Thanks to both of you!

I've read about Distance Field and I partly understand it's concept.

A problem that I have is: (seamless) textures/patterns in the graphics-program (I'm using GIMP), which are raster graphics, that I don't have in the vectorgraphics-program (Inkscape). The results I created in GIMP look better so far. But when it comes to scaling down, the following happens.

Smartphone HD (1920x1080) texture graphic: https://i.imgur.com/BABxKV5.png

Smartphone ldpi (320x240) downscaled texture graphic on top

Smartphone ldpi (320x240) downscaled but texture reapplied after on the bottom

The downscaled texture becomes so fine/small and it doesn't seems "natural" to me, because I can only see on the HD screen it's "true" shape of the bubbles. The ldpi screen would show a different image, if it's just downscaled.

It seems to me, that I don't notice something major or doing a serious mistake in my thinking process.

May I doesn't understand some basics about scaling, because in https://developer.android.com/training/basics/supporting-devices/screens.html they speak about dpi and I'm so pixelfocused!?

Scalable vector graphics tend to work best.

This.

But mind you... first, you must be very careful not to confuse two very different things: Screen size (1080p, 4k, ...) and pixel density (72dpi, 96dpi, 150dpi, ...).

The screen's size (resolution) is not necessarily all that important (at least for desktop or mobile), although it may be (for example, there is a big difference between a "4k" television and "HD" television of the same size when you're sitting 2 meters away). It's the lesser of two problems, though.

Got the screen size wrong? For the "normal" case when you're sitting at your computer or holding a tablet in your hands... who cares. Something that is 1cm tall on a venerable 15'' 1024x768 CRT, or on a 21'' 1080p monitor is still -- more or less -- 1cm tall on a 36'' 4k monitor, only the whole monitor and thus the drawable area is a lot bigger.

Unluckily, that's not entirely true because monitors of the "same size" can have quite different sizes, and resolution does not necessarily correlate with size either, for example there's 40'' monitors with 4k and 40'' monitors with 1080p. But as far is it goes for "just resolution", you can say that resolution doesn't matter that much in comparison.

DPI is another story. Got DPI wrong? Epic fail, big disgrace. Find a rope, and hang yourself. Forgot to tell the operating system that you are DPI-aware? Epic fail.

Failing to tell the operating system that you are DPI-aware means you are being lied to by the operating system about window sizes etc. You draw your stuff at a too-low resolution, and your pixels are scaled up, so you don't get to actually use the pixels that the screen has physically available, your graphics are needlessly "pixelated" (but you still consume a lot of fillrate during upscale!). Getting DPI wrong is even worse... it means your UI components are either way too big or way too small, any text you display etc. is utterly unreadable, and the whole thing just sucks.

Mind you, pixel densities can differ by up to 500%, which is... a lot. That's a difference between "comfortable" and "can't decipher, no matter what I try".

Now, about the actual question, how to do UI graphics? Scalable vector graphics are the best approach quality-wise, and flexible, resolution-agnostic layouts are basically a must. Unluckily, scalable vector graphics are also painstakingly slow, which is why you have to cache them if you use them. You can build a texture atlas into which you let your SVG library draw stuff at startup, Do the same for your font glyphs too, while you're at it. Then use a bin packer. That's not as bad as it sounds.

Or, if you are lazy like me, you simply use a combination of 4x oversized, and mipmapped textures (for the non-monochrome "skin" look) and signed distance field textures (for everything text- and symbol- like, and for borders). It depends on what you are doing, but for me, the ability to have e.g. an exactly 1px thin sharp line against a white background is meaningless, so textures with mipmaps and distance field fonts/symbols are quite acceptable. For me, it must look good at "normal" DPI as well as on "high" DPI and on "ultra high" DPI, and it should be acceptable for "strange" DPIs that are in between.

Textures may not be 100% pixel precise everywhere, but I don't find it disturbing. Especially if you're cheating a bit with widget sizes, so almost-exactly or even just close becomes exactly on a mipmap, at the expense of making the widget a practically non-noticeable 0.1mm/0.2mm smaller or larger, so in fact you're using a mip level as-is made for that pixel density without any interpolation most of the time (can't get it right for every display, unluckily), and especially as resolution goes up and small errors become invisible anyway. Plus, especially when both the UI and the background is a multi-colored potpourri with antialiased borders where you have a hard time finding those little deficiencies.

With 8-bit distance fields for anything letter-sybol-like, including e.g. arrows and close boxes, you're good to go until displays have upwards of 2000 DPI (which I think won't happen any time soon -- not because it wouldn't be possible, but it's kinda nonsensical).

Now you only need to get the actual size of your quads correct (that's harder than it sounds!), and the mipmap/interpolation hardware will do the rest.

Be sure to let the user configure your scaling in addition to your DPI-guess. Because you know, your guess might be wrong... there's no 100% bulletproof way of doing it right, and not all people have the same eyesight either.

Scalable vector graphics tend to work best.

This.

But mind you... first, you must be very careful not to confuse two very different things: Screen size (1080p, 4k, ...) and pixel density (72dpi, 96dpi, 150dpi, ...).

It's even worse.

There's a third factor that is equally important: (expected) distance to screen. Mobile phones are held a lot closer (~40cm) to you than the distance to you 60" 4K TV at home (~3 m). Or your much closer 4K 27" PC screen (~60 cm?)

What really matters isn't so much dpi as view angle per pixel.

Just to underline the need for configurable scaling, because you might be able to query a screens pixel size and physical size, you can only guess wrt distance. But do base your initial scaling on system settings (Window DPI slider).