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:
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?
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
51 is 25% of 204. Your margins should be 0.25 or more. The text cannot be a part of the image, of course.
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.
