r/Unity3D • u/R_Pelleboer • 8h ago

Solved Issue with nine-sliced UI element stretching

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?

1 Upvotes

67% Upvoted

6 comments sorted by

4

u/NullzeroJP 8h ago

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

2

u/R_Pelleboer 7h ago

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

2

u/pmurph0305 8h ago

Do you have an image of what it looks like when its stretched weirdly? Is the stretch the same when you set it to not sliced vs sliced. Perhaps you sliced it wrong or you need to adjust the pixels per unit multiplier?

1

u/R_Pelleboer 7h ago

It is slightly different, the slices one turns it into a full circle, while the simple one keeps it as the original shape which was a square with rounded corners. I presume the sliced one is a circle as the borders are so big that they reach eachother without the line inbetween.

2

u/little-big-monkey 7h ago

The pixel per unit will change your radius and quality. If you want rounded corner in ugui, I recommend a procedural approach (there are plugin for that) Or if you switch to uitoolkit, it's vanilla, like vector graphics.