[Ideas] Circular limitation of the mouse

Hey creators !

I’m requesting your help to give me some ideas, reflections about limiting the mouse position in the viewport.
I know that with the inbuilt functions from unreal such as “Get Mouse Position” it’s possible to work with coordinates.
So it would be possible to clamp the mouse position in a certain area ( such as a rectangle, square ) by getting the centerpoint of the viewport.

But i’m looking for a way to do it with a circular shape.

Is there a simple solution to approach this question, or should i go full maths ?
I’m curious to hear about what you think of that, and maybe have some different point of views :wink: !

I’m really looking forward for your help.
Thank you to everybody who takes the time to help me ! :smiley:

Cheers !

i do believe its time to bust out your math skills.

Just calculate distance between two vectors center and mouse location. And clamp that float value to your Radius.

Nice to see you back here bro :slight_smile:

Thank you for your help Sardorian, i really appreciate that but i’m missing something.
I’ve been following your idea. Here is what I have right now :

So with a simple sketch :

As you can see i’m working with vector length.
So if I follow you, i can compare those two length.

But how do I limit my mouse position in this circle ? :smiley:
I dont want the mouse to go beyond the limit zone defined by the circle, that’s where i’m confused.
Should I re-set mouse position if my mouse vector length is higher than the radius ? :smiley:

-------------- EDIT -----------------

I was able to limit the play zone of my cursor to my circle area.
But this isn’t really a proper solution to me …
I just used a unit vector that I multiplied with my radius in order to project the real mouse position (if this one is out of the limit )

That’s where i’m right now :

To reach my goal, i need to fix a detail. So I still need your help guys !!! :smiley:

In fact, as you can see the cursor is a simulated projection of my real cursos outside the circle.
But in order to move the cursor back the right ( in my picture ) i need to bring back the real mouse in the circle.
So, im searching for a way to make my cursor act like a real mouse bounded in a certain area :stuck_out_tongue:

It’s the same thing that you did, but here i also set mouse location. forcing it to be in the circular region. However since we are doing it every frame it looks ugly and feels ugly too xD. Maybe for smother thing you can implement mobile touch joysticks from engine.

Thank you really much Sardorian for all your help and the time you took for me.
But unfortunately this solution does not work for me. Even if I understand the logic behind, it’s doing some crazy things in my viewport ahah.
As you said it’s better to avoit using event tick to give a natural, so i’ll try to do it with “axis event”, and let you know if I can do something with that :slight_smile:

I’m making an update to this problem because i’m struggling with coordinates system and my HUD, which prevents me from finding the solution to this problem …

To recap what I did from start :

  1. I’m getting the centerpoint of my viewport ( used as the center of my circle )
  2. I’ve been creating a cursor ( from a HUD element, and i’m playing with its anchor point )
  3. I got a radius that is a variable ( supposed to be controled later )
  4. I’m setting up a vector called MouseVector ( vector from center of the screen to mouse position )
  5. I’m comparing the vector length of my “MouseVector” to the radius.

Basically that’s what I have so far :

  1. If my mouse is inside the circle, the cursor is set to my mouse position
  2. If my mouse is outside the circle, then i’m doing a projection of a the cursor on the edge of the circle

But i have some troubles with positions** in my viewport, some kind of offset with the anchor point of my cursor :

With a basic example, when my mouse is at the center of the viewport, the cursor is already there with an offset.

So i decided to do some “Print String” to check both positions ( mouse and cursor )

Numerically they are the same ( cursor = red / mouse = green )

I guess it’s coming from my HUD Blueprint :

But i’ve been trying to fix that for 2 days, and i’m not able to find a solution to that.
Can someone give me some help on that ?? I would really appreciate.

For those who want to give it a look:

( so that you can see what’s really happening :smiley: )

I’m giving an update to this post.
The offset between my mouse position is coming from a referential issue.

In fact the x,y values are the same but my “mouse” is in my viewport and the cursor is in my “HUD wcanvas”.
So i’ve been tweaking to create a function to convert coordinates from one referential to another.

Unfortunately, i’m still having some offset. Because my widget is not filling the whole screen.
All i need to do is forcing my canvas to fit the dimension of my viewport. ( If anyone as a solution let me know )
I’ll keep searchng ;p

Any progress?