Tweening a Perfect Square

Help and Feedback Scripting Support
1

I’m using this script:

local TweenService = game:GetService("TweenService")

local YSize = script.Parent.AbsoluteSize.Y
local ButtonOGSize

for _, button in pairs(script.Parent:GetChildren()) do
	if button:IsA("GuiButton") then
		ButtonOGSize = button.AbsoluteSize
		
		button.ImageLabel.Size = UDim2.fromOffset(YSize*0.65,YSize*0.65)
		button.Size = UDim2.fromOffset(YSize, YSize)
		button.ImageLabel.Position = UDim2.fromScale(0.5,0.5)
		
		local inside = false
		
		button.MouseEnter:Connect(function()
			inside = true
			button.TextLabel.Visible = true
			TweenService:Create(button, TweenInfo.new(0.15), {Size = UDim2.fromOffset(ButtonOGSize.X, ButtonOGSize.Y)}):Play()
			TweenService:Create(button.ImageLabel, TweenInfo.new(0.15), {Position = UDim2.fromScale(0.175, 0.5)}):Play()
		end)
		
		button.MouseLeave:Connect(function()
			inside = false
			button.TextLabel.Visible = false
			TweenService:Create(button, TweenInfo.new(0.15), {Size = UDim2.fromOffset(YSize, YSize)}):Play()
			TweenService:Create(button.ImageLabel, TweenInfo.new(0.15), {Position = UDim2.fromScale(0.5, 0.5)}):Play()
		end)
	end
end

to create this effect:


(which as you can see, makes the button sizing inconsisteent when the resolution is changed since I’m using offset instead of scale with UIAspectRatioConstraint so it’s tweenable.)

How can I fix this?

1 Like
2

Put all the buttons inside one frame.

2 Likes
3

What do you mean? How would these make a perfect square? I need to tween the size.

4

add UIAspectRatioConstraint to each button and let it enforce a 1:1 ratio
and then you can tween any Size offset or scale and the constraint will keep it square,

-- inside loop after creating 'button'
local UIAspectRatioConstraint = Instance.new("UIAspectRatioConstraint", button)
UIAspectRatioConstraint.AspectRatio = 1
UIAspectRatioConstraint.DominantAxis = Enum.DominantAxis.Width

UIAspectRatioConstraint child makes width and height stay equal (1:1) no matter what you tween
and you can still use TweenService:Create(button, ..., { Size = UDim2.fromOffset(...) })
or fromScale to animate the square smoothly.

5

As I said in the original post, I am aware of UIAspectRatioConstraints, but they are unable to be tweened from a non perfect square to a perfect square.

6

You should consider making Anchor point 0.5,0.5 becouse it will make UI center to be well…In the center and not top left.
As person above noted using Aspect ratio is probably the best option as since it will adjust size to be with specific ratio.
1 to be 1:1;
1.77777777777777 to be 16:9
You can hardcode it without aspect ratio by using ViewportSize but…Why?