SliceCenter

Value Type: Rect

Description:

The SliceCenter property sets the slice boundaries of a 9-sliced image when ImageLabel/ScaleType is set to Enum/ScaleType/Slice|Enum.ScaleType.Slice. Please note that this property is only visible in the Studio Properties Pane if ImageLabel/ScaleType is set to Enum/ScaleType/Slice|Enum.ScaleType.Slice.
Select this property and click the “…” button to open the 9-Slice Editor, a built-in visual editor for setting the slice boundaries.

To learn more about 9-sliced images, check out this tutorial: UI 9 Slice Design.

Code Samples

Image ScaleType Demo

This code sample demonstrates the different ScaleType options - Stretch, Tile and Slice. It does this by resizing an ImageLabel/ImageButton in a circle.

			
				Image ScaleType Demo

				Expected Output
			
				Expand
				
			local imageLabel = script.Parent

-- Set the source image to be a 64x64 padlock
imageLabel.Image = "rbxassetid://284402752"
imageLabel.BackgroundTransparency = 0
imageLabel.BackgroundColor3 = Color3.new(1, 1, 1) -- White
imageLabel.ImageColor3 = Color3.new(0, 0, 0) -- Black

local function resizeInACircle()
	for theta = 0, 2, .02 do
		imageLabel.Size = UDim2.new(
			0, 100 + math.cos(theta*2*math.pi) * 50,
			0, 100 + math.sin(theta*2*math.pi) * 50
		)
		wait()
	end
end

while true do
	-- Stretch simply stretches the source image to fit
	-- the UI element's space
	imageLabel.ScaleType = Enum.ScaleType.Stretch
	resizeInACircle()	
	-- Tile will render the source image multiple times
	-- enough to fill the UI element's space
	imageLabel.ScaleType = Enum.ScaleType.Tile
	imageLabel.TileSize = UDim2.new(0, 64, 0, 64)
	resizeInACircle()	
	-- Slice will turn the image into a nine-slice UI.
	imageLabel.ScaleType = Enum.ScaleType.Slice
	imageLabel.SliceCenter = Rect.new(30, 30, 34, 34)
	resizeInACircle()	
end
		
				Copy Code
			
				Light Theme