I am trying to slice a UI image so that it can be scaled and stretched without the edges losing detail.
But when I do that, the corners of the 9 slice get stretched, too.
How do I avoid that? Am I doing something wrong or is this to be expected?
Only the middle rectangle should be stretched on both axes and the borders should be stretched on one axis, except the corners, which shouldn’t be stretched at all.
@LaneFox :
Unfortunately, if I take images of the context, you won’t be able to see the detail as pecise anymore. But I can post some further images, too.
The images in my original post show the upper right corner of the UI element.
@Brathnann :
You are talking about the Image component, right? I set the component’s type to sliced, yes. At the .png’s import settings, I use sprite mode as “Single”. That should be the right option, too, I guess.
EDIT:
Here are some more images (the green image in 02 should have 45° symmetrical round edges just like the sprite):
Try slicing closer to the corner, there is a lot of dead space it probably is trying to squeeze the large dead space into the small space you’ve given the button to occupy.
Also, why do you need a 2048x2048 UI button? You can probably do this just as good with a 256x256.
@LaneFox :
I actually tried slicing closer to the corner in the beginning, but ended up getting a result that’s way too round:
I need that resolution, because I use the same sprite all over the place (for example, for menu backgrounds that take up almost all of the screen, too). Also, I tried reducing the resolution just to make sure it doesn’t solve this issue, but the shape is still the same. Reducing resolution only reduces the quality of the image.
The thing is, the corner squares of the 9 slice get stretched. They don’t stay squares but become rectangles:
I had a similar problem with one of my sliced graphics, and it turned out to be because the transform had non-uniform scaling values.
I see from your screenshot that your scale values are all set to 1, but you should check whether any parent object has non-uniform scaling values, too, since those are inherited.
@Antistone :
Thank you for your suggestion! I checked all the parents and all of the scales are set to 1, 1, 1. Just to make sure, I unparanted the button so it would only be paranted to the canvas itself. Then, its scale still was set to 1,1,1 and the issue persisted. So unfortunately, this doesn’t solve the issue either.
However, while taking a look at the parenting, I noticed the same sprite works pretty well as menu background (it’s also stretched, yet its corners remain unstretched).
This only happens with the buttons.
Maybe a sporadic bug? I don’t know, but I will have to investigate further when I have the time to do so.
Do you use CanvasScaler? You can adjust its Reference Pixels Per Unit -value, it will affect the corners. I’d still recommend using smaller texture with less whitespace in the middle.
EDIT: The issue is likely that you have set up those huge corners, and it tries to fit all those pixels in the limited space (controlled by the refernce pixels / unit) so it ends up stretching them to fit.
@mh114
Thank you for your answer!
While reducing the whitespace in the middle didn’t change anything (also, I might still need that for including some patterns in that area), I do use the CanvasScaler component and adjusting the value of “Reference Pixels Per Unit” did get rid of this problem! However, I still don’t really understand what exactly that value is used for, even after reading the tooltip, the documentation online and some forum entries that talk about not understanding that value.
@Shushustorm
Not sure if relevant at all, but for me simply removing and re-adding the Image often fixes the problem. This issue seems to happen to me when I have already added the sprite to an Image, and only after that I modify the sprite to be 9-sliced. The Image component seems to be unable to properly update itself after that.
@mikael_juhala
Thank you for your suggestion! In my case, though, the problem couldn’t be solved like that. Still the only thing that works is tweaking the value for “Reference Pixels Per Unit”.
@Shushustorm Did you find solution? I have similar problem trying to set 9sliced image to panel. Maybe because i have horizontal layout group in parent panel but strange
The solution to this problem is as follows: Find out the size of your image, say 512 x 512. The enter that size in Inspector window => Pixel Per Units, of the image you created. I have notice that with some sizes you can set the Pixel Per Units even to half of the image’s size, example: image size = 512 x 512, you can set PPU = 256, and you get bigger corners
Thank you!!! I’ve been going nuts trying to figure this out. Changing the pixels per unit to match the dimensions of the sprite took care of it. Couldn’t find it anywhere in the documentation or other video tutorials. Bug?
I had this issue with an image that I altered with the scale tool. I deleted the image and tried again and only altered it with the rectangle tool and everything worked perfectly. I didn’t need to alter the pixels per unit (which was causing my image border troubles on my first go-round)
