9-slice scaling UMG image

I just recently discovered the 9-slice scaling feature in UE4, but I can’t seem to wrap my head around how to calculate the margins.

For instance, take this simple image:

Button_DefaultHovered.png
This image is originally 256x256. This image will be used as it is (1:1) but I intend to use this image for buttons as well. This is where the 9-slice scaling comes in handy.
I want to button to look something like this:

I tried messing around with the margins in UE4, but I can’t seem to get it right. The documentation isn’t much of a help either, but I suppose that just because I might not understand 9-slice scaling properly. I would appreciate some more detailed explanation on how I know what my margins should be?

3 Likes

afaik - 1,3,7,9 dont scale, so slice close to white ends

(sorry for sloppy lines - using mouse as pen)

Yes, I do get that much about 9-slice scaling. The issue however, is how I know what percentage to use for the margins? I’ve fiddled around with the margins for quite a bit, but nothing really seems to work that well.

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 and 9-slice that. Yours looks spot on.

edit: pixel size is weird because of how lazily I copypasta this :expressionless:

Untitled.png

51 is 25% of 204. Your margins should be 0.25 or more. The text cannot be a part of the image, of course.

2 Likes

calculation is:
(1.0 / ImageWidth) * BorderWidth
(1.0 / ImageHeight) * BorderHeight

this results in thw percentage values for the slices 1,3,7,9 - from 0.0 to 1.0

The Slices 2,4,5,6 and 8 are resulting slices based on the corners, and only stretched and not tiled!

There’s *border *Draw As mode where the sides tile, too.

Yes, I would expect 30-40% margins, but still the image looks as below

stretch.png

Can you show a screenshot of the details panel? Looks spot on on my end:

Sure.

Aaaaah. It’s because the image is to big. If I scale up the image within the engine, everything looks good, but since I only need the image to have a certain size, It messes with the scaling.

Scaling up the image looks like below, but as you can see, it’s way to big for my button. I suppose I should scale down the image before importing.

tn2.PNG

Yup, make the original image the smallest version you will ever need.

Thanks, this post helped!