Button Ripple Effect Issue

Help and Feedback Scripting Support
,
#1

Hi guys, I am trying to make a ripple effect when I click a button, although it won’t work. Here is my code:

local Players = game:GetService("Players")
local TweenService = game:GetService("TweenService")
local Player = Players.LocalPlayer
local button = script.Parent

button.MouseButton1Down:Connect(function()
   local Mouse = Player:GetMouse()
   local x, y = Mouse.X, Mouse.Y
   local circle = game:GetService("ReplicatedFirst").Circle:Clone()

   circle.Parent = button
   button.BackgroundTransparency = 0
   circle:TweenPosition(UDim2.new(x,y))
end)

Here is what that code does:

If you know how to fix this, please leave a reply below. Thanks!

#2

I may be wrong, but I believe Udim2 value is…

Udim2.new(xScale, xOffSet, yScale, yOffSet)

I think that may be the problem, unless Roblox does accept the two values as is.

1 Like
#3

I replaced it with UDim2.new(0,x,0,y)) and this happens:

I just want the circle to go wherever my mouse is.

#4

It should be the other way around.

Udim2.new(x,0,y,0)
#5

Yep, or you can use Udim2.FromScale(x,y), which ignores the offset value.

#6

The circle doesn’t appear when I do that.

#7

It wouldnt get the exact mouse location since the circle is inside the button. The button acts as its own world, different from the mouse’s parent.

#8

I think the problem is that the fullscreen mouse coordinates are translated into the frame coordinates, thus appears differently.

1 Like
#9

So should we use Absolute Position instead? That would translate the same, from the Mouse and the Button.

#10

Maybe if you made a ghost frame for the button which takes up the entire screen, it could work.

#11

So where should I put the circle?

#12

I honestly have no idea what to add onto the script, all I could think of are stuff that would make the ui more complicated :joy:

We could try to find the area where the mouse clicked inside the button, or like what @JollyGameCrazy said.

#13

Well, I found this :

2 Likes
#14

So how would I change circle:TweenPosition(UDim2.new(0,x,0,y)) to use the code he used? (local RelativePosition = Vector2.new(Mouse.X,Mouse.Y)-Button.AbsolutePosition)

#15

I believe you’d just switch in RelativePosition :

UDim2.new(RelativePosition)
#16

#17

First of all don’t use scale but this time offset beacuse mouse is returning you position in offsets.
Then declare variables x and y ,and then use RunService to do the rest.
And i would recommend you checking if the circle isn’t nil.
And yes you should also use RunService for “tweening”

#19

That sounds quite complicated, do you know of any tutorials or code?

#20

no but you should read about RunService and RenderStepped

RunService | Roblox Creator Documentation --Renderstepped works only in a local script

#21

Alright, thank you.

(character limit)