How to use SliceCenter (Roblox's 9-Slice GUI Property)

Ever wanted to create borders for your UI that you can stretch however you want without distorting the image? Your solution is using 9-Slice scaling. The concept of 9-Slice scaling has been around for quite some time.

So you want something like this?

image

And you want to use one image without getting results like this?

image

Well all you have to do is make a template, like this.

image

The corners of the image never stretch, the 4 sides only stretch to their respective directions, and the center stretches normally.

Now that you know what 9-slicing is, how do I use it in Roblox? Simple. You only need to tinker with two properties, ScaleType and SliceCenter.

First, you simply set ScalyType to Slice. This will enable the image to be sliced instead of stretched.
Next, you need to set two coordinates that make the center box of your template image. The goal with SliceCenter is to form a “Box” using two points, Point A and Point B. Everything on the outside of this box is considered a border, and will follow the 9-Slice Rules.

SliceCenter is a Rect2D. This means it’s value is X0, Y0, X1, Y1. The first two numbers, X0 and Y0, create the first point of your center box, and the second two numbers, X1 and Y1, create the second point. Here’s an example of a 48x48 pixel image with a border width of 6 on each side. (Aka, the center square is 36x36).

Note: 2 Red points create a box, the two green points are for reference of total image size[/spoiler]

Now that you have set up the SliceCenter, everything outside the red box is your border, and will be stretched appropriately! All you have to do is change the Size of the ImageLabel or ImageButton and the slicing will do its magic. :slight_smile:

Credit to first three images: Real World Illustrator: Understanding 9-Slice Scaling

216 Likes

Finally this makes sense.
Thank you.

2 Likes

Finally a good explanation of what that enumtype does.
I’ve been waiting a long time to know how it works.
(Has no information on the wiki, except the tiny bit I added, which lacks about everything related to this)

1 Like

Thank you so much!

I have discovered that 9-slice works properly with ImageOffset and ImageRectangle. This means you can have a sheet of several 9-slice templates and use them without being forced to separate them into separate images.

1 Like

I’m trying to use SliceCenter for a GUI, and I understand it, thanks to this tutorial, I just don’t understand how you’re supposed to know what the (x,y) coordinates are on the image. I can point to the two corners on the image I want to use, but I don’t know how to plug that into the SliceCenter property.

Help appreciated!

2 Likes

Open the image in an image editing program of your choice (you can even use Paint if you’re not into graphics and don’t have anything else). You’ll be able to get the pixel location from there.

Paint: Mouse over the pixel you want to check the position of and then glance down to the bar at the bottom of the window (opposite of topbar). At the very left of that bar it’ll have positional data for you.

Paint.NET (free image editing program): Enable the box select tool and draw a box with the top left starting at the top left of the desired pixel. Again in the bottom bar, you’ll find the positional data for that pixel.

In both programs, if you box-select something (easier to do in Paint.NET), the bottom bar will also tell you the size of your selection in pixels which can also be useful for ImageRectSize.

7 Likes

Thanks. I thought that might be it, but I wasn’t sure if ROBLOX compressed the image size. Also, do you know of an easy way to get pixel location in photoshop? If not, it’s fine, I also have PDN.

Edit: Nevermind, I got it. If anyone else is interested, you can press F8 in Photoshop to view the coordinates of your cursor.

1 Like

ROBLOX only compresses the image of one axis or the other is larger than the max, 1024 (your image for 9 slice probably shouldn’t be larger than 1024 in either direction so no worries).

Thank you for this, it’s very useful information!

1 Like

Thanks!

1 Like

A bit of clarification on that last part:
X0, X1, Y0 and Y1 are all measured relative to the top left corner of the image. For example, the upper left point is 6 pixels down and 6 pixels to the right, and the lower right point is 42 pixels down and 42 pixels to the right, when measured from the top left corner.

1 Like

This is incorrect; both coordinates are relative to the top left of the image. X2 and Y2 do not equal the side lengths of the box.

edit: original post was fixed - ignore this!

3 Likes

Aight, thanks for correcting. Should I delete that? I feel like I should.

1 Like

Just edit the post and everything should be good :slightly_smiling_face:

Er, with what? I can’t just copy-paste what you said. Unless I could take down the second point.

Something like:

A bit of clarification on that last part:
X0, X1, Y0 and Y1 are all measured relative to the top left corner of the image. For example, the upper left point is 6 pixels down and 6 pixels to the right, and the lower right point is 42 pixels down and 42 pixels to the right, when measured from the top left corner.

I don’t mind if you use my exact wording or if you write it in your own words :stuck_out_tongue:

1 Like

Since there is 9 UIs instead of 1, would that take longer to load for those with low devices? I’m thinking if everything is like this on a game that might do a lot of UIs?

Thank you though, I will definitely try this next time I do an interface with round corners.

1 Like

Just a note: The images are broken and cannot be seen.

2 Likes

Nice tutorial but yeah, as Reset said above, please re-upload the images.

1 Like