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.
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
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.
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
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)
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.
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.
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.
