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?
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.
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.
The best way is to create a new UserWidget named GUI_Main_Window. In that widget, you create a nine-slice window, with a correct tiling top, bottom, left, right and the corners. And a both sides tiling pattern for the fill-in. Than you drop the “GUI_Main_Window” widget from the “Custom” section into your newly created widgets. Theres your nine-slice, scaled by your desire. With that method, you can make buttons, sliders and all of that, relink (delegate) it and create your custom GUI-style and than reuse it for every widget you create. That will keep a design line with once created stuff, not necessary to look into your graphic bible for every button you throw in. That all works with capsulated logic inside the premade GUI_Main_Window-Class. For example, i made a UserWidget-FadeScreen, I drag it in a widget, link it in Blueprints and its fade in and out.
