Disclaimer
Now you might say that there are already threads about this:
But, I’ve reviewed the threads and this thread is similar to it, but has more features the other 2 doesn’t.
1. What is 9 - Slice?
9 - Slice is by far one of the most used property for any UI designer on Roblox, and any other platform really. 9 - Slice enables us to set which parts of the image can be stretched
Courtesy to @TheInnovative for the image
9 - Slice takes 2 positions, similar to Region3s to construct a shape. In this case, as the image describes above, these position will tell the image where it can be scaled.
2. When Do I Use It?
The circle AssetId I’m using for this tutorial is rbxassetid://200182847
9 - Slice can be used anytime, but it is mainly used with images with symmetry. Another use case for it is for distortion of the objects, where the image gets sliced in awkward places to create a “distortion” effect.
Here are the examples:
Symmetrical Image:
With 9 - Slice:
Without 9 - Slice:
Distortion:
[Source Code]
local TS = game:GetService("TweenService")
local TI = TweenInfo.new(0.7, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut)
while true do
local Tween = TS:Create(script.Parent, TI, {SliceCenter = Rect.new(math.random(0, 1000), math.random(0, 1000), math.random(0, 1000), math.random(0, 1000))})
Tween:Play()
Tween.Completed:Wait()
end
3. How Do I Use It?
Here, I will be talking about the properties of 9 Slice. Let’s start with the first one, SliceCenter.
Slice center is where the image will be sliced, here we have a circle that is 1000px by 1000px, setting the slice center to something like 500, 500, 500, 500 would have these parts of the circle sliced:
While setting the slice center to 750, 750, 250, 250 will resize these parts:
As you can see, both produce different results.
You can fiddle around the properties until you find your desired shape.
Now for the Slice Scale property.
Slice scale is basically determines the ratio on how much the sliced parts will override the unsliced parts.
Slice scale from 1 to 0.001:
[Source Code]
local TS = game:GetService("TweenService")
local TI = TweenInfo.new(5, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut)
wait(5)
TS:Create(script.Parent, TI, {SliceScale = 0.001}):Play()
As you can see, it slowly but surely becomes a squarish shape.
The newly released UICorner can accomplish this, but as they stated in the announcements, there are some cons like having to simulate each pixel and is hard to apply. Using this can be an alternative for UI corner. But, UI corner isn’t necessarily useless. UI Corner can do some things 9 - Slice cannot do, like roundifying detailed images.
But, who uses this property? If you have discord, you might be familiar with this:
As you can see, it’s pretty similar to the
SliceScale property.
Thank you for reading! I hope you learned something new today!