Hello, everyone.
If I were to make the ui bigger when the mouse hovers over it, and smaller when the mouse moves away, how would I do that?
Sincerely,
-coolguyweir
1 Like
You can achieve that using: GuiObject | Roblox Creator Documentation and GuiObject | Roblox Creator Documentation
To resize the UI you just have to change the GuiObject | Roblox Creator Documentation property using a UDim2 | Roblox Creator Documentation
local Button = script.Parent
Button.MouseEnter:Connect(function()
-- make the UI bigger
end)
Button.MouseLeave:Connect(function()
-- make the UI smaller
end)
2 Likes
You’d first variable the button/text label you want and tween its size to the correct amount that you want and tween it like this basically:
local Button = script.parent -- or wherever your button is
Button:TweenSize(
UDim2.new( --Endsize (Required)),
Enum.EasingDirection.(--Your choice here),
Enum.EasingStyle.(--Your choice also here),
--Time
--Do you want your tween to override the other tweens when this is playing? (true or false)
-- If you have any function to call when the tween finishes then call it here but without the ()
How to maintain the object’s position:
Positioning with a GUI object’s AnchorPoint as (0.5 , 0.5) will mean that no matter what size it is, it’s center position will always be the same:
This means you can change the size of your GUI object, and the center position will stay the same.
Examples
Both of these have the same position of ({0, 150},{0, 200}) and the same AnchorPoint of (0.5 , 0.5). As you can see, their center-point position is exactly the same.
One image on top of the other:
Detecting mouse input:
To detect the mouse entering/leaving, you can use the MouseEnter and MouseLeave events from a GuiObject:
local button = YOUR BUTTON
-->> Detect mouse hovering over the button:
button.MouseEnter:Connect(function()
print("Mouse entered!")
end)
-->> Detect mouse moving off of the button:
button.MouseLeave:Connect(function()
print("Mouse left!")
end)
If you are unfamiliar with events, read more about them here.
Changing the size
Preferably, you should use TweenService for these practices. But a simpler solution for Gui objects, is TweenSize:
local button = YOUR BUTTON
button:TweenSize(UDim2.new(0, 50, 0, 50), Enum.EasingDirection.InOut, Enum.EasingStyle.Sine, 1)
Hey, you clouse use the MouseEnter and MouseLeave function and change the size with TweenService. But I like doing it with a UIScale.
You basically add a UIScale inside the Frame, Button, etc… and I recommend setting the AnchorPoint of Frame,… to 0.5,0.5
Then you can you something like this:
local TweenService = game:GetService("TweenService")
local Button = script.Parent -- button, etc... you want to scale
local UIScale = Button:WaitForChild("UIScale") --the UIScale inside the button, etc ...
script.Parent.MouseEnter:Connect(function()
TweenService:Create(UIScale, TweenInfo.new(.5), { Scale = 1.2 }):Play()
end)
script.Parent.MouseLeave:Connect(function()
TweenService:Create(UIScale, TweenInfo.new(.5), { Scale = 1 }):Play()
end)
--you can also do the same just with the Size of the frame
kk. I actually mostly knew the mouse hover part, but how do you scale the UI? With vector? With wut?
easing direction is the direction you want to scale it in
and easing style is the way you want it to scale? Like the movement of the scaling?
- What if the anchor point is different?
- yup I got the mouse part!
- why does udim2 need 4 parameters? what are each of the parameters?
- What is the one at the end of the tween size line? Is it the speed?
can you explain this perhaps? The other people said udim 2, and all the easing stuff, but here I see nothing similar.
Udim2 needs 4 parameters as both the scale(dependant on the current resolution) or the offset(each pixel, doesn’t take into account the current resolution) are needed.
o okie. Thanks for the explanation
ty for the link! I’ll check it out.
I’m not really sure about the first one, however: UDim2 goes like this: xScale, xOffset, yScale,yOffset, and your question number 4 in detail: GuiObject | Roblox Creator Documentation
(the last argument is time if you want to keep it simple)
By reading the API documentation pages i linked in my original post, you can find the answers to all of your questions.
kk. Thanks for the explanation!
Oh okay. I’ll go check it out right now.