9-Slicing UI isn't working?

Hello all!

I have a button sprite that I want to be able to scale without distorting the corners. Currently, 9-slicing isn’t working for me. Here is the button when it’s at a native scale (with my button sprite which is just a round rectangle).

8157203--1060223--upload_2022-5-25_15-16-50.png

and here it is when it’s stretched:

Here are my settings for the sprite:


(hard to see in the image but it’s sliced with each corner being in its own distinct slice)

Here is the settings for my button gameObject with the sprite attached (this is when it’s stretched and distorted)

I’m guessing it’s something obvious I missed but a tl;dr:

  • I’ve 9-sliced my sprite in the sprite editor
  • I’ve set my Mesh Type to full rect
  • I’ve set my Sprite Renderer to sliced on my button
  • I’ve tried unattaching and reattaching the sprite from the button.

The button still stays distorted whenever I stretch it.

Thank you for your time!

I think you want to reslice it so that the slices are much closer to the radius of curve of the corner, ideally ONLY the radius, then the vast area in the middle would be unsliced.

Like-a-so:

1 Like

Thank you a ton for the response! I just found out that the 9-slicing only works if you’re scaling it using the rectangle tool as opposed to the scaling tool. Now that I scale it with a rectangle tool, it works.

I’m going to reslice it so that the corners are more focused like you said though - that sounds like best practice.

Oh yeah! Didn’t see that. Definitely try to never scale UI elements… the effects are sometimes surprising.