Engine

ScreenGui

Show Deprecated

The main storage object for 2D GuiObjects displayed on the user's screen. A ScreenGui only shows if parented to a player's PlayerGui; parenting a ScreenGui to StarterGui ensures it clones into each player's PlayerGui when they join the experience.

For performance improvements, the appearance of a ScreenGui is cached until one of the following events occurs:

  • A descendant is added to or removed from it.
  • A property of a descendant changes.
  • A property of the ScreenGui itself changes.

If any of these events occur, the ScreenGui appearance is recomputed on the next frame it gets rendered.

Summary

Properties

Properties inherited from LayerCollectorProperties inherited from GuiBase2d

Events

Events inherited from GuiBase2d

Properties

ClipToDeviceSafeArea

read parallel

If this property is true, all GuiObject descendants of this ScreenGui will be clipped to the device's safe area (see Enum.ScreenInsets). The default is true to maintain backwards compatibility of UI that is intentionally hidden offscreen, such as objects that slide into view from a screen edge when they're needed.

Mobile device showing UI button clipped by device safe
area
When set to true, UI objects are clipped by the device's safe area

If this property is false, GuiObject descendants will not be clipped to the device's safe area and may be obscured by the camera notch or other screen cutouts.

Mobile device showing UI button overflowing device safe
area, obscured by screen camera notch
When set to false, UI objects may overflow the safe area and become obscured

Note that this property will be ignored if you set ScreenGui.ScreenInsets to None, as doing so implies that you intentionally want to disregard the device's safe insets.

DisplayOrder

read parallel

This property controls the Z-index order in which multiple ScreenGuis are drawn. ScreenGuis with a higher DisplayOrder will be drawn on top of those with a lower value.

IgnoreGuiInset

read parallel

If this property is false (default), ScreenInsets is set to CoreUISafeInsets, effectively keeping its bounds below the Roblox top bar core UI.

If this property is changed to true and ScreenInsets is currently set to CoreUISafeInsets, ScreenInsets will be set to DeviceSafeInsets.

See ScreenInsets for details on how screen insets affect the contents of a ScreenGui.

SafeAreaCompatibility

read parallel

This property specifies whether automatic UI compatibility transformations are applied to descendant "fullscreen" GuiObjects of this ScreenGui on displays with screen cutouts. Eligibility occurs if the total area of the descendant GuiObject (including any applied border or UIStroke) covers the device's safe area both horizontally and vertically. See the Enum.SafeAreaCompatibility enum reference for details.

The default value is FullscreenExtension in order to automatically improve the appearance of UI that was authored for screens without any cutouts. However, it's recommended that you avoid fullscreen extensions for new work; instead, use the ScreenInsets property to specify which insets should be respected for different ScreenGuis.

Note that descendant UI objects will continue to be clipped by the device's safe area if ClipToDeviceSafeArea is set to true.

ScreenInsets

not browsable
read parallel

This property controls the safe area insets that are applied to the contents of this ScreenGui. The default of CoreUISafeInsets keeps all descendant GuiObjects inside the core UI safe area, clear of the Roblox top bar buttons and other screen cutouts like the device's camera notch. This setting is recommended for any ScreenGui containing interactive and/or important UI elements such as buttons and status messages.

Mobile device showing UI buttons inside core UI safe area

If you set this property to None, UI objects may be obscured behind core UI objects or device cutouts like the camera notch. As such, you should only use None for a ScreenGui that contains noninteractive content like background images.

If you set this property to TopbarSafeInsets, all descendant GuiObjects will be kept between the Roblox left-most controls and the edge of the device safe area. This ScreenGui will then automatically adjust its size and position based on control visibility/size to avoid UI collisions.

Mobile device showing the location of top bar safe area with minimal Roblox UI controls

Mobile device showing the location of top bar safe area responding dynamically to expanded Roblox UI controls

Methods

Events