I am sure many people eagerly want to make a ripple button click animation for their roblox games.
Something like this:
But most do not know how they can do this. Some who do end up making this are stopped by a baracade called C O R N E R S. A ripple effect will never work in such corners. And for that reason I have created an extremely basic module which allows you to fix the issue and provide pretty cool ripple effects!
Here is what the module can do:
See how it neatly covers the corners?
Any who, I don’t have the energy to make this “exciting” soo…
If you wonder how to use this then it’s extremely simple.
local RippleModule = require(game:FindFirstChild("RippleModule",true)
local Button = -- path to your button
RippleModule.AssignClickEvent(Button)
RippleModule.Ripple(Button,Vector2.new(50,50)) -- Used to make automatic ripples.
Source Code
local TweenService = game:GetService("TweenService")
local ContentProvider = game:GetService("ContentProvider")
local UserInputService = game:GetService("UserInputService")
local inset = game:GetService("GuiService"):GetGuiInset()
if inset.Y == 0 then
inset = Vector2.new(0,35)
end
ContentProvider:PreloadAsync({"rbxassetid://119914075615892"})
local RippleExpandTweenInfo = TweenInfo.new(0.5,Enum.EasingStyle.Cubic,Enum.EasingDirection.Out)
local function Ripple(Parent:GuiObject,Position:Vector2)
local parentGui = nil
local corner = Parent:FindFirstChildOfClass("UICorner")
for _,v in game.Players.LocalPlayer.PlayerGui:GetChildren() do
if Parent:IsDescendantOf(v) then
parentGui = v
break
end
end
if not parentGui then return end
local AbsSize,AbsPos = Parent.AbsoluteSize,Parent.AbsolutePosition
local ripplePosition = ((Position-AbsPos)-inset)
local canvasGroup = Instance.new("CanvasGroup")
canvasGroup.Name = "Ripple"
canvasGroup.Parent = parentGui
canvasGroup.Size = UDim2.fromOffset(AbsSize.X,AbsSize.Y)
canvasGroup.Position = UDim2.fromOffset(AbsPos.X,AbsPos.Y)
canvasGroup.BackgroundTransparency = 1
canvasGroup.ZIndex = 9999999
if corner then
corner:Clone().Parent = canvasGroup
end
local ripple = Instance.new("ImageLabel")
ripple.Name = "RippleImage"
ripple.Parent = canvasGroup
ripple.Size = UDim2.fromScale(0,0)
ripple.BackgroundTransparency = 1
ripple.Image = "rbxassetid://119914075615892"
ripple.AnchorPoint = Vector2.one/2
ripple.ScaleType = Enum.ScaleType.Fit
ripple.ZIndex = 9999999
ripple.Position = UDim2.fromOffset(ripplePosition.X,ripplePosition.Y)
local size = math.max(AbsSize.X,AbsSize.Y)
TweenService:Create(ripple,RippleExpandTweenInfo,{ImageTransparency = 1,Size = UDim2.fromOffset(size,size)}):Play()
task.delay(0.5,function()
ripple:Destroy()
canvasGroup:Destroy()
end)
end
return {
AssignClickEvent = function(Frame:GuiObject)
Frame.InputBegan:Connect(function(input)
if input.UserInputType == Enum.UserInputType.MouseButton1 then
Ripple(Frame,UserInputService:GetMouseLocation())
end
end)
end,
MakeRipple = Ripple
}
Bye.
- Cool
- Not Cool
0 voters
beautiful 
