ImageLabel
An ImageLabel renders a rectangle, like a Frame does, with an image asset. The display of the image can be manipulated through the ImageColor3 and ImageTransparency properties. To display only the image and hide the rectangle, set GuiObject.BackgroundTransparency to 1.
Advanced ImageLabel usage includes:
Tiled images can be created by setting ScaleType to Enum.ScaleType.Tile, then TileSize to the size of rendered tiles.
9-slice images can be created by setting ScaleType to Enum.ScaleType.Slice, then SliceCenter to the center area of the 9‑slice image.
Sprite sheets can be implemented through the use of ImageRectOffset and ImageRectSize. Packing multiple images into one and using this property can make your experience's image assets load much quicker, especially if you use many small icons in your GUIs.
Summary
Properties
The image content displayed by the UI element. Reads and writes to ImageContent.
Determines how a rendered image will be colorized.
The image content displayed by the UI element. Supports asset URIs and EditableImage objects.
The offset in pixels of the sub-area of an image to be displayed.
Determines the size in pixels of the sub-area of an image to be displayed.
Determines the transparency of the rendered image.
Indicates whether the image has finished loading from Roblox.
Selects the image resampling mode for the label.
Determines how an image will scale if displayed in a UI element whose size differs from the source image.
Sets the slice boundaries of a 9-sliced image.
Scales the 9-slice edges by the specified ratio.
Sets the tiling size of the ImageLabel.
Properties
Determines whether this UI element sinks input.
Determines the origin point of a GuiObject, relative to its absolute size.
Determines whether resizing occurs based on child content.
Determines the GuiObject background color.
Determines the transparency of the GuiObject background and border.
Determines the color of the GuiObject border.
Determines in what manner the GuiObject border is laid out relative to its dimensions.
Determines the pixel width of the GuiObject border.
Determines if descendant GuiObjects outside of the bounds of a parent GUI element should render.
Determines whether the player's mouse is being actively pressed on the GuiObject or not.
Determines whether the GuiButton can be interacted with or not, or if the GuiState of the GuiObject is changing or not.
Controls the sort order of the GuiObject when used with a UIGridStyleLayout.
Sets the GuiObject which will be selected when the gamepad selector is moved downward.
Sets the GuiObject which will be selected when the gamepad selector is moved to the left.
Sets the GuiObject which will be selected when the gamepad selector is moved to the right.
Sets the GuiObject which will be selected when the gamepad selector is moved upward.
Determines the pixel and scalar position of the GuiObject.
Determines the number of degrees by which the GuiObject is rotated.
Determine whether the GuiObject can be selected by a gamepad.
Overrides the default selection adornment used for gamepads.
The order of GuiObjects selected by the gamepad UI selection.
Determines the pixel and scalar size of the GuiObject.
Sets the Size axes that the GuiObject will be based on, relative to the size of its parent.
A mixed property of BackgroundTransparency and TextTransparency.
Determines whether the GuiObject and its descendants will be rendered.
Determines the order in which a GuiObject renders relative to others.
Properties
Describes the actual screen position of a GuiBase2d element, in pixels.
Describes the actual screen rotation of a GuiBase2d element, in degrees.
Describes the actual screen size of a GuiBase2d element, in pixels.
When set to true, localization will be applied to this GuiBase2d and its descendants.
A reference to a LocalizationTable to be used to apply automated localization to this GuiBase2d and its descendants.
Customizes gamepad selection behavior in the down direction.
Customizes gamepad selection behavior in the left direction.
Customizes gamepad selection behavior in the right direction.
Customizes gamepad selection behavior in the up direction.
Allows customization of gamepad selection movement.
Methods
Methods inherited from GuiObjectMethods
- TweenPosition(endPosition : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : boolean,callback : function):boolean
Smoothly moves a GUI to a new UDim2.
- TweenSize(endSize : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : boolean,callback : function):boolean
- TweenSizeAndPosition(endSize : UDim2,endPosition : UDim2,easingDirection : Enum.EasingDirection,easingStyle : Enum.EasingStyle,time : number,override : boolean,callback : function):boolean
Smoothly moves a GUI to a new size and position.
Events
Events inherited from GuiObjectEvents
Fired when a user begins interacting via a Human-Computer Interface device (Mouse button down, touch begin, keyboard button down, etc).
Fired when a user changes how they're interacting via a Human-Computer Interface device (Mouse button down, touch begin, keyboard button down, etc).
Fired when a user stops interacting via a Human-Computer Interface device (Mouse button down, touch begin, keyboard button down, etc).
Fires when a user moves their mouse into a GUI element.
Fires when a user moves their mouse out of a GUI element.
Fires whenever a user moves their mouse while it is inside a GUI element.
Fires when a user scrolls their mouse wheel back when the mouse is over a GUI element.
Fires when a user scrolls their mouse wheel forward when the mouse is over a GUI element.
Fired when the GuiObject is being focused on with the Gamepad selector.
Fired when the Gamepad selector stops focusing on the GuiObject.
Fires when the player starts, continues and stops long-pressing the UI element.
- TouchPan(touchPositions : Array,totalTranslation : Vector2,velocity : Vector2,state : Enum.UserInputState):RBXScriptSignal
Fires when the player moves their finger on the UI element.
- TouchPinch(touchPositions : Array,scale : number,velocity : number,state : Enum.UserInputState):RBXScriptSignal
Fires when the player performs a pinch or pull gesture using two fingers on the UI element.
- TouchRotate(touchPositions : Array,rotation : number,velocity : number,state : Enum.UserInputState):RBXScriptSignal
Fires when the player performs a rotation gesture using two fingers on the UI element.
Fires when the player performs a swipe gesture on the UI element.
Fires when the player performs a tap gesture on the UI element.
Events
- SelectionChanged(amISelected : boolean,previousSelection : GuiObject,newSelection : GuiObject):RBXScriptSignal
Fires when the gamepad selection moves to, leaves, or changes within the connected GuiBase2d or any descendant GuiObjects.
Properties
Image
ImageColor3
ImageContent
ImageRectOffset
ImageRectSize
ImageTransparency
Code Samples
local RunService = game:GetService("RunService")
local imageLabel = script.Parent
local function onRenderStep()
-- Oscillate ImageTransparency from 0 to 1 using a sine wave
imageLabel.ImageTransparency = math.sin(workspace.DistributedGameTime * math.pi) * 0.5 + 0.5
end
RunService.RenderStepped:Connect(onRenderStep)IsLoaded
Code Samples
local imageLabel = script.Parent
local startTime = workspace.DistributedGameTime
-- Wait for the image to load
while not imageLabel.IsLoaded do
task.wait()
end
-- Measure and display how long it took to load
local deltaTime = workspace.DistributedGameTime - startTime
print(("Image loaded in %.3f seconds"):format(deltaTime))ResampleMode
ScaleType
SliceCenter
SliceScale
TileSize
Code Samples
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, 0.02 do
imageLabel.Size =
UDim2.new(0, 100 + math.cos(theta * 2 * math.pi) * 50, 0, 100 + math.sin(theta * 2 * math.pi) * 50)
task.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