Clicking Effect is Not Working

Hi there,

On Roblox Studio, I was trying to create a clicking effect whenever the cursor touched the screen. At first, I tried following a “similar” post from 2 years ago that said that I needed to use a Tween and get both position axes from the player’s mouse. While trying to produce the code and test it, nothing happens:

--[Services]--
local Players = game:GetService("Players")
local TweenService = game:GetService("TweenService")
local UserInputService = game:GetService("UserInputService")

--[Player Instances]--
local LocalPlayer = Players.LocalPlayer
local PlayerGui = LocalPlayer:WaitForChild("PlayerGui")

--[LocalPlayer Mouse]--
local Mouse = LocalPlayer:GetMouse()

--[Gui of the Clicking Effect for the Mouse]--
local ClickingEffect = PlayerGui:WaitForChild("ClickingEffect")
local ImageLabel = ClickingEffect:WaitForChild("ImageLabel")

-- Check if the ImageLabel exists
if ImageLabel then
	print("ImageLabel found.")

	-- Clone the GUI and set initial properties
	local GuiClone = ClickingEffect:Clone()
	
	if GuiClone then
		
		print("GuiClone found.")
		
	end
	
	GuiClone.Parent = PlayerGui
	GuiClone.Enabled = true
	GuiClone.ImageLabel.Position = UDim2.new(0, Mouse.X, 0, Mouse.Y)
	GuiClone.ImageLabel.Size = UDim2.new(0, 0, 0, 0) -- Start from (0, 0)

	-- Tween to increase the size of the ImageLabel
	local sizeGoal = { Size = UDim2.new(0, 240, 0, 240) }
	local sizeTweenInfo = TweenInfo.new(0.3, Enum.EasingStyle.Quad, Enum.EasingDirection.Out) -- Duration: 0.3 seconds
	local sizeTween = TweenService:Create(GuiClone.ImageLabel, sizeTweenInfo, sizeGoal)

	-- Tween to reverse the size back to (0,0) after expanding
	local reverseSizeGoal = { Size = UDim2.new(0, 0, 0, 0) }
	local reverseSizeTweenInfo = TweenInfo.new(0.15, Enum.EasingStyle.Quad, Enum.EasingDirection.In) -- Half the duration
	local reverseSizeTween = TweenService:Create(GuiClone.ImageLabel, reverseSizeTweenInfo, reverseSizeGoal)

	UserInputService.InputBegan:Connect(function(input: InputObject)

		if input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch then

			-- Play the initial tween, then reverse it on completion
			sizeTween:Play()
			sizeTween.Completed:Connect(function()
				reverseSizeTween:Play()
			end)

			-- Destroy the clone once the reverse tween is complete
			reverseSizeTween.Completed:Connect(function()
				GuiClone:Destroy()
			end)

		end

	end)

end

Can anyone help me out to see what’s the problem? Any reply is appreciated and I can respond to them

Thank you!

JSYK, the ImageLabel uses an aspect ratio as well as a AnchorPoint to be positioned and displayed properly to all devices. However, I’m not sure if this affects with the code…

hmm is it possible to show us the current result and maybe if possible a desired result?

The current result is basically not doing anything. It doesn’t show and no one can view it… As for the desire result, was this: https://www.roblox.com/share?code=d9bd5f87d92de14192d58a0025349e48&type=ExperienceDetails&stamp=1730350484589 (join the game and make sure to click while looking at the cursor effect)

try this

for _, button in something:GetDescendants() do
	if button:IsA("GuiButton") then
		local OgSize = button.Size

		local connection1 = button.MouseButton1Down:Connect(function()
			TweenService:Create(button, InfoIn, {Size = UDim2.new(OgSize.X.Scale * 1.06, 0, OgSize.Y.Scale * 1.06, 0)}):Play()
		end)

		local connection2 = button.MouseButton1Up:Connect(function()
			TweenService:Create(button, InfoOut, {Size = OgSize}):Play()
		end)

		button.Destroying:Once(function()
			connection1:Disconnect()
			connection2:Disconnect()

			connection1 = nil
			connection2 = nil
		end)
	end
end

I didn’t made it by the way, it was from a tutorial

The problem I see with this code is that you are not setting the GUIClones position each time the player clicks. You set the position to the players mouse when they first join but with each click it will stay in the original mouse position. You would need to set the GUIClones position inside of your UserInputService function.
Your code inside looks fine, if it still doesn’t work after changing the position I’d recommend adding a print statement after this line:

if input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch then

This would let you know if everything below is actually working.

Also instead of waiting for tweens to complete with a function like this:

sizeTween.Completed:Connect(function()
	reverseSizeTween:Play()
end)

You can wait for a tween to complete like this:

sizeTween.Completed:Wait()

The above line is much simpler and doesn’t create unnecessary functions. I hope this helps you find your solution. Let me know if you still are unable to solve your problem.

1 Like

I tried following your steps and it works. However, only a small issue is that whenever clicking, it seems that the ImageLabel doesn’t appear back because it’s nil… I suppose I would have to re-write the code, but not sure where:

--[Services]--
local Players = game:GetService("Players")
local TweenService = game:GetService("TweenService")
local UserInputService = game:GetService("UserInputService")

--[Player Instances]--
local LocalPlayer = Players.LocalPlayer
local PlayerGui = LocalPlayer:WaitForChild("PlayerGui")

--[LocalPlayer Mouse]--
local Mouse = LocalPlayer:GetMouse()

--[Gui of the Clicking Effect for the Mouse]--
local ClickingEffect = PlayerGui:WaitForChild("ClickingEffect")
local ImageLabel = ClickingEffect:WaitForChild("ImageLabel")

-- Check if the ImageLabel exists
if ImageLabel then
	print("ImageLabel found.")

	-- Clone the GUI and set initial properties
	local GuiClone = ClickingEffect:Clone()
	if GuiClone then
		print("GuiClone found.")
	end

	GuiClone.Parent = PlayerGui
	GuiClone.Enabled = true

	-- Tween to increase the size of the ImageLabel
	local sizeGoal = { Size = UDim2.new(0, 240, 0, 240) }
	local sizeTweenInfo = TweenInfo.new(0.3, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)
	local sizeTween = TweenService:Create(GuiClone.ImageLabel, sizeTweenInfo, sizeGoal)

	-- Tween to reverse the size back to (0,0) after expanding
	local reverseSizeGoal = { Size = UDim2.new(0, 0, 0, 0) }
	local reverseSizeTweenInfo = TweenInfo.new(0.15, Enum.EasingStyle.Quad, Enum.EasingDirection.In)
	local reverseSizeTween = TweenService:Create(GuiClone.ImageLabel, reverseSizeTweenInfo, reverseSizeGoal)

	UserInputService.InputBegan:Connect(function(input: InputObject)
		if input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch then
			-- Update position on each click
			GuiClone.ImageLabel.Position = UDim2.new(0, Mouse.X, 0, Mouse.Y)

			-- Play the initial tween and wait for it to complete before playing the reverse
			sizeTween:Play()
			sizeTween.Completed:Wait()

			reverseSizeTween:Play()
			reverseSizeTween.Completed:Wait()

			-- Destroy the clone once the reverse tween is complete
			GuiClone:Destroy()
		end
	end)
end
1 Like

Nevermind, I found out what was the error and it is now playing. Thank you @Developer4Lifee and the rest for the replies!

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.