How can I keep guis aligned?

Help and Feedback Scripting Support
#1

So I am making a resizable gui, the problem is though that any extra gui elements including the button itself seems to detach from the gui.

This is the main script:

local b = script.Parent.ResizableButton
local mouse = game.Players.LocalPlayer:GetMouse()
local Pressing = false

local RecordedLastX = nil
local RecordedLastY = nil

local NowPositionX = nil
local NowPositionY = nil

local Hovered = false

local Frame = script.Parent

b.InputBegan:connect(function(key)
	if key.UserInputType == Enum.UserInputType.MouseButton1 then
		Pressing = true
		RecordedLastX = mouse.X
		RecordedLastY = mouse.Y
		b.InputEnded:connect(function(key2)
			if key == key2 then
				Pressing =  false
			end
		end)
	end
end)

b.MouseEnter:connect(function()
	Hovered = true
	b.MouseLeave:connect(function()
		Hovered = false
		RecordedLastX = mouse.X
		RecordedLastY = mouse.Y
	end)
end)

mouse.Move:connect(function()
	if Pressing == true and Hovered == true then
		NowPositionX = mouse.x
		NowPositionY = mouse.y
	
		local ChangeX = NowPositionX - RecordedLastX
		local ChangeY = NowPositionY - RecordedLastY
		
		RecordedLastX = mouse.X
		RecordedLastY = mouse.Y
	
		Frame.Size = UDim2.new(0, Frame.Size.X.Offset + ChangeX, 0, Frame.Size.Y.Offset + ChangeY)
		b.Position = UDim2.new(0, b.Position.X.Offset + ChangeX, 0, b.Position.Y.Offset + ChangeY)
	end
end)

And this is the resize script:

local Min = 200
local Max = 1000
local Object = script.Parent

Object.Changed:connect(function()
	if Object.Size.X.Offset < Min and Object.Size.Y.Offset < Min then
		Object.Size = UDim2.new(0, Min, 0, Min)
	elseif Object.Size.X.Offset < Min then
		Object.Size = UDim2.new(0, Min, 0, Object.Size.Y.Offset)
	elseif Object.Size.Y.Offset < Min then
		Object.Size = UDim2.new(0, Object.Size.X.Offset, 0, Min)
	end
	if Object.Size.X.Offset > Max and Object.Size.Y.Offset > Max then
		Object.Size = UDim2.new(0, Max, 0, Max)
	elseif Object.Size.X.Offset > Max then
		Object.Size = UDim2.new(0, Max, 0, Object.Size.Y.Offset)
	elseif Object.Size.Y.Offset > Max then
		Object.Size = UDim2.new(0, Object.Size.X.Offset, 0, Max)
	end
end)

Is there a way I can modify this to make it so the guis stay together and stay in proportion?

#2

Just get the plugin man XD! Also use the first parameter instead of the second. Ex: (1, 0, 1, 0) instead of (0, 1, 0, 1)

#3

Have you tried UI Constraints? It helps a lot.

1 Like
#4

Always size UI by scale to keep them in proportion to the size of the screen, and use UIAspectRationConstraint to keep the length and height of the UI in proportion (X = xY). Example: A rectangle that always keeps it’s length to height ratio 2:1, so X = 2Y.

1 Like
#5

Use scale, and you can also use UiListLayout or UiGridLayout to keep things in order.

1 Like
#6

I have tried with scale but it won’t work which is why I used offset, and I don’t really want it to be constrained to a rectangle, thanks for your help though.

#7

I have used list and grid layouts but the guis aren’t in a particular order, they are scattered around the gui, thanks for your help though.

#8

Which plugin were you suggesting?

#9

Use the SortOrder property. Here’s an example of using the sort order property set to name.
image

#10

image

I think the biggest problem is that I need to try and use scale.

#11

UDim2 and use the scale property. The UI layout will keep it in order and packed as neatly as possible

1 Like
#12

Look it up on yt. Its a life SAVER!