PcoWSkbVqDnWTu_dm2ix
We use cookies on this site to enhance your user experience
Collapse Sidebar

Position

GuiObject

UDim2

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, its position can be set to ({0.25, 100}, {0.25, 100}).

The scalar position is relative to the size of the parent GUI element. For example, if AnchorPoint is set to 0, 0 and Position is set to {0, 0}, {0, 0}, the element’s top left corner renders at the top left corner of the parent element. Similarly, if AnchorPoint is set to 0, 0 and Position is set to {0.5, 0}, {0.5, 0}, the element’s top left corner will render at the direct 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


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

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