Pixelated UMG Images

Is there any way to set the resolution of the images in a widget blueprint “image” element? The image itself is in very high resolution and even in the editor the image seems smooth like a… well its very smooth. No pixels detectable. But if you look closely, ingame it looks kinda cheap, stair-effects.

Thanks :slight_smile:

Check if your images are assigned to the UI class and make sure they are using no mipmaps. That’s the first thing that comes to my mind.

The best UIs use a 1:1 pixel ratio. Down-sampling or Up-sampling will cause aliasing. Using mipmaps…can help, but it wont ever be as good as having a 1:1 ratio image in the UI.

Is it the logs you are seeing the effect on?

Using a 1:1 ratio may not be an option if the image needs to change depending on screen size.

I myself created a material that uses Signed Distance fields for UI elements to make the line art look better. I was able to port one of my GLSL shaders to unreal and I can probably post that up later at some point. There’s no built in vector graphics rendering yet and signed distance fields are much simpler anyway. Fonts in Unreal appear to already be done this way anyway.

You could do the black outline part as a signed distance field and the brown gradient portion as a regular texture. That brown part should look pretty good even at different resolutions since it’s a smooth color change.

Exactly. I have the same problem here: Texture Scaling - Rendering - Epic Developer Community Forums

Epic needs to implement a better downscaling algorithm. They support DPI Scaling, so while on 1280x720 the texture might take 50x50 pixels the same texture will take 200x200 pixels on a 4K screen, so the only option is using a texture with a size of 256x256 which will look pixelated on the 1280x720 screen.

I don’t think that’s really something you can solve with a better downscaling algorithm. This is just how graphics work.

This is why UI is sometimes done with vector graphics.

However, using signed distance fields you can have results like this:

https://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf

I’ll put up my material later tonight when I come home that implements this. My line art uses very low res textures to achieve what looks like high res line art without a complicated vector graphics rendering system.

It would be nice actually if the same algorithm that Epic uses for fonts was exposed for general purpose in materials. They even have a texture compression setting for signed distance fields but it seems to make my texture all white so they must be doing something special.

Thanks for all your answers :slight_smile:
I don’t use any mipmap streaming since the images are not a power of two (at least thats what UE told me when I imported the images). Ingame-vector graphics would indeed be cool :slight_smile:

But I didn’t meant the logs at first, but - I confess, its hard to see in this screenshot - the surrounding element. At the blue part on the right you can see the effect “clearly”

Hey @illYay ! Did you manage to put up your material somewhere? We’re having similar issues, and were hoping to solve or at least improve upon them using your solution. Your results look amazing!

Did you find a solution? I have the same error and I’m very stuck on it