Positioning and Sizing UI Objects

When designing a user interface, you have complete control over how to position, size, and order GuiObjects on a user's screen. By customizing the following properties of a GuiObject, you can format your UI to create a positive user experience, and match the aesthetics of your experience:

• Position - Shifts objects to a new location on the screen.
• Size – Scales objects to a new proportion.
• AnchorPoint – Sets the object's origin point for positioning, as well as the direction the object's size scales from.
• ZIndex – Controls the order in which objects overlap on another.

Position

The Position property has two UDim2 coordinates that position a GuiObject on the X axis and the Y axis:

• Scale - A value from 0 to 1 that represents a fraction of the Roblox window size. This value keeps the object in the same proportional screen region even when the Studio window size changes.
• Offset - A value that represents the number of pixels to shift the object on the screen. You can use this value to position the object from the edge of the screen or other objects.

To view and edit the position of an object:

1. Go to the Properties window and click the dropdown arrow to the left of the Position property.

2. Expand the X and Y branches to see the Scale and Offset display for both axes.

   

Size

Similar to the Position property, the Size property has two UDim2 coordinates that size a GuiObject on the X axis and the Y axis through scale and offset.

• Scale - A value from 0 to 1 that represents a fraction of the Roblox window size. This value scales the object in the same proportional screen region even when the Studio window size changes.

• Offset - A value that represents the number of pixels the object takes up on the screen, additive to any scale value.

Using the Scale value for each axis, you can customize an object's size to be responsive to a user's screen size. For example, if a frame has a Size property value of {0.75, 0},{0.25, 0}, the frame scales to 75% of the screen horizontally and 25% vertically.

To view and edit the size of an object:

1. Go to the Properties window and click the dropdown arrow to the left of the Size property.

2. Expand the X and Y branches to see the Scale and Offset display for both axes.

   

AnchorPoint

The AnchorPoint property defines the origin point of a GuiObject, and the origin point determines the directions from where the object changes position and size. For example, the default AnchorPoint property values are (0, 0), meaning that the anchor point is in the top-left corner of the object. Whenever you change the position or size of the object, it moves and scales out from this point.

The AnchorPoint property is a fraction from 0 to 1, relative to the size of the object. For example, an object with AnchorPoint property values of (0.5, 0.5) shifts the anchor point to halfway (50%) through the object both horizontally and vertically, and any changes to its position or size both move and scale outward from this point.

Adjusting the AnchorPoint property makes it easier to correctly position an object in different sections of the screen without additional offset values.

To view and edit the anchor point of an object:

1. In the Explorer window, select a GuiObject.

2. In the Properties window, click the dropdown arrow to the left of the AnchorPoint property. The X and Y axes values display.

   

ZIndex

The ZIndex property defines the layer order in which GuiObjects render and overlap each other. If you want to create new rendering layers, you must set the ZIndex property to different positive or negative integer values for each object.

By default, objects render according to their raw ZIndex value; the higher the value, the closer an object renders to the top layer. You can change this render order by changing the value of the ScreenGui.ZIndexBehavior.

To edit the ZIndex of an object

1. In the Explorer window, select a GuiObject.
2. In the Properties window, enter a new value for the ZIndex property.

ZIndexBehavior

ScreenGui objects have a Enum.ZIndexBehavior that defines how descendent GuiObjects sort according to their ZIndex values. There are two possible Enum.ZIndexBehavior values:

• Global - The default behavior that sorts all descendant objects in a ScreenGui container by their raw ZIndex value. You should keep this behavior if you want to have full control over the rendering hierarchy, but you have to manually set a different ZIndex value for nearly every object.

• Sibling - Sorts all objects that have the same parent. If any objects have the same ZIndex value, they render on top of their parent, then you can manually set their ZIndex values if they are overlapping. You should use this behavior if you want to skip setting ZIndex values for every object.

  When two GuiObjects have the same parent and ZIndex, the object you most recently created renders on top of the other. If you want to render an object on top of other objects with the same ZIndex value, you can cut and re-paste it so it becomes the most recently created object.

To view and select another ZIndexBehavior value for a ScreenGui container: