Widget buttons changing shape...

[Yellow5actual]

Hey all, I’m super new to all of this and literally still get tripped up on words like widget, pawn, asset and such… Please keep this in mind and know that I need answers in playground level, Barney style breakdown.

I’m using a prefabricated button from a pack (its a square) and making it into a rectangle. When I make it into a rectangle, it changes the “stretch” of the button, meaning, it looks like it is being stretched across the button. My question is, how do I go about making it look normal when I make it into a rectangle? Is there a way to do that in UE5 or is this yet another thing I have to learn how to do in another program? Any advise is greatly appreciated. Also, I will have tons of questions, and already do. If there are people on here I can DM for help for these things, that would be totally awesome…

Plus, you could literally make a “true” beginners guide that addresses all these things that are new to people not familiar at all with coding and how to put things together to make them work lol. I wish I had a printed book for that so I could reference, beginning to end, all aspects of creating a mobile RPG with explantions, in plain english, what each parameter and setting does. I digress…

[rkennedyzz]

Generally images used in widgets that are more detailed than just a colored shape will be raster images. AKA jpegs, pngs, tiffs etc. These cannot be stretched as it will just stretch the pixels. So you can either make a new asset externally in photoshop/gimp/art program of choice or use a simpler style that can be created using the in system shapes and colors. There are plugins to allow vector assets but then you would still have to find or make vector assets.

When making a UI generally assets are made at a specific shape and size and are not often stretched, if they are usually they have a tileable image or something similar.

[Yellow5actual]

Ok, thanks for the advise. Doesn’t quite hit the nail on the head, though. So, I see in the pack that I bought, Premade widgets that use the same image file and it doesnt look stretched. When I don’t use the premade one, I, for some reason, cannot attain the same result with the same image file so I have to copy the widget in there and kind of modify it… poorly, i might add

[Everynone]

Is this the effect you’re after:

properly scale image as border in UMG

This looks fine. Are we talking about the border or the image that lives inside the border? [image] Here’s the behaviour I’d expect: From this image: [Untitled]

Premade widgets that use the same image file and it doesnt look stretched.

It’s called 9-slice or Box / Border mode.

---

More details:

UI question

You will find this feature referred to as 9-slice here and there. here is what happens when we try to make a border with the Image setting: Note how the edges and corners get distorted - they get squished! when Box is used, you get to reserve a percentage of the image (from each side) that will not be affected by stretching / squishing: The edges are preserved. That .25 margin = 25% of the image in pixels. This image is 540px wide, meaning that 135px (from the left & right edges) will …

How margins are calculated:

9-slice scaling UMG image

The margins are percentage, as you said. For the image you posted, you’d have to keep margins at 0.4 or 0.35 - eyeballing it here, you may get away with 0.3 A margin 0.4 for an image 100x100 pixels would mean that when you stretch the image, only the 20 pixels in the middle will be stretched. The 40% from all sides will just stick to the edges. To get a good result, it’s always better to produce a base image that will never be scaled down, only up - basically make the smallest you will need an…