How do I make multiple GuiObjects to follow the mouse?

Help and Feedback Scripting Support
#1

Currently I’m working on a dynamic crosshair, which is formed by 4 Frames. How do I make it follow the mouse in a right position?

image

while wait() do	
    script.Parent.hor1.Position = UDim2.new(mouse.x - 0.1,0,0,0)
end

How do I utilize mouse.X and mouse.Y?

3 Likes
#2

You could use BindToRenderStep to bind a function that moves a crosshair frame to where the mouse is located. Example:

local function move()
    crossFrame.Position = UDim2.new(0, CurrentMouse.X, 0, CurrentMouse.Y)
end

game:GetService("RunService"):BindToRenderStep("MoveMouseGui", 1, move)

In your current setup you have 4 seperate frames, but I would recommend putting these into a single frame and making them stay at one side of the frame by utilising AnchorPoint.
In this example the Frame has an AnchorPoint of (1,0) and will stay on the right hand side of the crosshair frame.

image

With all these steps combined you can get a crpsshair frame that follows the mouse, and the frame can then be tweened to add recoil effects later on.

You should also put this line of code whenever you want to have crosshairs so the mouse doesn’t appear!

game:GetService("UserInputService").MouseIconEnabled = false

Hope this helped :smiley:

4 Likes
#3

Thanks for the solution! But I came up into another question.
When the weapon is being shot, It’s position will change by:

crosshair.hor1.Position = UDim2.new(crosshair.hor1.Position.X.Scale - 0.01, 0, 0.498, 0)
crosshair.hor2.Position = UDim2.new(crosshair.hor2.Position.X.Scale + 0.01, 0, 0.498, 0)
crosshair.vert3.Position = UDim2.new(0.491,0,crosshair.vert3.Position.Y.Scale + 0.03,0)
crosshair.vert4.Position = UDim2.new(0.491,0,crosshair.vert4.Position.Y.Scale - 0.03,0)

delay(0.03,function()

crosshair.hor1:TweenPosition(UDim2.new(0.47,0,.498,0),Enum.EasingDirection.Out,Enum.EasingStyle.Linear,.1)

crosshair.hor2:TweenPosition(UDim2.new(0.508, 0,0.498, 0),Enum.EasingDirection.Out,Enum.EasingStyle.Linear,.1)

crosshair.vert3:TweenPosition(UDim2.new(0.491,0,0.546,0), Enum.EasingDirection.Out,Enum.EasingStyle.Linear,.1)

crosshair.vert4:TweenPosition(UDim2.new(.491,0,.453,0), Enum.EasingDirection.Out,Enum.EasingStyle.Linear,.1)

end)

How do I combine with the above script and this? I tried record it’s position when the weapon was being shot but it doesn’t work well.

1 Like
#4

This should do the trick

game:GetService("RunService"):BindToRenderStep("CrosshairUpdate", 1, function(delta)
    local mousePos = game:GetService("UserInputService"):GetMouseLocation()
    crosshair.hor1.Position = UDim2.new(-0.03, mousePos.X, -0.002, mousePos.Y)
    crosshair.hor2.Position = UDim2.new(0.008, mousePos.X, -0.002, mousePos.Y)
    crosshair.vert3.Position = UDim2.new(-0.009, mousePos.X, 0.046, mousePos.Y)
    crosshair.vert4.Position = UDim2.new(-0.009, mousePos.X, -0.053, mousePos.Y)
end)

game:GetService("UserInputService").MouseIconEnabled = false

You want to set the position of each element to the center of the mouse’s position first, and then set the scale of each GUI element to it’s offset from the center of the screen (which is where its default position is from what I can tell by your code). This way it will be positioned first at your mouse’s location, and then it will add or subtract the scale to that position for each GUI element, retaining its form. If you decide to offset each GUI element via it’s Offset property rather than scale, just add or subtract the X and Y offset you set each element to the mousePos.X and mousePos.Y.

Usually TweenPosition isn’t what you want to use for this. You want the crosshair to be responsive and go exactly where the user has their mouse every frame. You can replace .Position with TweenPosition if you still decide you want to use it.

2 Likes
#5

If this is for a bouncing recoil effect, then with my setup you can just tween the size of the frame the crosshairs are in, and that’s it.

#6

I tried to record their position when the weapon is being shot, but this made no use since it got overlayed by the RunService that makes the crosshair follow the mouse, how do I solve that?

local recHor1 = crosshair.hor1.Position
local recHor2 = crosshair.hor2.Position
crosshair.hor1.Position = UDim2.new(crosshair.hor1.Position.X.Scale - 0.01, 0, 
crosshair.hor1.Position.Y.Scale, 0)
crosshair.hor2.Position = UDim2.new(crosshair.hor2.Position.X.Scale + 0.01, 0, 
crosshair.hor2.Position.Y.Scale, 0)

							delay(1,function()
								crosshair.hor1.Position = recHor1
								crosshair.hor2.Position = recHor2
								
							end)
#7

Maybe I’m misunderstanding the issue, but I highly recommend putting the four crosshairs inside a frame that holds them all. Use the AnchorPoint property of each and scale positions to place them where they belong inside the frame, and then make the AnchorPoint of the parent frame 0.5, 0.5. Re-position the parent frame to the position of the mouse every frame, and then to spread out the crosshairs just change the size of the parent frame.

3 Likes