How can I make an image scale X and Y properly?

There is built in 9-slice functionality in UMG styles. In the image’s style set the DrawAs dropdown to box and set the margins to a percentage from the represented side that works for your image.

I am using an image I created in Photoshop as a skin for UI windows. I have created it in 64x64 and added only a light bevel to it, as well as rounded corners. The problem I am having is that when I use it in Engine, it does not scale the corners properly, but instead stretches them.

I have found lots of tutorials on making 3d images scale properly, but nothing for something as simple as a 2D box that I want to be able to stretch without it distorting. It is a PNG at the moment and Rasterized. It did not seem like Vector would allow me to keep the infill color, but instead seemed to just create lines and curves for a SVG. If Vector is what I am supposed to be doing, I will try to figure that out. Any help is always appreciated!

The attached image has a transparent background, but I want the cornering to stretch cleanly, instead of stretching to break the roundness and bevel.

Ah, I will try that. I had thought maybe that might be the trick, but it seems like it SHOULD be easier. Seems like lately I have been finding a lot of “should be easier” questions.

I appreciate the guidance! I will see if that works. If you can link that forum or video that would be great too!

Sadly I lost it when I accidentally deleted my bookmarks :expressionless:
About “it should be easier”. I really can’t think of a decent algorithm that exactly knows where the stretch shouldn’t happen, especially since we are talking about rasterized images. It feels natural when doing this with SVG in another tool, but can you also stretch a rasterized image like you want in your other application? (I might be wrong, I’m not using photoshop ;P)

I actually could try it with a Vector, but I am having problems getting the image to vector without it just drawing pathing lines. So, I lose my infill color. If I could just convert the PNG to a Vector without it changing anything, id be happy to try that too.

Unfortunately, breaking it out made it really clunky, and when stretching, it lost some of its edging. I am using a custom border class, so if a Vector would fix this, and I can find a way to create it as is but Vector, I can just update my border class, and it will update the whole game, which would be awesome!

Well, looks like UE4 does not support .svg so that is a bust. :frowning:

This actually worked pretty well! I was able to change and scale the image by section. It is a bit clunky of a solution to have to do this for every image I place if they aren’t all the same, but it does work, and is fairly simple to do!