Widgets and DPIs

I was at work, bumping into the same wall over and over trying to build widgets in Unreal. My PNGs looked crisp on my own screen and then fell apart on anything bigger, especially anything running through NVIDIA Mosaic. That is probably not even the real reason. The real reason is that I just hate doing UI in Unreal. Would it kill them to ship a proper built-in SVG vector option for widgets? Apparently, yes.

So I did what any professional does and googled my way to a new word: DPI. Dots per inch. It is basically how tightly pixels are packed into each physical inch of screen. Two displays can both be a thousand pixels wide, but if one crams those pixels tighter, a raster image sized in raw pixels shows up looking totally different on each. Which is exactly what was happening to my poor PNGs.

Somewhere in this rabbit hole I also opened the texture asset and started flipping switches. Under the texture tab there is a Filter option, and I set it to Trilinear. That controls how the texture gets sampled as it scales: trilinear blends between two mipmap levels instead of snapping between them, so the image softens smoothly instead of popping when its size on screen changes.

Which sent me looking into mipmaps, the pre-shrunk copies of a texture the GPU keeps around so it can grab an appropriately sized version instead of squashing the full-resolution one and getting shimmer. There is a setting for how those smaller copies get generated, under LOD, and I switched it to SimpleAverage, which just averages neighboring pixels on the way down. I think it helped.

So this post is definitely not a tutorial, more of a note to future me. When the UI looks cursed on the big screen, check the DPI scaling before blaming the universe, stop trusting raster art to survive a resolution change, and remember the fixes lived in the texture's Filter and mipmap settings.

Thank me.