How to use 9-slice on more complex images (not just a solid 1 color)

I have this button, made up of 2 images, a main button, and then a shadow, however, it was uploaded as a rectangle image, and I am using ScaleType Fit to prevent it from warping and looking bad on other screens, however this means if I want to make it say a square, I can’t. It maintains its constant size.

These are the 2 images

As you can see, both don’t have a definitive border, and thus I’m not sure how I can use 9-slice without having the edges be expanded.

I’ve already read the 9-slice articles, I know how it works, but all of them show how to use it on a basic rounded edge frame, not something with with areas that can’t be modified

1 Like

I’d probably split those two images like this:

Any section that is repeated in all dimensions should be the middle area of the 9 slice. Anything that can stretch in the x-axis should be the top and bottom middle areas. Same with the sides for the y-axis stretch. And then the corners kept exactly as they are.

For the second image, because you don’t want it to stretch at all in the y-axis, you’ll need to set the y positions to 0, and make sure the button is no taller than the image, or use SliceScale to correctly scale it to the desired height.

Edit: correction on the second image procedure.

Just tryna do the second image on its own for example, using your method causes this.

Originally image without 9-slice.

These are the portions on the image where it is solid color
X0 = 111
X1 = 900

Can see the points of how I’d imagine it should be, however for some reason, the left side is being cut off in studio and the right side is being stretched

Roblox has a maximum image size so it might be that you’ve exceeded it and ended up needing slightly different coordinates.

Do you mind putting the decal ID here for that image? I can take a look for you.

This is what I got when I uploaded the image I included in my reply, with 150,0,900,0. Seemed to work really well:

Ye Roblox scales anything above 1024x1024 back to that size, however this image, both X and Y are below that number

This is the ontop image

And the below image (shadow)

Bottom one works fine for me with the coordinates you have of 111,0,900,0.

Didn’t know the coordinates for the top one so I’ve not set that up currently, but here’s a model of the ScreenGui with both buttons set up. Dragging the bottom one’s size with the UI editor seems fine to me:
GuiTest.rbxm (2.7 KB)

Seemed to work nice for smaller sizes, but when I gave it larger sizes it did this

Also you did top image as 111,900, with the Y being 0. That would then strecth the top white rim area

Yeah if you go over the max height of the image you uploaded you’ll need to use SliceScale to scale it up. E.g. if the image is 240 high with the bottom image and you wanted the button at 480 then you’d need SliceScale of 2.

It’s either that or have the side stretch and become distorted by putting y1 at the bottom of the image. There’s no repeated part of the sides for the back image so those are the two options.

There’s no harm in setting SliceScale to a very high number - when you’re below the height it’ll behave the same as with 1 - though your sides will become pixellated at larger sizes because the image you made is from only has so many pixels.

An example with SliceScale 4, and the button at 535 pixels tall:

How does SliceScale exactly work? Cause changing it from 1 to 2, or to even like 10, seemingly did nothing to the image? Is there something I’m missing

It scales the slice image and coordinates, but in the same way that if I had a 512 image or a 1024 image, if the button is only 256 then they would both show the exact same.

It essentially allows it to scale beyond its max resolution, but whether or not you’d actually want that is up to you and how good quality you want the edge to be.

I’m still getting minor problems.

If I set it to this size

And then make it bigger (or smaller) the details on the buttons also get expanded

I don’t want the edging to ever get stretched out. It should remain at a constant size, and only the solid color centre should change size

Then you need to make the slice image at the size you want the edges to be and use slice scale 1. I’m not sure why your two images need to be two images after seeing how you’ve combined them. You could probably have 1 image and create it at the size you want the edges to be.

It will only scale those up if the slice image or the slice scale is higher than the button’s size.

The reason for 2 is a click animation, so they need to seperate to give the 3d effect when clicking the button

If you’re happy with the bottom one scaling and the top one needs constant width on those edge pieces then use slice scale or upload a smaller image to set the maximum that they will scale to and beyond that they’ll stay a constant size.

Can you explain a bit more on what SliceScale actually does? If I upload an image that’s like 1024x512, how is a SliceScale of 1 or 0.25, 0.5, etc. gonna differentiate what actually happens

Slice scale of 0.25 is the same as if you had uploaded an image at 256x128. So if you have your button at 256x128 pixels, as you increase its size the corners will stay exactly the same.

However, the same image at a slice scale of 1 will have its corners continue to scale up in size until you reached 1024x512, and then the corners will stay at that size as the button gets bigger, stretching only slices 2,4,6 and 8 (the edge pieces) in the axis along the image edge.

It’s effectively changing the size of the source image to have greater control over when the different parts of the slice reach their maximum size. There’s no minimum, so for a button of size 256x128 the corners will be the same size for slice scale 0.25, 0.5 and 1, but a slice scale of 0.125 would make the corners half their size.

It’s hard to explain it fully in words, but if you use your top image as the example, get three versions and set them to those three scales and see how it affects when the corners stop growing.

1 Like

I’m just confused as how an image of 256x128 won’t change unless the SliceScale is 0.125? I’d imagine making it say 0.5, would make the image 128x64??