Hello there,
I’m having an issue with making this UI square-shaped…
This is how they’re supposed to look like.
This is in-game
Why is this happening? I’ve set both of them to scale. Using an AspectRatio Constrait breaks my tweeting.
Thanks,
Aki
2 Likes
What are you tweening? If you are tweening the size, try using UIScale to change the size of the button.
1 Like
Use XXrelative scaling? Put smth like 0.05,0,0.05,0 and they should scale only according to the x.
1 Like
I’m tweening both it’s size and position. Though, UIScale? I never heard of it, will check out! Thanks :]
1 Like
As I’ve said, I’ve set everything to scale.
You might question why they’re not the same value. That’s because if I set them the same value, it just becomes a small rectangle instead.
I said put size constraint to relativeXX?
Try to set both of them (X and Y) to the scale of X (0.032) and set SizeConstraint to RelativeXX
Oh my bad! I’m sorry I missread it. I could try. Let me see what it does.
(@keremMCT aswell since you both suggested it)
I’ve tried it. It works! Except the tweening…
(sorry for the poor quality! :[)
can you show me the line of tweening?
Sure of course!
for _, Button in pairs(CollectionService:GetTagged("WindowButton")) do
local debounce = false
local WindowOfChoice = Button:GetAttribute("Window")
local XPos = Button.Position.X
local YPos = Button.Position.Y
local hover = {}
hover.Size = UDim2.new(0.207, 0,0.062, 0)
hover.Position = UDim2.new(0.115,0,YPos.Scale, 0)
local leave = {}
leave.Size = UDim2.new(0.032, 0,0.071, 0)
leave.Position = UDim2.new(XPos.Scale,0,YPos.Scale,0)
local click = {}
click.Size = UDim2.new(0.03, 0, 0.064, 0)
click.Position = UDim2.new(XPos.Scale,0,YPos.Scale,0)
local fadeOutIMG = {}
fadeOutIMG.ImageTransparency = 1
local fadeInTXT = {}
fadeInTXT.TextTransparency = 0.1
local fadeInIMG = {}
fadeInIMG.ImageTransparency = 0.1
local fadeOutTXT = {}
fadeOutTXT.TextTransparency = 1
local tweenInfo2 = TweenInfo.new(
0.2,
Enum.EasingStyle.Circular,
Enum.EasingDirection.InOut
)
local entered = TweenService:Create(Button, tweenInfo2, hover)
local left = TweenService:Create(Button, tweenInfo2, leave)
local pressed = TweenService:Create(Button, tweenInfo2, click)
local FadeOutIMG = TweenService:Create(Button, tweenInfo2, fadeOutIMG)
local FadeInIMG = TweenService:Create(Button, tweenInfo2, fadeInIMG)
local FadeOutTXT = TweenService:Create(Button.Text, tweenInfo2, fadeOutTXT)
local FadeInTXT = TweenService:Create(Button.Text, tweenInfo2, fadeInTXT)
Button.MouseEnter:Connect(function()
workspace.Sound.UI.hover:Play()
--Button.Text.Visible = true
entered:Play()
FadeOutIMG:Play()
FadeInTXT:Play()
end)
Button.MouseLeave:Connect(function()
left:Play()
FadeInIMG:Play()
FadeOutTXT:Play()
end)
Button.MouseButton1Down:Connect(function()
workspace.Sound.UI.click:Play()
FadeOutTXT:Play()
FadeInIMG:Play()
pressed:Play()
if debounce == false then
if WindowManager.WindowInstance(WindowOfChoice).Visible == true then
debounce = true
GlobalUI.DeactivateButton(Button)
WindowManager.CloseWindow(WindowOfChoice)
debounce = false
else
debounce = true
GlobalUI.ActivateButton(Button)
WindowManager.OpenWindow(WindowOfChoice)
debounce = false
end
end
end)
Button.MouseButton1Up:Connect(function()
left:Play()
FadeInIMG:Play()
FadeOutTXT:Play()
end)
end
(This is in a CollectionService if the context is weird.)
Now that I think of it, I may have to change some values from the tweening. I’m going to try something in the meantime
Edit: Nevermind, I tried changing some values that compliment the new scale, to no avail. It keeps the Constraint’s aspect ratio. I’m assuming that somehow I need to disable the Aspect Ratio while it tweens then enable it again when it stops tweening.
I hope your solution makes it work as expected!
1 Like
Thanks! The thing is I’m not sure how I’m going to make it work…
However, at least I figured out what I can use to keep the same scaling throughout every resolution. Thanks! 
The promblem is you are using a scale, you need to use offset
Size: {0, 32}, {0, 32}