ImageLabel
A 2D user interface element that displays a single non-interactive image.
Memory category | Gui |
---|
Member index 13
Description
An ImageLabel renders a rectangle, like a Frame does, with an image. The image must be a decal uploaded to the Roblox website. The display of the image can be manipulated through the ImageLabel.ImageColor3 and ImageLabel.ImageTransparency properties. To display only the image and hide the rectangle, set GuiObject.BackgroundTransparency to 1.
The image is scaled to fit the entirety of the rectangle, but remember that images look best when displayed at their native resolution. Before uploading your image asset, you may want to apply alpha bleeding and take a few more steps when building UI for high-DPI devices (like phones).
Advanced ImageLabel usage
- Spritesheets can be used with ImageLabel through the use of ImageLabel.ImageRectOffset and ImageLabel.ImageRectSize. Packing multiple images into one and using this property can make your game's image assets load much quicker, especially if you use many small icons in your GUIs.
- 9-slice images can be created by setting ImageLabel.ScaleType to ScaleType.Slice, then ImageLabel.SliceCenter to the center area of the 9-slice image.
- Tiled images can be created by setting ImageLabel.ScaleType to ScaleType.Tile, then ImageLabel.TileSize to be the size of rendered tiles.
History 61
- 573 Change ReturnType of SetEnableContentImageSizeChangedEvents from void to null
- 553 Change Default of TileSize from to UDim2({1, 0}, {1, 0})
- 553 Change Default of SliceScale from to 1
- 553 Change Default of SliceCenter from to Rect(0, 0, 0, 0)
- 553 Change Default of ScaleType from to Stretch
- 553 Change Default of ResampleMode from to Default
- 553 Change Default of IsLoaded from to false
- 553 Change Default of ImageTransparency from to 0
- 553 Change Default of ImageRectSize from to Vector2(0, 0)
- 553 Change Default of ImageRectOffset from to Vector2(0, 0)
- 553 Change Default of ImageColor3 from to Color3(1, 1, 1)
- 553 Change Default of from to Vector2(0, 0)
- 496 Add SetEnableContentImageSizeChangedEvents
- 496 Add
- 490 Add ResampleMode
- 486 Change ThreadSafety of TileSize from ReadOnly to ReadSafe
- 486 Change ThreadSafety of SliceScale from ReadOnly to ReadSafe
- 486 Change ThreadSafety of SliceCenter from ReadOnly to ReadSafe
- 486 Change ThreadSafety of ScaleType from ReadOnly to ReadSafe
- 486 Change ThreadSafety of IsLoaded from ReadOnly to ReadSafe
- 486 Change ThreadSafety of ImageTransparency from ReadOnly to ReadSafe
- 486 Change ThreadSafety of ImageRectSize from ReadOnly to ReadSafe
- 486 Change ThreadSafety of ImageRectOffset from ReadOnly to ReadSafe
- 486 Change ThreadSafety of ImageColor3 from ReadOnly to ReadSafe
- 486 Change ThreadSafety of Image from ReadOnly to ReadSafe
- 462 Change ThreadSafety of TileSize from to ReadOnly
- 462 Change ThreadSafety of SliceScale from to ReadOnly
- 462 Change ThreadSafety of SliceCenter from to ReadOnly
- 462 Change ThreadSafety of ScaleType from to ReadOnly
- 462 Change ThreadSafety of IsLoaded from to ReadOnly
- 462 Change ThreadSafety of ImageTransparency from to ReadOnly
- 462 Change ThreadSafety of ImageRectSize from to ReadOnly
- 462 Change ThreadSafety of ImageRectOffset from to ReadOnly
- 462 Change ThreadSafety of ImageColor3 from to ReadOnly
- 462 Change ThreadSafety of Image from to ReadOnly
- 368 Change WriteSecurity of SliceScale from RobloxScriptSecurity to None
- 368 Change Tags of SliceScale from [Hidden, NotReplicated] to []
- 368 Change CanLoad of SliceScale from false to true
- 368 Change CanSave of SliceScale from false to true
- 368 Change ReadSecurity of SliceScale from RobloxScriptSecurity to None
- 359 Change WriteSecurity of SliceScale from None to RobloxScriptSecurity
- 359 Change Tags of SliceScale from [] to [Hidden, NotReplicated]
- 359 Change ReadSecurity of SliceScale from None to RobloxScriptSecurity
- 359 Change CanSave of SliceScale from true to false
- 359 Change CanLoad of SliceScale from true to false
- 356 Add SliceScale
- 290 Add TileSize
- 290 Add IsLoaded
- 207 Add SliceCenter
- 207 Add ScaleType
- 202 Remove SliceCenter
- 202 Remove ScaleType
- 203 Add SliceCenter
- 203 Add ScaleType
- 163 Add ImageColor3
- 148 Add ImageTransparency
- 131 Add ImageRectSize
- 131 Add ImageRectOffset
- 55 Change Tags of ImageLabel from [preliminary] to []
- 47 Add Image
- 47 Add ImageLabel
Members 13
Image
Type | Default | |
---|---|---|
Content |
The Image property is a content-type property that should hold the asset ID of a Decal or Image on the Roblox website. It functions identically to Decal.Texture with regards to loading the image from the Roblox website. The rendered image will be colorized using ImageLabel.ImageColor3. It is possible to make the image render as tiled, scaled to fit, or 9-sliced, by adjusting the ImageLabel.ScaleType property.
Thread safety | ReadSafe |
---|---|
Category | Image |
Loaded/Saved | true |
ImageColor3
Type | Default | |
---|---|---|
Color3 | 1, 1, 1 |
The ImageColor3 property determines how an image is colorized. When set to white, no colorization occurs. This property is very useful for reusing image assets: If the source image is completely white with transparency, you can set the entire color of the image at once with this property.
Thread safety | ReadSafe |
---|---|
Category | Image |
Loaded/Saved | true |
History 4
- 553 Change Default of ImageColor3 from to Color3(1, 1, 1)
- 486 Change ThreadSafety of ImageColor3 from ReadOnly to ReadSafe
- 462 Change ThreadSafety of ImageColor3 from to ReadOnly
- 163 Add ImageColor3
ImageRectOffset
Type | Default | |
---|---|---|
Vector2 | 0, 0 |
Allows the partial display of an image in conjunction with ImageLabel.ImageRectSize. This property determines the pixel offset (from the top-left) of the image area to be displayed.
This property behaves identically to ImageButton.ImageRectSize.
Thread safety | ReadSafe |
---|---|
Category | Image |
Loaded/Saved | true |
History 4
- 553 Change Default of ImageRectOffset from to Vector2(0, 0)
- 486 Change ThreadSafety of ImageRectOffset from ReadOnly to ReadSafe
- 462 Change ThreadSafety of ImageRectOffset from to ReadOnly
- 131 Add ImageRectOffset
ImageRectSize
Type | Default | |
---|---|---|
Vector2 | 0, 0 |
Allows the partial display of an image in conjunction with ImageLabel.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 ImageButton.ImageRectOffset.
Thread safety | ReadSafe |
---|---|
Category | Image |
Loaded/Saved | true |
History 4
- 553 Change Default of ImageRectSize from to Vector2(0, 0)
- 486 Change ThreadSafety of ImageRectSize from ReadOnly to ReadSafe
- 462 Change ThreadSafety of ImageRectSize from to ReadOnly
- 131 Add ImageRectSize
ImageTransparency
Type | Default | |
---|---|---|
float | 0 |
ImageTransparency determines the alpha of a UI element's rendered image. A value of 0 is completely opaque, and a value of 1 is completely transparent (invisible). This property behaves similarly to GuiObject.BackgroundTransparency or BasePart.Transparency.
Thread safety | ReadSafe |
---|---|
Category | Image |
Loaded/Saved | true |
History 4
- 553 Change Default of ImageTransparency from to 0
- 486 Change ThreadSafety of ImageTransparency from ReadOnly to ReadSafe
- 462 Change ThreadSafety of ImageTransparency from to ReadOnly
- 148 Add ImageTransparency
IsLoaded
Type | Default | |
---|---|---|
bool | false |
The IsLoaded property indicates if the ImageLabel.Image property finished loading from the Roblox website. Images declined by moderation will never load.
Thread safety | ReadSafe |
---|---|
Category | Image |
Loaded/Saved | false |
ResampleMode
Type | Default | |
---|---|---|
ResamplerMode | Default |
Determines how the image looks when it is scaled.
By default, the image smooths out texture when displayed on the screen larger or smaller than its size in texture memory. When set to Enum.ResamplerMode.Pixelated, the image preserves the sharp edges of pixels.
Thread safety | ReadSafe |
---|---|
Category | Image |
Loaded/Saved | true |
History 2
- 553 Change Default of ResampleMode from to Default
- 490 Add ResampleMode
ScaleType
Type | Default | |
---|---|---|
ScaleType | Stretch |
The ScaleType property determines in what way an ImageLabel.Image is rendered when the UI element's absolute size differs from the source image's size.
By default, this property is Enum.ScaleType.Stretch, which will simply stretch/compact the image dimensions so it fits the UI element's space exactly. Since transparent pixels are set to black when uploading to the Roblox website, transparent images should apply alpha blending to avoid a blackish outline around scaled images.
For Enum.ScaleType.Slice, the ImageLabel.SliceCenter property will be revealed in the Properties window. This is for nine-slice UI: when scaling up, the corners will remain the source image size. The edges of the image will stretch to the width/height of the image. Finally, the center of the image will stretch to fill the center area of the image.
Finally, for Enum.ScaleType.Tile, the ImageLabel.TileSize property will be revealed in the Properties window. This is for tiled images, where the size of each image tile is determined by the ImageLabel.TileSize property.
Thread safety | ReadSafe |
---|---|
Category | Image |
Loaded/Saved | true |
SetEnableContentImageSizeChangedEvents
Parameters (1) | ||
---|---|---|
enabled | bool | |
Returns (1) | ||
null |
Security | RobloxScriptSecurity |
---|---|
Thread safety | Unsafe |
History 2
- 573 Change ReturnType of SetEnableContentImageSizeChangedEvents from void to null
- 496 Add SetEnableContentImageSizeChangedEvents
SliceCenter
Type | Default | |
---|---|---|
Rect | 0, 0, 0, 0 |
The SliceCenter property sets the slice boundaries of a 9-sliced image when ImageLabel.ScaleType is set to 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. 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.
Thread safety | ReadSafe |
---|---|
Category | Image |
Loaded/Saved | true |
History 6
- 553 Change Default of SliceCenter from to Rect(0, 0, 0, 0)
- 486 Change ThreadSafety of SliceCenter from ReadOnly to ReadSafe
- 462 Change ThreadSafety of SliceCenter from to ReadOnly
- 207 Add SliceCenter
- 202 Remove SliceCenter
- 203 Add SliceCenter
SliceScale
Type | Default | |
---|---|---|
float | 1 |
Scales the 9slice edges by the specified ratio. This means that the edges around the 9slice will grow as if you'd uploaded a new version of the texture upscaled. Defaults to 1.0.
As a multiplier for the borders of a 9slice, it is useful for reusing one rounded corner image for multiple radii.
![](https://prod.docsiteassets.roblox.com/assets/legacy/scaleImageExample.png)
See also:
- ImageLabel.ScaleType - Determines how an image will scale if displayed in a UI element whose size differs from the source image.
- ImageLabel.SliceCenter - Determines the center of a 9slice image.
- ImageLabel.SliceScale - The same property in terms of functionality but for ImageLabels.
Thread safety | ReadSafe |
---|---|
Category | Image |
Loaded/Saved | true |
History 14
- 553 Change Default of SliceScale from to 1
- 486 Change ThreadSafety of SliceScale from ReadOnly to ReadSafe
- 462 Change ThreadSafety of SliceScale from to ReadOnly
- 368 Change WriteSecurity of SliceScale from RobloxScriptSecurity to None
- 368 Change Tags of SliceScale from [Hidden, NotReplicated] to []
- 368 Change CanLoad of SliceScale from false to true
- 368 Change CanSave of SliceScale from false to true
- 368 Change ReadSecurity of SliceScale from RobloxScriptSecurity to None
- 359 Change WriteSecurity of SliceScale from None to RobloxScriptSecurity
- 359 Change Tags of SliceScale from [] to [Hidden, NotReplicated]
- 359 Change ReadSecurity of SliceScale from None to RobloxScriptSecurity
- 359 Change CanSave of SliceScale from true to false
- 359 Change CanLoad of SliceScale from true to false
- 356 Add SliceScale
TileSize
Type | Default | |
---|---|---|
UDim2 | {1, 0}, {1, 0} |
TileSize sets the tiling size of the ImageLabel. The default UDim2 values are 1,0,1,0. The scale component of the UDim2 will scale the tile based on the size of the ImageLabel. The offset is in raw pixels. The tiling starts at the upper left-hand corner of the image. For example a scale of 0.5 will mean the tile will be half the size of the ImageLabel (in the corresponding axis).
This property is only active if the ScaleType for the ImageLabel is set to Tile instead of Slice or Stretch.
Thread safety | ReadSafe |
---|---|
Category | Image |
Loaded/Saved | true |