How to tween when GUI is affected by UIGridLayout

Help and Feedback Scripting Support
#1

I have a frame that consists of a bunch of buttons. I have used UIGridLayout and UIPaddings to adjust them to my likings. I wanted to make it so that each button is slightly larger when hovered on but it did not work. I figured that it must be the UIGridLayout that’s making this impossible. Is there any way I can tweenposition/tweensize while having my GUI size and position controlled by UIGridLayout?

3 Likes
#2

I believe you can use a UISizeConstraint to override the Size set by a UIGridConstraint for a individual element. If you put one inside the GUI object you want to affect, and then tween the MaxSize, and MinSize values of that UISizeConstraint, you should be able to temporarily tween the element’s Size outside the control of your UIGridLayout’s CellSize.

1 Like
#3

I did something similar to this:

for i,v in pairs(script.Parent:GetChildren()) do
	if v:IsA("Frame") and v.Name == "GameContainer" then
		v.MouseEnter:Connect(function()
			v.UISizeConstraint.MinSize = Vector2.new(135, 125)
			v.UISizeConstraint.MaxSize = Vector2.new(135, 125)
		end)
		v.MouseLeave:Connect(function()
			v.UISizeConstraint.MaxSize = Vector2.new(130, 120)
			v.UISizeConstraint.MinSize = Vector2.new(130, 120)
		end)
	end
end

This is without the tweening effect but it still doesn’t seem to work properly. It glitches all across the frame and everything shifts everywhere. am I using this wrong?

(No errors + theres a UISizeConstraint in each button which is a frame)

#4

I Don’t think you should have a UISizeConstraint inside of every frame. I would create one every time it is needed, and :Destroy() it on .MouseLeave. This way you can let the UISizeConstraint do its job, with the one exception of the hover effect.

Also, could I get a visual of what is happening so I can see what exactly is going on?

#5

The shifting problem seems to have fixed itself somehow but this is the current issue I have (with the code above)

https://gyazo.com/c32370ee99cbb42216b479646f05f356

And, I will try the :Destroy method

1 Like
#6

Make sure to also Instance.new() the UISizeConstraints, as well as :Destroy() them. The whole point is not to have a constraint hanging around on every element at all times.

Nice family guy by the way.

#7

OK so I did what you suggested and thanks Peter looking kinda hot today.
Here is what I’ve got:

for i,v in pairs(script.Parent:GetChildren()) do
	if v:IsA("Frame") and v.Name == "GameContainer" then
		v.MouseEnter:Connect(function()
			local UISizeConstraint = Instance.new("UISizeConstraint", v)
			UISizeConstraint.MinSize = Vector2.new(135, 125)
			UISizeConstraint.MaxSize = Vector2.new(140, 130)
		end)
		v.MouseLeave:Connect(function()
			v.UISizeConstraint:Remove()
		end)
	end
end

And here’s the mess it has produced:
https://gyazo.com/456f383ab2f637ef31e2937edbae739d

Oh and the shifting thing is now visible again:
https://gyazo.com/0baecd05bf261ead765e27345317e7e2

#8

I’m honestly not sure what could be the issue.

I might try forgetting the UISizeConstraint, and creating a holder frame, with the actual content inside. By creating an invisible frame, and then another frame inside, who’s size can be changed freely around the holder frame. This way, you could easily manipulate the individual sizes, relative to the holder frame size, even though the holder frame size is locked by the UIGridLayout. Tell me if this doesn’t make sense.

You could also try using three UIListLayout’s, to make three columns. UIListLayout does not affect the size of elements. However, this might shift the positions of all of the other elements in the column.

3 Likes