ImageRectSize

Value Type: Vector2

Description:

Allows the partial display of an image in conjunction with ImageButton/ImageRectOffset. This property determines the pixel size of the image area to be displayed. If either dimension is set to 0, the entire image is displayed instead.

This property behaves identically to ImageLabel/ImageRectOffset.

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.

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

Image Animation using Spritesheet

This code sample uses ImageRectOffset/ImageRectSize in order to play an animation of a man throwing a punch

Expand

-- Place this in an ImageLabel/ImageButton with size 256x256
local imageLabel = script.Parent

-- The following image is 1024x1024 with 12 frames (256x256)
-- The frames play an animation of a man throwing a punch
imageLabel.Image = "rbxassetid://848623155"
imageLabel.ImageRectSize = Vector2.new(256, 256)

-- The order of the frames to be displayed (left-to-right, then top-to-bottom)
local frames = {
	Vector2.new(0, 0); Vector2.new(1, 0); Vector2.new(2, 0); Vector2.new(3, 0);
	Vector2.new(0, 1); Vector2.new(1, 1); Vector2.new(2, 1); Vector2.new(3, 1);
	Vector2.new(0, 2); Vector2.new(1, 2); Vector2.new(2, 2); Vector2.new(3, 2);
}

-- Animate the frames one at a time in a loop
while true do
	for i = 1, #frames do
		imageLabel.ImageRectOffset = frames[i] * imageLabel.ImageRectSize
		wait(.1)
	end
end

Copy Code Light Theme