The png file has 640 x 640 pixels. I am following this tutorial:
youtube: Unreal Engine 4 SnackSize - How to Use the Border Widget
You can see how the png file is simply a green, rounded border in the preview.
I can put any number into the Image Size fields … no effect. Why does the border appear so distorted? Why can’t I set a smaller image size? How to fix this?
This is my widget hierarchy:
Greetings @rubm123
The border boxes do stretch the textures inside of them. Have you adjusted the margin from 0.2 to 1.0? If not, try that and see what the image looks like afterward. I’ll do some testing on my end as well. Let me know what you find.
that’s for margin set to 1.0 (left, top, right, and bottom)
So the last one looks OK. But I don’t get it. Why does the image size have no effect? Given the original png (that I use for the border), 0.2 should be working fine.
I have the same problem - that I can’t properly set the image size - elsewhere. Maybe there is something wrong in my widget hierarchy that addresses both cases.
I pulled a couple of posts that I think may help explain some of this a bit better. This is post one and here is post two. Give those two a read when you get a moment and see if that helps.
Because UMG is not clever enough and it uses the size of the asset itself. Image size would be important were you to use a material for 9-slicing:
The png file has 640 x 640 pixels.
.2 margin is 128px from each side. If your border is smaller than 256 in UMG, it will look distorted. As a general rule of thumb, go with the smallest image you can get away with and then scale it up.
Is the smallest element going to be 640x640 in UMG? Also, margins above .49 make little sense for a border. Make the image 64x64 and then it will look ok for all sizes from 64 upwards.
Thanks. Your hint to use a smaller image helped.
This is the same border.png, just scaled down to 64x64 pixels in Gimp.
Margins are at 0.2. The left shows Draw As: Border. The right shows Draw As: Box.
I would like to understand why Draw As: Box still looks stretched this way. Those are the settings.
This looks fine. Are we talking about the border or the image that lives inside the border?
Here’s the behaviour I’d expect:
From this image:
