[SOLVED] Is there any thing like touch enter or touch leave?

Help & Support
1

Hello

image
image306×545 29.4 KB

As shown in image I have LeftSide and RightSide UI image element with User Input Enabled.
When i click and go extreme left or right my mouseenter event gets triggered and when i leave left or right area mouseleave event get trigged which works fine for pc.

this.autoDragLeftAreaComp.element.on('mouseenter', function (evt) {
    console.log("autoDragLeftAreaComp ENTER");
}, this);
this.autoDragRightAreaComp.element.on('mouseenter', function (evt) {
    console.log("autoDragRightAreaComp ENTER");
}, this);


this.autoDragLeftAreaComp.element.on('mouseleave', function (evt) {
    console.log("autoDragLeftAreaComp LEFT");
}, this);
this.autoDragRightAreaComp.element.on('mouseleave', function (evt) {
    console.log("autoDragRightAreaComp LEFT");
}, this);

Basically i am clicking and dragging the screen to reach left and right area.
How i can make UI element work like mouse enter / mouse leave on Touch Device?
(Is this possible without raycast and colliders?)

2

There’s isn’t and I’m not sure why there isn’t a parity between the mouse and touch on the elements TBH :thinking:

You might be better off using screen position instead here unfortunately. I can’t think off the top of my head how this would work with elements and touch :frowning:

3

Ohh…

Any other way i can detect where touch/ mouse at almost extreme left or right?

4

You can use the screen coordinates of the mouse/touch events and see if it is on the 0-10% or the 90-100% of the screen. Or rather than %, you can use actual pixel values.

1 Like
5

@yaustar Thanks I am able to detect it using touch and mouse X coord…

if(this.isMouseDown === true &&  x < ( (this.app.graphicsDevice.width * 7.5) / 100 ) )
{
    console.log("Left Zone = ", x, " | ", this.app.graphicsDevice.width);
}
else if(this.isMouseDown === true && x > ( (this.app.graphicsDevice.width * 92.5) / 100 ) )
{
    console.log("Right Zone = ", x, " | ", this.app.graphicsDevice.width);
}
6

Check if it works with pixel device ratio turned on/off too

7

It does not work with device pixel ratio :face_with_head_bandage:

What to do?

8

You may have to multiply the width/height by the pixelratio first. :thinking:

9

OK here is my code when device pixel ratio is on…

if(this.isMouseDown === true &&  x < ( ((this.app.graphicsDevice.width / window.devicePixelRatio) * 7.5) / 100 ) )
{
    console.log("Left Zone = ", x, " | ", this.app.graphicsDevice.width / window.devicePixelRatio);
}
else if(this.isMouseDown === true && x > ( ((this.app.graphicsDevice.width / window.devicePixelRatio) * 92.5) / 100 ) )
{
    console.log("Right Zone = ", x, " | ", this.app.graphicsDevice.width / window.devicePixelRatio);
}

This above code works for pc and touch device but only if Device Pixel Ratio is On.

If Device Pixel Ratio is Off then above code does not work properly on touch device…
Is there any way to check if Device Pixel Ratio is On or Off?

10

Try using the PlayCanvas device pixel ratio instead: https://developer.playcanvas.com/en/api/pc.GraphicsDevice.html#maxPixelRatio

this.app.graphicsDevice.maxPixelRatio
1 Like
11

When Device Pixel Ratio is off, it should be the value of 1

1 Like
12

@yaustar Thank you very much problem is Solved! :slight_smile:

Here is code:

var devideByVal = 1;

// check if it is touch device
if(this.app.touch)
{
    // check device pixel ratio is enabled
    if(window.devicePixelRatio == 2 && this.app.graphicsDevice.maxPixelRatio == 2)
    {
        devideByVal = 2;
    }
}

if(this.isMouseDown === true &&  x < ( ((this.app.graphicsDevice.width / devideByVal) * 7.5) / 100 ) )
{
    console.log("Left Zone = ", x, " | ", this.app.graphicsDevice.width / devideByVal);
}
else if(this.isMouseDown === true && x > ( ((this.app.graphicsDevice.width / devideByVal) * 92.5) / 100 ) )
{
    console.log("Right Zone = ", x, " | ", this.app.graphicsDevice.width / devideByVal);
}

Works fine for pc and touch… even if Device Pixel is On or Off…

Fixed! :smiley:

13

You want to avoid using hardcoded values for the pixel ratio, like 2. What if it is 4, or some non-integer value? Something like this, perhaps:

var device = this.app.graphicsDevice;
var ratio = Math.min(device.maxPixelRatio, window.devicePixelRatio);
width *= ratio;
height *= ratio;
1 Like
14

@LeXXik Yes, you are right :thinking:
I should take care of it as well…

Thanks for suggestion. :+1:

1 Like