How to make UI look better? UI edges are rendering jagged and blocky.

Development Programming & Scripting UI
,
6

I sloved the problem!
Thanks to @Everynone ! What you did to make me have white borders actually helped me! I made some research to get rid of these, and I found a problem of premultiplied alpha. So I had to make a few changes on my images to make things work.
I detected the issue with the help of this forum: White border artifact around alpha in imported texture (only on linear filtering) - Development / Asset Creation - Epic Developer Community Forums (unrealengine.com)

Here’s the process I used to make clean UI:

  1. I first reset my texture settings to default, exept from texture group and compression settings that stays to UI.

  2. Then I opened my images in Photoshop, and here’s the process to make them work in Unreal:
    1. Duplicate the image layer.
    2. Create a Solid Color layer, and set it to the desired color for the outline that appears in Unreal. (Some dark brown in my case), and drag it to be on the background of the image.
    3. Merge the Solid Color with the duplicated layer.
    4. Ctrl+Click on the icon of the original image layer to select only the colored pixels.
    5. Create a Layer Mask on the merged layer.
    6. Delete the original layer, and export the image!

  3. Then I reimported the images in Unreal, and in the texture settings of every image, I set MipGenSettings to SimpleAverage.

  4. And everything looks fine! It’s just a little shame unreal does not filter images without implying unused pixels.

Here’s my result!

Inventory_Solved

Thanks all for your help! I hope this will be useful for some people encountering the same problem.

1 Like