Bigger "Hit Slop" or capture area for GUI ellipse

Hello,

I am trying to make a custom joystick.
I’ve checked the documentation and implemented it as I want but with one exception.
I want to “puck” to still move on the thumb container, even when you move outside it.
so, I will try to explain the desired behaviour:

  1. You press down on the thumContainer -> it sets a flag to true (isPointerDown)
  2. You move your thumb (while it’s still down) -> it changes the position of the puck -< EVEN if you are moving it outside
  3. You press up anywhere -> it sets the flag to false.

I hope it’s clear enough.
You can see this demo (which is basically what’s in the documentation with clipContent = false and clipChildren = false):
https://www.babylonjs-playground.com/#C6V6UY#5

It does everything I mentioned above but the part that it also captures the pointer move outside and effects the puck.

Would like to have some help here.

Thanks!

Maybe @PolygonalSun will be able to help on that one.

Hey @Chubby,

First of all, welcome to the forums! Second, let me take a look and see what’s going on.

So here’s what I’ve got. On both lines 10 and 177, you have the line:

camera.attachControl(canvas, true);

This adds keyboard and mouse controls to the camera. This is why you still have movement, even when you click outside of the puck areas. If you remove those two lines, it should remove those extra pointer captures.

Hi @PolygonalSun, thanks for trying to solve my issue.
I think you failed to understand what I want to achieve.
It’s ok that you can move the camera even without the joysticks.

I will try to explain it with something else.
If you use GUI.ColorPicker, it has circle wrapping a rectangle.
If you move the pointer inside the rectangle and the mouse is outside, it still moves the cursor there. that’s what I want to achieve with my joystick and puck.

I have uploaded a video with the above (ColorPicker)
https://photos.app.goo.gl/r8uY91TsEiNA8na5A