Position
This property determines a GuiObject|GUI's
pixel and scalar size using a UDim2
. Its value can be expressed as UDim2.new(ScalarX, PixelX, ScalarY, PixelY)
or ({ScalarX, PixelX}, {ScalarY, PixelY})
. Position is centered around a GUI’s GuiObject/AnchorPoint
.
An element’s position can also be set by modifying both its scalar and pixel positions at the same time. For instance, tits position can be set to ({0.25, 100}, {0.25, 100})
.
The scalar size is relative to the scalar size of parent GUI elements, if any. For example, if AnchorPoint is set to {0, 0}{0, 0}
and Position is set to {0, 0}, {0, 0}
, the element will render at the top left corner of the parent element. Similarly, if AnchorPoint is set to {0, 0}{0, 0}
and Position is set to {0.5, 0}, {0.5, 0}
, the top left corner of the element will render at the center of the parent element.
The pixel portions of the UDim2
value are the same regardless of the parent GUI’s size. The values represent the position of the object in pixels. For example, if set to {0, 100}, {0, 150}
the element’s AnchorPoint will render with on the screen 100 pixels from the left and 150 pixels from the top.
An object’s actual pixel position can be read from the GuiBase2d/AbsolutePosition
property.
Code Samples
Frame Moving in Circle
This code sample moves a GuiObject in a circle within its parent object using RunService’s BindToRenderStep. It defines a parametric equation in a function to help with positioning the GuiObject.
To try this code out, put a ScreenGui in the StarterGui. Inside the ScreenGui, insert a Frame with a LocalScript. Paste this code into the LocalScript, then play the game. Watch the Frame travel counterclockwise within.
local RunService = game:GetService("RunService") -- How fast the frame ought to move local SPEED = 2 local frame = script.Parent frame.AnchorPoint = Vector2.new(.5, .5) -- A simple parametric equation of a circle -- centered at (0.5, 0.5) with radius (0.5) local function circle(t) return .5 + math.cos(t) * .5, .5 + math.sin(t) * .5 end -- Keep track of the current time local currentTime = 0 local function onRenderStep(deltaTime) -- Update the current time currentTime = currentTime + deltaTime * SPEED -- ...and our frame's position local x, y = circle(currentTime) frame.Position = UDim2.new(x, 0, y, 0) end -- This is just a visual effect, so use the "Last" priority RunService:BindToRenderStep("FrameCircle", Enum.RenderPriority.Last.Value, onRenderStep) --RunService.RenderStepped:Connect(onRenderStep) -- Also works, but not recommended
AnchorPoint Demo
This code sample moves a UI element to different sides of the parent element. It starts at the top-left and ends at the bottom-right. Paste into a LocalScript in a Frame, within a ScreenGui.
local guiObject = script.Parent while true do -- Top-left guiObject.AnchorPoint = Vector2.new(0, 0) guiObject.Position = UDim2.new(0, 0, 0, 0) wait(1) -- Top guiObject.AnchorPoint = Vector2.new(0.5, 0) guiObject.Position = UDim2.new(0.5, 0, 0, 0) wait(1) -- Top-right guiObject.AnchorPoint = Vector2.new(1, 0) guiObject.Position = UDim2.new(1, 0, 0, 0) wait(1) -- Left guiObject.AnchorPoint = Vector2.new(0, 0.5) guiObject.Position = UDim2.new(0, 0, 0.5, 0) wait(1) -- Dead center guiObject.AnchorPoint = Vector2.new(0.5, 0.5) guiObject.Position = UDim2.new(0.5, 0, 0.5, 0) wait(1) -- Right guiObject.AnchorPoint = Vector2.new(1, 0.5) guiObject.Position = UDim2.new(1, 0, 0.5, 0) wait(1) -- Bottom-left guiObject.AnchorPoint = Vector2.new(0, 1) guiObject.Position = UDim2.new(0, 0, 1, 0) wait(1) -- Bottom guiObject.AnchorPoint = Vector2.new(0.5, 1) guiObject.Position = UDim2.new(0.5, 0, 1, 0) wait(1) -- Bottom-right guiObject.AnchorPoint = Vector2.new(1, 1) guiObject.Position = UDim2.new(1, 0, 1, 0) wait(1) end