How do i fix GUI's that are at the wrong position when in-game?

Hello everyone, i got that one weird bug in my game…

When i am in the editor, these ImageButtons are at the correct position:
image

But when i join the game, then…
image
That one ImageButton is at the wrong position?!

My script is very short, so easy to read:

local frame = script.Parent.Frame -- The frame that opens when the button is pressed
local button = script.Parent.ImageButton -- The button which has the wrong position

local isOpen = false

button.MouseButton1Down:Connect(function()
	if isOpen == false then
		frame.Visible = true
		isOpen = true
		
	elseif isOpen == true then
		frame.Visible = false
		isOpen = false
	end
end)

I tried many things, but nothing worked, i hope one of you guys help me! :smile:

1 Like

It could be not a problem with the code, but a problem with the GUI itself. Make sure when resizing them, each of the Size values are less than 1. An easy way to do this could be setting the Size property to {1, 0}{1, 0} and resizing them from there. Having each value less than 1 will keep it to the same scale on different screens.

1 Like

Might need to Anchor the position with AnchorPoint.

Idea

Have the buttons all in one frame, with a UIGridLayout in it. Change setting settings on GridLayout to change spacing/position and size for all buttons.

So then just position the one frame on Scale(not offset) and lock the position with AnchorPoint.

AnchorPoint Locks that’s frame position no matter what screen size you use.

Knowing: AnchorPoint 1,1 = Bottom Right | AnchorPoint 0,0 = Top Left | AnchorPoint .5,.5 = Middle
Note: When using AnchorPoint, you will need to change the frames position to go along with it.
Example: Middle AnchorPoint, Frame Position = .5,0,.5,0
Example2: Bottom Right AnchorPoint, Frame Position = 1,0,1,0