UMG Textures extremely pixelated

I’m trying to make a simple “weight” icon in my umg… Putting an Image widget set with the texture, and scaling it to size. It’s looks horrible. I’ve googled and tried several thing, but I simply cannot get it to look nice a smooth.

What can I do?

50216-umgpielated.png

Hey vanlacke,

Open up the texture sample you are having issues with and take a look at the settings applied within.

Texture Settings

Try changing the ‘Texture Group’, the ‘Filter’ applied, as well as the ‘Compression Settings’. All of these will have an effect on the final render of the image in your scene. My first guess would be to set the ‘Texture Group’ to UI and then the ‘Filter’ to ‘Trilinear’ to smooth out the edges. Usually you want to keep the filter at ‘Nearest’ which gives your sprites and a sharp look at the pixel level.

Let me know if you have any other questions.

Cheers,

2 Likes

I did try all of those settings. Seems like I’ve tried just about every combination.

I also tried different sized textures, 32x32, 512x512, etc… Haven’t done 256x256 like in your image, but I doubt that’s it…

The absolute smoothest I’ve been able to get it:

50491-smoothest.png

But that adds a white line around it.

Could it be that the engine simply doesn’t support such small icons? I tried to find an example of textures used in UMG from Unreal project examples, however they all are usually larger. If I make my weight icon larger, it certinaly looks much, much better. But I need it small.

Thanks for the reply!

EDIT: Could it have something to do with straight lines? If I shear even a built-in widget, it becomes horrible pixelated…

And even a larger icon is still visibly not smooth

50492-smoothest.png

You will get better results when you import a larger texture, say 1024x1024 and scale it down from there. Up to a point, no matter the texture resolution, you will see some pixelation when you reach a very small value.

“Weight” Texture Settings

Image as UI

You could go into photoshop and increase the bits per pixel to help with this, but below is an example of the different sizes and their appearance. The object will be so small on screen that unless the user is sitting very close, the small pixels will not be noticeable.

Regards,

I had even tried a 2048x2048 texture with the same settings. So it sounds like it just simply isn’t possible to get smooth icons then? I agree it wouldn’t be noticeable during game play, but it really bugs me right now.

Yours certainly does looks better though. What reason could it be that my pixelation is so horribly noticeable, and yours isn’t?

It could be my monitors resolution in combination with the file type. The image I used was a .PNG file type. Did you also try applying a different filter, like Tri-linear or Bi-linear?

Well, that did it for me. Sort of…

So, I haven’t been doing PNGs because they don’t seem to bring in their alpha channel, but clearly you did it so I gave it a shot. The only way I found of making it work was making a material, and setting the texture compression settings to alpha… and, well, making a material and using that. The results are fantastic, but I’m still confused because it seems like you’re not doing it this way.

Here’s a comparison screenshot with a texture setup with your settings, and with a material with only one setting change (compression to alpha, just so I could use the alpha channel in the material)

50599-smoothest.png

Yeah I would expect a different result when using a material and pulling from the alpha channel. You are only using the information from the single channel of the texture instead of the entire RGB values output as an image.

My results will also vary because of my native computer resolution and the bits per pixel of the texture sample I was using. Using a material is not a bad idea as it can give you (as you recently discovered), greater control over images. If you are getting great results with this, I would use this approach! Either way I am glad you were able to learn a little bit and get your issue to resolve after trying various approaches.

If you have any further questions please let me know.

Cheers,

I have the same issue I have lot’s of icon with many different size that changes with animations and i tried everything for the setup in the details of the texture. But with my 256x256 texture when i try to have on icon 90x90 it becomes very blurry. last post on this topic was 2 years ago. do you have a good solution not involving making a material for each icon now?

the only way to have something ok that i found for now is to have each size of each icon, but with this method I have issue for 4K resolution and it

i think you can just make up some anti-aliasing in photohop and it might look fine

Try making the image you made and the image in umg the same size. i made this with Illustrator and it worked for me

Try to setup material settings from masked to translucent. It worked for me.

I run into the same issue and ended anti-aliasing my files by hand which took way too long… so I did what developers do best: automated the process!

I hope UE will eventually fix the issue, but in the meantime, you can use this web app to AA your files and even RGB pack them into a single texture file.

https://umg-antialiser.pages.dev/

No network calls, no trackers, no nothing, everything runs in your browser, your images don’t leave your machine. Source code also available on GitHub (see link at the bottom of the page).

2 Likes

thx !!!