Button background image without stretching

So, the problem is pretty clear:

You can see, that the image behind text (or border image, idk how to really name it) is stretched.
It’s there a method or some magic to make it look normal? I already set this texture group as UI, but yep, it didn’t change nothing…

Maybe there is a procedural way?

This is the expected look:
pc_window_background_border (1)

Maybe I don’t understand the question but…
Don’t these work to center without stretching?
image

Do you need it to resize? Do you need it to change proportions?

Yes!
The image that I wanna set as background is 256x256 in size, so it’s basically a square image, but my button’s not always will be squared, but also rectangle with really different sizes.

So, now I wonder. I need to make “any-shape” background image for every button? And for every screen size?

In Unity 3D as If I remember correctly, You can slice a UI Texture that will be set as button background for example, and it will fit into any button size without stretching. Here is what I’m talking about.

So, I wonder, is there any way to do something similar in UE 5.4?

I also did like you suggested, and it didn’t work:

I can make background image smaller so It will not be stretched, but then button is too small:

Try Draw as Border:

It breaks your image into 9-slice depending on the margins provided. (breaks into nine images - 4 corners, 4 sides and one center that is discarded in that case)
In my case the corners are each 25% of the image - 8x8 pixels. You might need different margins for your picture.

Draw as Box works similarly but stretches the sides and keeps the center.

First - thank you in advance for your help.

Your example works, but only in the case when the camera is close to the button.

When the camera moves away, then the border is also affected and something like this happens:
Zrzut ekranu 2024-09-01 141656

Here is how it looks in the game:

And I know - I should adjust the margin so that at a distance of X it looks correct, but this is a game, the player may be in different situations, have different ideas, and this solution seems to be just covering the problem, not a solution.

If there is no other solution, well, I will have to go along with it, but I am still open to other solutions.

Yes. This approach will keep the scale of your image static. Just downscale texture until you get the desired result.

I don’t understand what different situations your player might be in in regards to the UI.

1 Like

It works! Thank you very much, problem solved.


Same issue here I believe. Image is getting stretched and I want it to be smaller but not visibly stretched like it is. I even resized a copy to the buttons dimensions and it was still stretched and messed up.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.