9 - Slicing Use Cases

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
image

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:
image
image
While setting the slice center to 750, 750, 250, 250 will resize these parts:


image

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!

25 Likes

This kind of gives me them rounded corner hover effect vibes, especially the last section!

I honestly had never thought of using Slicing to create distortions (which look really cool by the way!). This is a great resource as UICorner won’t be able to cover every use case here.

8 Likes