UMG Draw As Box has weird behavior with textures

Development Programming & Scripting UI
, , ,
1

I am trying to use a button with a custom style in UMG, but the option ‘Draw As Box’ does not work as expected when using a texture for the image.
This is how it should look like, and it actually does look like that when I create a Slate brush from the image with a margin of 0.1:

61742-drawasbox_slatebrush.jpg

This is how it looks like if using the Texture directly in UMG (Texture options taken from Styling | Unreal Engine Documentation):

61743-drawasbox_texture.jpg

As you can see, the border is much too wide. Changing the margin does change the result, but it never looks like the brush version.

Now, if I create a Material from the Texture (nothing special, just returning the Texture as Final Color), and change the image size in the style from 128x128 to 32x32, it looks like it is supposed to:

61744-mat.jpg

Changing the image size this way in the Texture version has no effect at all.

Perhaps I am doing something wrong, but it seems to me like the behavior of these three ways of doing the same thing should be the same.

2

Hello ,

I could not reproduce this issue on our end. I created a new texture and I then adjusted the margins and after this I was able to scale the image without the borders distorting. If you adjust the margins for the image does this have any effect?

3

Hi Rudy,

thanks for taking a look. Adjusting the margins does have an effect, just not the one I would expect.
Here is a screenshot with a margin of 0.25:

61768-box1.jpg
61768-box1.jpg1342×577 44.4 KB

And here is one with a margin of 0.1:

61769-box2.jpg
61769-box2.jpg1354×570 45 KB

What I am doing step-by-step:

  1. Create an empty project (UE 4.9.2 from launcher, not self-compiled)

  2. Import the following texture (Texture Group: UE, Compression: UserInterface2D):

61770-button_default_normal.png

  1. Create a new widget blueprint and add a button

  2. Set Style->Normal->Image of the button to the imported texture

It then looks like in my screenshots. Am I missing a step? Do you get a different result when doing this?

4

The only thing that I can see that I have done differently was that I adjusted my margins after I had the size of my button the way that I wanted it. You can click and drag on the margins to get the look that you would like after adjusting the size of the button. Let me know if this method helps.

Example:

61870-borderbuttonhelp.png
61870-borderbuttonhelp.png887×542 44.8 KB

5

It actually looks the same as in your image, but is that really the correct behavior? The borders do seem much too big, don’t they?

If I create a material from the texture, as I described in the first post and use this instead of the texture, it looks much different:

61886-box_2.png
61886-box_2.png1586×600 56.7 KB

For comparison, here is it with the texture again (note I am using the exact same settings both time, I just used the material instead of the texture):

61887-box_1.png
61887-box_1.png1601×629 66.4 KB

Is it intended that this looks different?
Perhaps it is just me, but I wanted it to look like in the first picture, and it took me quite some time to notice that I had to use a material instead of a texture for that.

6

Hello ,

After looking into your issue further I was able to reproduce the difference that you are seeing on your end. However, this is working as intended. The difference that I noticed between my test and the one that is shown in your last post is that the image sizes were different. Changing the image size on a texture will virtually have no effect. This is different for materials. Thank you for your time and information.

Make it a great day

7

Thanks a lot.