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

[OxflyStudio]

Hi ! I’m pretty new to Unreal Engine, and I pain a lot to make UI. Step by step I could get to something, but I have have a problem of graphics.
I’m actually remaking my game for unity to unreal, so I tried to make it look aproximatly the same. But there’s something I think is probably a bug or an error from me.

Please have a look at these two pictures. The first one is the inventory in Unity, and the second one is the one I made in Unreal. I guess you can see the problem easily!

Unity:

Unreal:

Unreal actually renders ugly big jagged edge, while Unity has smooth edges.

Here are some infos that could be useful:
The textures resolution are power of 2 (512x512).
I’m using simple UI Translucent materials.
The imported textures are set as UI Texture Group, UserInterface2D Compression Settings, Filter is set to Nearest, and the tiling Method is set to Clamp for both axis.
And I already tried putting it into a Retainer Box.

I’m sowing the inventory, but the problem stands for the whole UI! While Unreal has a beautiful environment, the UI is completly messy.

It’s now hours I’ve been trying things. If you know something, do not hesitate, please help me! Also ask me if you need more details.

Thank you so much!

[Arodi007 (Pixiebell Games 💼)]

Try to use Wrap instead of Clamp as these can cause border glitch (if you really need to use clamp try to add a thin transparency edge).

Also try with a Border widget instead of an Image widget, i did experience somewhat similar issue with edge of images.

[Everynone]

@OxflyStudio

the UI is completly messy

Mhm. Yes, lacking, but changes are coming!

---

• 256px downscaled to 32px with default settings:

• same but sharpen 0:

Play around, see if that helps. Or is this not applicable here?

[OxflyStudio]

Thank you for answering! Well I actually set things to clamp because I’ve seen people saying this could be a solution, so I put it back to Wrap, but nothing changes.
And I was a little bit disapointed when I saw I’m already using a Border widget, sorry for the confusion.

[OxflyStudio]

Wow there’s awsome support in this community!
Well I hope an update is coming soon.
So I tried your solution, but nothing happens. I also tried to change downscale to 8, like you, and it did somthing a little bit smoother, but with white borders everywhere. It’s a little bit better, but it’s still not very clean, and the resolution of the image is way smaller. (maybe 8 times smaller in this case)

[OxflyStudio]

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!

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