Hey, I want to practice my UI skills and I just saw this game (SCR) that has nice buttons (see vid) so I want to reproduce the same buttons, I just don’t know how to script that. I want to learn how to do this for future projets.
I dind’t tryed to code it because I just don’t know how to code it…
(And if possible I would like to know how to do the clicking effect that you see in the video).
You will need to use GuiObject.MouseEnter and have another GuiObject, the “filler” and since you want it to fill from left to right, set the anchor to 0.5, 0, if you want right to left use 0.5, 1, after that connect the MouseEnter event to Tween Service which will grdaully fill up (increase size) the “filler”
Tween a frame’s size.
Min chars.
BTW, the anchor point thing isn’t a must, I just see it better in some cases.
Create A Frame Inside the Button
Customize it According to your Wish
Name The Frame "FillFrame"
Set the Size of the Frame to 0,0,1,0
Set the Position of the Frame to 0,0,0,0
Add A LocalScript Inside the Button
local Button = script.Parent
local FillFrame = Button.FillFrame
local TweenService=game:GetService("TweenService")
local TI=TweenInfo.new(.2,Enum.EasingStyle.Linear,Enum.EasingDirection.In,0,false,0)
Button.MouseEnter:Connect(function()
TweenService:Create(FillFrame,TI,{Size=UDim2.new(1,0,1,0)}):Play()
end)
--
Button.MouseLeave:Connect(function()
TweenService:Create(FillFrame,TI,{Size=UDim2.new(0,0,1,0)}):Play()
end)
You can use an upvalue and Cancel to prevent the tweens from overriding each other.
local Tween
Button.MouseEnter:Connect(function()
if Tween then Tween:Cancel() end
Tween = TweenService:Create(FillFrame,TI,{Size=UDim2.new(1,0,1,0)}):Play()
end)
--
Button.MouseLeave:Connect(function()
if Tween then Tween:Cancel() end
Tween = TweenService:Create(FillFrame,TI,{Size=UDim2.new(0,0,1,0)}):Play()
end)