Low Image Quality On Widgets

[blagic23]

I searched about this problem online but none of the answers seemed to work for me. My friend is using Adobe Illustrator for creating the visuals, but whenever I use his assets, it always end up with this ugly pixelated images.

Normally, black borders are supposed to be smooth lines, but they end up with that jagged line, and overall quality has been downgraded. I thought it was something to do with anti-aliasing, so I set it to FXAA. It didn’t solve. We tried lowering image resolutions to match the button’s, which didn’t solve the problem either.

[Everynone]

Can you show the details panel of an image / border you’re using for this? Let’s say the first bubble text box. And the hierarchy of this widget.

[blagic23]

Here you go.

[Everynone]

So what’s the actual size of the image - the asset? Apart from that, you’re not using 9-slice here which will be a major source of distortion and artefacts.

For example, the same 256x256 asset:

• Draw as Image

• 9-sliced box:

This is zoomed in 10x in the designer to dramatically exaggerate the effect. How to set it up depends on the expectations and on how dynamic things need to be. If your image is a square and you stretch it horizontally, it will be a mess. Hard to advice better without more details.

---

so I set it to FXAA. It didn’t solve.

AA method should have no impact here unless we use a widget component in world space but it does not seem to be the case here. If it was a component, the quality would be much worse.

Generally speaking, you should be able to achieve mostly pixel-perfect results but it may need to some tweaking.

[blagic23]

Oh. It is 5724x2041. I must admit, that is a bit larger than what is required xD. I took it to full scale and divided it by 5. So the scaling is correct, but whenever I apply a margin of 0.2, it gets like this. Only not messed up margin value was 0, 0.5 and 1. I couldn’t see any major difference between them too.

[Everynone]

Those margins will not work for this image size and shape - shape specifically. Try .4 margins, or maybe even .45.

What is the max resolution you’re targeting with this? 4k? With 9-slice you want the smallest image size you can get away with.

[blagic23]

Sir, frankly I have no idea what I am doing, but the canvas size is 720p. And yes, 0.45 seemed to work fine. Before you mentioned it, I didn’t know about 9-slice. So I’ll now proceed to watching youtube videos about it. Thanks for informing me about it.

Oh and, image is still as not crisp as the original texture. There are still some jagged lines.

[Everynone]

Scroll down to Setting Image States:

Styling

---

@blagic23

Oh and, image is still as not crisp as the original texture. There are still some jagged lines.

These, right? This has something to do with export / import settings, most likely. Or compression. Start by setting the image compression to UI after importing:

And then check out this thread:

White border around 2D Texture / Sprite

Hello, I have downloaded free texture from the internet, edited it a bit and imported in my UE5. Now, my sprite has white border around, which is really strange and iritating. And I cannot resolve it. I tried the same texture in UE4, and all works fine. Image below: [image] It happens to almost any PNG image I import. Here is another example [image] [image] Now to give a bit more info. My Workflow: Import the texture Right Click → Apply Papper 2D Settings Change texture group to UI beca…

---

Yet another way to handle it all is to use materials:

How can i get nice unstreatched borders in UMG

9-Slice. Scroll down to Setting Image States: Example: The material is drawn as a box with margins set to zero. However, no matter how I’m configuring the margin and the draw-as, I can’t get it to look good on smaller buttons: Can you show how it’s set up, and what are the sizes we’re talking about? The thing is that 9-slice only works up, you want to design the smallest possible UI elements first, and only then stretch them, preserving edges / corners intact. Material responds to I…

You then get to dictate the Image Size.

---

but the canvas size is 720p.

If you mean this:

Then this is just a designer preview so you can get a rough idea of how things are going to line up.

[blagic23]

Thanks for your replies. After getting correct resolutions for images and using 9-slice,
there aren’t any more problems. It appears the solution wasn’t as complex as I thought.