How to make a Ui that slightly follows the client’s cursor?

Help and Feedback Art Design Support
#1

So I’m currently doing a project where everything is about Ui Elements however I bumped into a problem … how to make a Ui that slightly follows the client’s cursor …

—
I knew about making a Ui that entirely follows the client’s cursor although I want the ui’s movement limited.

— (Animation I made to present how It would look like)

—
I had still no progress about this. I tried looking for a solution although I haven’t seen one.

#2

I believe you might want to use Mouse.Move
With it.

But you can check these:

#3

Assuming I am understanding what your goal is, a UI that when the bar of said UI is clicked and held it will move in the direction of the mouse cursor but wont go to far from its position and when the mouse button is released the UI snaps back to its original position. If that is your goal I believe a possible option would to get the mouse position when the bar is clicked, and check the mouse’s new position whenever it is moved (via Mouse.Move), compare its position to that of the clicked position to figure out which way it moved and move the UI in that direction and verify the UI’s new position when compared to the start position doesn’t exceed a set limit. (Yes I know its a lot but its the first potential solution that came to my head)

1 Like
#4

I think the basics here are that you need to look at what information is required to solve the problem:

  1. Where the input was when it started the interaction (as your animation shows this only happens when clicking/pressing)
  2. Where the UI was before the interaction started.
  3. Where the mouse is currently.
  4. The function for defining how far the UI should shift (I personally think something that has deminishing returns so it has less impact the further away you go is nice).

From there you just need to choose where you are placing the update timing. For example you could put it in RenderStepped as long as it isn’t slowing down framerates too much, as this runs before the frame is rendered (which can be ideal for responsive feeling UI).

Don’t forget at the end of the interaction to move the UI back to it’s original position. Also you may need to cache the original position or add debounce so the interaction can’t be started again until it returns to it’s original position so that you don’t run into drift.

Keep in mind GUI don’t need an event to refrence the mouse as they should be controlled by LocalScripts which can fetch the mouse and read information such as it’s position at any given time. This is important because you may want to create an effect where the drifting is not strictly tied to current mouse position but instead targets it and moves over time.

Hope that helps!

1 Like
#5

do you mind writing it as a code? It’s completely fine if you can’t. I just can’t process it. I’ll try my best still.

#6

here is a basic example i made of what I think you want, it isnt perfect and the provided code only works with Offset. Im sure there are several ways to improve it but here is the code and what it does

local Plr = game:GetService('Players').LocalPlayer

local Mouse = Plr:GetMouse()

local StartPos = script.Parent.Position

local XLimits = {

['Left'] = 50,

['Right'] = 50

}

local YLimits = {

['Up'] = 50,

['Down'] = 50

}

script.Parent.MouseButton1Down:Connect(function(x,y)

local MovedEvent = Mouse.Move:Connect(function()

local XAdjustment = math.clamp(x-Mouse.X,(math.abs(XLimits.Left)*-1),math.abs(XLimits.Right)) -- How much to move on the X axis

local YAdjustment = math.clamp(y-Mouse.Y,(math.abs(YLimits.Up)*-1),math.abs(YLimits.Down)) -- How much to move on the X axis

print(x,Mouse.X,XAdjustment,'|',y,Mouse.Y,YAdjustment)

script.Parent:TweenPosition(UDim2.new(0,StartPos.X.Offset-XAdjustment,0,StartPos.Y.Offset-YAdjustment),Enum.EasingDirection.Out,Enum.EasingStyle.Sine,.1,true)

end)

Mouse.Button1Up:Wait()

MovedEvent:Disconnect()

script.Parent:TweenPosition(StartPos,Enum.EasingDirection.Out,Enum.EasingStyle.Sine,.1,true)

end)

3 Likes