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?
And you want to use one image without getting results like this?
Well all you have to do is make a template, like this.
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.
Credit to first three images: Real World Illustrator: Understanding 9-Slice Scaling