Hi.
I’m sure there is same post somewhere, but I did not manage to find it, so I was obligated to fix common Figma-UMG problem with button textures.
As you know there is a Draw As Box and Draws As Border options in Brush (Image, Border or buttons for example) which works kind of… weird. It says it do 9-slice technique to stretch an image center vertically and horizontally to make a good-looking button with any size text in it. Well, its not quite true. For example I have this button bkg 256x256 in my figma as a background for my buttons.
I import in in UE and assign it to buttons as that:
0.3 is a real percent of a corner which should do well, but… its not:
Okay, may be image too large for my 12pt Roboto texts, lets make a smaller 32x32 texture:
seems ok but blurry:
Scaling this for 4k will be quire bad
Changing image size aint help at all. Is Box and Border broken?
Suddenly its not. First the final result in 4k:
As you see uppper border is musch more sharp and clear.
Empirically I found that real texture size does matter, it calculates button size depending on real texture size and if some dimension is less, it starts to squash image making it almost uncontrollable. To avoid it and also to use higher resolution textures for more clear result at higher resolutions you can use two-scalebox-technique:
The first one enlarges button content
and the second downsizes everything back to get desired size
This way the UMG 9-slice become usable and great tool.
, the image is too large. Did you try it with the smallest one that you ever need? Because that’s how you start with 9-slicing.
