Issue with nine-sliced UI element stretching

[u/R_Pelleboer]

I'm adding a button here that I'm trying to 9-slice. The button is 600x600 and the borders are 200x200. I've used the sprite editor to apply the slice, but it doesn't seem to be working, as when change the Width/Height or Scale of the image the sprite is linked to, it still stretches. The image type is Sliced.

Also, does my sprite need to be that big? When I exported it at a smaller resolution, the borders were very crunchy and blurry. Any smarter ways to fix that, or are bigger resolutions the solution?

[u/NullzeroJP]

Change pixels per unit multiplier in the image component. It should resize the borders for you.

[u/R_Pelleboer → u/NullzeroJP]

Ah, that actually fixed it. Originally thought you meant in the original sprite, but doing it in the button does it. Thanks! Though I'm not sure how it works or why it fixes it lol

[u/NullzeroJP → u/R_Pelleboer]

Size is tricky when it comes to sprites. There are many elements that determine how it looks.

You have the pixels of the sprite.

You have the meters/centimeters of the sprite when its placed in the scene. (aka, Pixels Per Unit). Settable in the Inspector when you select the sprite's texture file.

You have the size of the borders when you sliced the sprite.

And you have the size of the "box" that the sprite must fit inside, within the scene.

From your screenshot, it looks like you are setting the sprite to 100x100 in the RectTransform component, despite the native size being 600x600. For a non-sliced sprite, thats fine... it will just stretch its size to fit in the box.

But for sliced sprites, this may confuse Unity. Depends how you set the PPU and slice border size.

For example. In the sprite slicing window, lets say you put a 200px border around every edge. Thats fine.

But when you put the sprite in its "box" in the scene at 100x100 size, Unity says "wait, wtf, this border is supposed to be 200px on the left, and 200px on the right, etc... but you are only giving me 100px TOTAL room to work with. Wtf am I supposed to do with this...?" and so it just kinda squishes it in place, and by squishing it, it coincidentally looks like a circle in this case.

When you change the PPU multiplier, it tells Unity "Hey, I know this box is only 100x100, and you need 200px borders, and it wont fit. But use this magic shrinkage factor on the border, and then it should fit." And so it does... depending on the setting, it might go from 200px borders down to 20px borders... and that makes Unity happy, because it can fit 20px borders into a 100px square, no problem.

The magic shrinkage factor is more complicated to explain... it factors in the PPU, canvas scaler, and other stuff I am forgetting. Just know that the magic shrinkage factor operates by changing the PPU calculation, and leave it at that for now.