How do I move UI to corner of mouse

Hey there everyone,

Currently I’m trying to make a hover UI system like the one in pet sim:

Screenshot 2024-12-02 172414


Currently I dont know how to do this, I've set up the connection and everything, and my current script:
MouseConnection = Mouse.Move:Connect(function()
	if Button.Position.X.Scale > 0.9 then
		HoverInfoUI.Position = UDim2.fromScale((Mouse.X/Camera.ViewportSize.X) - 0.1, (Mouse.Y/Camera.ViewportSize.Y + 0.13))
	else
		HoverInfoUI.Position = UDim2.fromScale((Mouse.X/Camera.ViewportSize.X + 0.03), (Mouse.Y/Camera.ViewportSize.Y + 0.13))
	end			
end)

does not work for different sized screens.

Is there any better way or solutions to do this,
thanks a lot!

1 Like

the - 0.1 and + 0.13 (etc) are going to be different distances on each person screen since its going off of scale

Keeping the position of the UI as one algorithm and changing to the AnchorPoint property of the UI between (0,0) and (1,0) might make it a little cleaner and fix the issue at the same time

also you can use Mouse.ViewSizeX instead of Camera.ViewportSize.X if that’s easier

ex:

if Button.Position.X.Scale > 0.9 then
	Button.AnchorPoint = Vector2.new(1,0)
else
	Button.AnchorPoint = Vector2.new(0,0)
end -- could change the Y component too with another similar comparison
HoverInfoUI.Position = UDim2.fromScale(Mouse.X/Mouse.ViewSizeX, Mouse.Y/Mouse.ViewSizeY)
--[[
assuming your logic doesn't need it be positioned off Scale,
you could save some math by using the Offset side of a UDim2
like so:
]]
HoverInfoUI.Position = UDim2.fromOffset(Mouse.X, Mouse.Y)
1 Like

hey there,
it works much better but the hoverui is like this now and off the corner of the mouse
image
thanks for the help

bump I still need help on this

Hello! I believe I’m understanding what you’re trying to do; if I am, then this is much simpler than what you’re doing, however please correct me if I’m wrong.

If you want a simple system that is quite literally on the bottom right corner of the mouse (as the pet sim ones are), and you aren’t worried about the hover going off the screen, you can use the current mouse positions with some padding. You then use the offset positioning for the frame as the mouse moves, as you want to offset it pixels (making it independent to each device, the only downfall is some mouse sizes are different)

This is my very simple script that works, as I will also show in a video. Please tell me however if this is not what you wanted.

mouse.Move:Connect(function()
	local posX = mouse.X + 15
	local posY = mouse.Y + 15
	script.Parent.hoverframe.Position = UDim2.new(0, posX, 0, posY)
end)

Note that my example does not include hovering, however I assume you already have that written to be handled as you wish. The first one presents my normal screen size, while the second one presents a 1080 pixel screen.


1 Like