Why does 9-slicing look like this?

Help and Feedback Art Design Support
#1

The guis in my game all have gradients on them, and I wanted them to be the same size on any screen using 9-Slicing. But this is how it turns out

image

Any ideas? I have no idea why it looks like this :frowning:

1 Like
#3

Sorry to hear 9-slice isn’t working out!
Could you post the image that you are 9-slicing? What are the values of SliceCenter and SliceScale on your ImageLabel/ImageButton?

4 Likes
#4

Yes of course! Sorry I didn’t respond earlier, I’ve been very busy haha.

Here’s the original image -

VotingBox (1)
VotingBox (1)800×480 105 KB

Here’s the 9-slice values -

image

#5

It looks as though the middle edges aren’t being squashed or stretched to fit properly, giving this strange look

#6

Thanks for the info!
Currently, the 9-slice scale type doesn’t squash any of the 9 image sections if they are sized smaller than the source image, it crops instead.

For example, your source image is 800x480 pixels. If you scale your ImageLabel to be smaller than that, the 9-sliced edges and center sections will be cropped to the smaller size. This results in the hard edges in the screenshot you posted.

This behavior seems seems to be non-standard compared to how 9-slice usually works. However, I’m not sure we can change it because a game might be using the cropping behavior. We could add a new property on ImageLabels to enable stretching slice segments both smaller and larger, would you be interested in this?

As a quick workaround, my suggestion would be to separate the black background texture from the blue outline. The black background could be an ImageLabel with ScaleType=Stretch, while the blue outline 9-slice source image should be smaller (maybe 100x100) so that you’re always scaling the ImageLabel larger than the source image.

#7

Awesome! I think the idea of adding a stretch option sounds great, as changing the images for everything would be rather tedious in my game and could cause issues when scaling onto different devices

Thanks for the help!

EDIT: You’d probably want to add this option to ImageButtons also, as they’re used as often ImageLabels!

#8

Hi, we are experiencing this limitation with nineslicing cropping our gradients. Is this feature planned?

1 Like