So I have a script that is suppose to use tween service to make a button bigger and return it to its og size once the mouse goes on/off of the button.
Problem is that it is just straight up shrinking.
local tweenS = game:GetService('TweenService')
-- scale buttons stuff
-- tween buttons
local buttons = game:GetService('CollectionService'):GetTagged('MenuButton')
local tweenService = game:GetService('TweenService')
local tweenService = game:GetService("TweenService")
for _, btn in pairs(buttons) do
if btn:IsA('GuiButton') then
local buttonSizeX = btn.Size.X.Scale
local buttonSizeY = btn.Size.Y.Scale
btn.MouseEnter:Connect(function()
local newSizeX = (buttonSizeX + 0.05) --// 0.05 can be adjusted to what you think looks better
local newSizeY = (buttonSizeY + 0.05) --// 0.05 can be adjusted to what you think looks better
local info = TweenInfo.new(0.5, Enum.EasingStyle.Linear --[[Change this to your preferred EasingStyle]], Enum.EasingDirection.Out)
tweenService:Create(btn, info, {Size = UDim2.new(newSizeX, 0, newSizeY, 0)}):Play()
end)
btn.MouseLeave:Connect(function()
local info = TweenInfo.new(0.5, Enum.EasingStyle.Linear --[[Change this to your preferred EasingStyle]], Enum.EasingDirection.Out)
tweenService:Create(btn, info, {Size = UDim2.new(buttonSizeX, 0, buttonSizeY, 0)}):Play()
end)
end
end
Did you make sure your original button is actually set with scale values and not the default offset values?
Edit: Just noticed your image above, you have a mix of scale and offset in your Size property. Remove the offset values and change the scale to what you want and it should work.
Instead of using the Scale property of the UDim2 you should use Offset
local tweenService = game:GetService('TweenService')
local buttons = game:GetService('CollectionService'):GetTagged('MenuButton')
for _, btn in pairs(buttons) do
if btn:IsA('GuiButton') then
local buttonSizeX = btn.Size.X.Offset
local buttonSizeY = btn.Size.Y.Offset
btn.MouseEnter:Connect(function()
local newSizeX = buttonSizeX + 10 --// 10 can be adjusted to what you think looks better
local newSizeY = buttonSizeY + 10 --// 10 can be adjusted to what you think looks better
local info = TweenInfo.new(0.5, Enum.EasingStyle.Linear --[[Change this to your preferred EasingStyle]], Enum.EasingDirection.Out)
tweenService:Create(btn, info, {Size = UDim2.new(0, newSizeX, 0, newSizeY)}):Play()
end)
btn.MouseLeave:Connect(function()
local info = TweenInfo.new(0.5, Enum.EasingStyle.Linear --[[Change this to your preferred EasingStyle]], Enum.EasingDirection.Out)
tweenService:Create(btn, info, {Size = UDim2.new(0, buttonSizeX, 0, buttonSizeY)}):Play()
end)
end
end
Good point. I usually don’t create things for differently displays thanks for the tip.
To fix his issue you could do
local tweenService = game:GetService('TweenService')
local buttons = game:GetService('CollectionService'):GetTagged('MenuButton')
for _, btn in pairs(buttons) do
if btn:IsA('GuiButton') then
local buttonSizeX = btn.Size.X.Scale
local buttonSizeY = btn.Size.Y.Scale
btn.MouseEnter:Connect(function()
local info = TweenInfo.new(0.5, Enum.EasingStyle.Linear, Enum.EasingDirection.Out)
tweenService:Create(btn, info, {Size = UDim2.new(buttonSizeX + 0.05, 0, buttonSizeY + 0.05, 0)}):Play()
end)
btn.MouseLeave:Connect(function()
local info = TweenInfo.new(0.5, Enum.EasingStyle.Linear, Enum.EasingDirection.Out)
tweenService:Create(btn, info, {Size = UDim2.new(buttonSizeX, 0, buttonSizeY, 0)}):Play()
end)
end
end
UDim2.new(buttonSizeX, buttonSizeY, 0, 0) . When adding 0.05 like earlier to the X and Y it scales to enlarge the button. The overall size is also shifted by 0.05 causing it to shrink instead of grow.
Using UDim2.new(buttonSizeX + 0.05, 0, buttonSizeY + 0.05, 0) , which adds 0.05 to the X and Y scales while also leaving the offset at 0. So it will grow and keep it centered instead of shrinking like before.
Building on this your explorer image show size as {0.04, 250},{0.04, 250}, if we wanted to match that with a script it would be UDim2.new(0.04, 250, 0.04, 250). To keep the offset you could change your tweens like so, using 250 instead of 0 for the offset, though it would be better to create variables for the original size like you did with buttonSizeX/Y
You might have to use a boolean value inside each button (i.e. as a debounce). Set it it to true on MouseEnter and set it to false on MouseLeave, i.e.
btn.MouseEnter:Connect(function()
if btn.Debounce.Value == true then return end -- the logic thinks we are already on the button
btn.Debounce.Value = true
...
btn.MouseLeave:Connect(function()
if btn.Debounce.Value == false then
print ("Unpaired debounce detected!!"); return end -- logic insists that the mouse has already left this button, no need to continue with sizing
btn.Debounce.Value = false;
...
It will help separate human logic from processor computation speed. The human consciousness cannot contemplate calculating decisions over a ms timescale. However, the code can, and will do so forever. Most errors are introduced because machine computation time is way faster than human logic. This hinders our ability to understand the actual timeline and order of events occurring. That is why simple methods like debouncing have been introduced, to prevent the machine doing stuff faster than what we want it to do.
Adding debounce for MouseEnter and MouseLeave isn’t necessary. You only need that when doing things like Touch handlers for parts and such. Simply copying the code and putting it in a simple Baseplate project will show this to you.
The OP is just having a bit of trouble getting the solution. It was solved long ago, they just need to go in their explorer and set their buttons sizes so that they don’t include OFFSET values but just have SCALE values.
I understand what Debouncing is, but this is not a case in which it is required. Tweens override each other, so there should be no need to have a delay for a system like this.
Case-in-point. Tweens override one another (if you so choose, and you must choose wisely based upon the logic of your function). To cancel or not to cancel? that is the question.
Whichever you choose, it means that they can cancel/or not at any point. So a shrink gets cancelled by a grow, just as the grow can be cancelled by a shrink. This means that control over the start and end point of the growing and shrinking are now in the processors hands. Force the processor, and the Tweens, to always complete a round of shrink/grow entirely governed by your logic. Then you can guarantee that you are not growing, or shrinking, halfway between a shrink or a grow, and you can predict the current size always (i.e. a baseline that can be tested against, and never crossed!).
