Download

[UMG] 9-slice images look ugly, can't get margins right

We’re putting a small overlay along the bottom of our screen that displays some player information. We have a great image to use for it, but it really only works in one aspect ratio. When the horizontal gets any thinner, it cannibalizes the look of the image.

We’re looking into using 9-slice sprites for this instead, but we can’t seem to get the margins correct. The corners of the image are either too big or they look squashed/stretched. The sides end up looking blurry unless we really stretch them far, which doesn’t really work for what we want to do. Adjusting Render Scale seems to produce nicer results, but then the sprite ends up being culled outside of the viewport area and those culled areas don’t respect the Render Scale so our sprite is the right size but is cut off on the sides!

I’m thinking maybe we’re just doing something wrong, but I can’t figure out what. I’ve watched the UMG intro from back in August where Matt talks about widget styles and walks us through a Button style. I’ve tried both Box and Border style with all manners of margins. Image Size doesn’t appear to do anything for me. I’ve tried with 4096, 512, and 64 square textures for this, but I can’t seem to find the right mix.

What’s the best production path to follow for using 9-slices in UMG?

Do you have a sample image that you could post here, and then show the results in a screenshot as well so we can see what the issue is?

Sure. This is the image (and anyone, please feel free to use it in your own games):

6aadac2737bde3088827c36adb4444ff3bec436f.jpeg

This is the result:

bbdfec1ec7c2de77ff9a910ace78e8c15c0c517e.png

It’s the best result I can come up with. Notice the horizontal stretching and the weird blurring.

Hi Jared,

At a glance, it looks like you are not setting your margin values large enough. The value for each needs to be the distance at which there is no further change pixel by pixel in that axis (hard to describe exactly). I just did a quick screencap, and it looks like you want a value more like 0.085 than 0.076 for this particular image.

Cheers,
Michael Noland

First thing I’d start with is to seriously cut down on the size you’re working with. The idea of a 9slice is to expand as needed, rather than contract.

Try something more like this: (But make it yourself as I did this in a hurry and it’s not square or anything.)

Thanks Mike, but I wasn’t able to produce a good result with any margin.

Veovis was right; not only did I need to fatten the border but I needed to decrease the resolution. I had tried decreasing the resolution before, but it’s the combo of low-res and a fat border that does it.

For some reason, high-res images squish and scale when the widget size is too low (which you would think shouldn’t happen by virtue of being a 9-slice) so going with 128x128 for the border produced much better results. Curiously, I had even better results using the Draw As Border option instead of Draw As Box, though the dark inner part got nixed with that option. But if I place a flat image behind the border and set its alpha appropriately, I get the best results of all.

I realize I’m way, way late here, but I was just trying to solve this problem myself, searched, read this thread, and figured out what the actual deal is.

To get rid of the fuzzies, on the image itself (within unreal editor) turn off mipmaps. Fuzzies disappear.

Setting the Texture Mip usage to UI and compressing the texture as TC_UserInterface also prevents that, and gives you prettier textures too :slight_smile:

Awesome. Thanks!

Great new info!

Thank you!