How can i get nice unstreatched borders in UMG

[woodencase01]

Hi!

I’m working on my inventory menu and wanted to reuse the same button for different applications. The button is pretty simple and is inspired by the “UI Lab” approach of driving it using a material:

The material is drawn as a box with margins set to zero.
However, no matter how I’m configuring the margin and the draw-as, I can’t get it to look good on smaller buttons:

Corners are stretched, and the line thickness is also wrong.
My goal is to keep the corners at 45° and keep the contour line thickness like the original. How can I achieve this?

[AreWeGaming]

Click on the Image and Top Right you’ll see Padding Use it

[Everynone]

@woodencase01

How can I achieve this?

9-Slice. Scroll down to Setting Image States:

Styling

Example:

Creating a material instance for each button all good?

To demonstrate what I mean, notice how the bevelled element does not get distorted: [Image from Gyazo] As 0.4 (40%) of the image (counting from the the right hand side) is preserved as a fixed border edge.

---

The material is drawn as a box with margins set to zero. However, no matter how I’m configuring the margin and the draw-as, I can’t get it to look good on smaller buttons:

Can you show how it’s set up, and what are the sizes we’re talking about? The thing is that 9-slice only works up, you want to design the smallest possible UI elements first, and only then stretch them, preserving edges / corners intact.

---

Material responds to Image Size, it might be as straightforward as reducing its size on the ButtonMaterial. Then margins work like percentage in the 0-1 range, counting from each edge.

• size set to 32 (smaller or equal to the px size of this element):

• and size being too large for this element:

This confused the margin as it now counts 40% of the 128 in pixels.

[woodencase01]

Thanks for the help! Here is the current material set-up:

The image is set to 32 x 32, and here is what happen if I change the width and height on the UMG:

The only way I managed to get something close enough is by setting both the top and bottom to 0.5:

The corners are somewhat kept at 45°, but only if I stretch them in height, not in width.

Setting the left and right to 0.05 gets me somewhere close, but the left and right sides gets a little thin:

I’m starting to wonder if it’s because my base texture for the button isn’t squared? So it gets stretched maybe?

[Everynone]

@woodencase01

So it gets stretched maybe?

Yeah, ideally it should be a square. This shape would be awkward to work with when the target widget is square shaped. Probably doable with dynamic margins but fiddly! Make it the smallest, most compact shape is should ever be and work up in order to stretch it. Never try to compress it.

For something like this mockup:

You could probably get away with all margins set to .25. If they still distort at the smallest size, try .3.

Avoid .5 or higher unless you’re opting for something truly unorthodox.

[woodencase01]

I’ll try tonight to build my button 100% from paterial and see what I can get from here rather than using textures. I should have more control over some basic parameters, and I’ll be able to draw it as a square. I’ll let you know, and many thanks for your help!