ClickDetector hover effect

Resources Community Resources
#1

print(“Hello developers!”)
Currently, Roblox ClickDetectors are mostly seen as obsolete in favour of the newer addition to Roblox - ProximityPropmts. That’s no surprise - ProximityPrompts offer more customisation and more flexibility in scripts.

Imagine a ClickDetector reinvented.

My idea of a click detector is that it should have a built in choice to highlight the object that it is parented to and this is what inspired me to create this script. Not only does it add a highlight to the object your mouse is hovering over it also lets you add an ActionText! Simply add a custom property of string to the ClickDetector called ActionText and input the text you wish to be displayed.

If you’d like to play around with this or you want to include it in your game, here’s the script: ClickDetector Hover Effect - Roblox

Place the script under StarterPlayerScripts - it is a LocalScript

Have fun!

38 Likes
#2

This is great! I can see this being used in different types of games!

1 Like
#3

I love this, although I feel sad for mobile users.

1 Like
#4

Oh my god, I absolutely love this. Now I’m gonna script it myself, don’t worry you’ll get credit.

#5

Amazing! Can bring alot of life to a game. One quick addition i did is adding this into the top of the script:

local localplayer = game.Players.LocalPlayer

RunService.RenderStepped:Connect(function()
	local HitPos = Mouse.Hit.Position
	if Mouse.Target:FindFirstChildWhichIsA("ClickDetector") and localplayer:DistanceFromCharacter(HitPos) <= Mouse.Target:FindFirstChildWhichIsA("ClickDetector").MaxActivationDistance then

Makes the outline only appear when the player is within the MaxActivationDistance of the clickdetector!

4 Likes
#6

apologies for the necro post, but the code causes this error to flood the output entirely non-stop if the mouse isn’t hitting a part
image

if it looks into the sky for example, with no part blocking it, it’ll flood this error. It stops once it hits a part at all

#7

I should’ve put it in a pcall() and do some error handling, how it originated is that I was bored and had no idea what to make so I speedran a module, I’ll fix that

1 Like
#8

How i can change this mouse button to the normal icon?
image

#9

ClickDetectors have a property inside of them by default

1 Like
#10

The Action Text doesn’t work at all with the new Fonts in Creator Marketplace update.

I put the StringValue under a part and named it ActionText, put some Text in the Value Property and nothing shows up when I hover over the part it in-game.

The reason I’m mentioning the new Fonts update is because not only did all the fonts get renamed, the newer fonts aren’t supported at all. I tried changing the TextLabel.FontFace = "Code" to the new TextLabel.FontFace = Font.new("rbxassetid://12187373327") and it still wouldn’t show up.

Also is support for MaxActivationDistance going to be added? You can hover over it and it’ll still appear from any distance.

#11 
local hoverTargets = {}
runService.Heartbeat:Connect(function()
	if Mouse.Target then
		local hitPos = Mouse.Hit.Position
		if Mouse.Target:FindFirstChildWhichIsA("ClickDetector") and Player:DistanceFromCharacter(hitPos) <= Mouse.Target:FindFirstChildWhichIsA("ClickDetector").MaxActivationDistance then
			if Mouse.Target:FindFirstChild("hoverHighlight") then
				if Mouse.Target:FindFirstChild("hoverHighlight").Enabled == false then
					for i,v in pairs(hoverTargets) do
						if v ~= Mouse.Target then
							v.hoverHighlight.Enabled = false
							table.clear(hoverTargets)
						end
					end
					table.insert(hoverTargets, Mouse.Target)
					Mouse.Target.hoverHighlight.Enabled = true
				end				
			end
		else
			for i,v in pairs(hoverTargets) do
				v.hoverHighlight.Enabled = false
			end
		end
	else
		for i,v in pairs(hoverTargets) do
			v.hoverHighlight.Enabled = false
		end
	end
end)

I rewrote it a little, this better supports adding/removing highlights seamlessly from instances regardless of where they are in workspace, and won’t delay rendering to perform it. The major change is that instead of creating the highlight, it searches for an existing one within the instance and simply toggles its Enabled value to true/false. It searches for highlights with the name “hoverHighlight.” This also makes it so you can choose which ClickDetector instances are hoverable, simply by adding the highlight or not

3 Likes