Touch Enter Event

Help & Support
#1

Hey all,

I am trying to make a d-pad setup for mobile devices like this:

Screen Shot 2022-04-18 at 12.09.18 PM

This all works great binding buttons to different directions but where I am struggling is the lack of a touchenter event. I am using the touch leave event to stop input in a direction which is great but I am trying to roll my thumb onto another button and am struggling. Why is there no touchenter event similar to a mouseenter like on the click event page: ButtonComponent | PlayCanvas API Reference

Also, can anyone think of a way to enable this functionality if it does not exist? Only thing that currently comes to mind is to keep track of the screen coordinates of the touch and then if they drift into a different buttonā€™s bounding box then it starts that buttonā€™s logic.

#2

Hi @Jake_Johnson,

Because touch input doesnā€™t use a cursor, so there isnā€™t really any event where the touch enters but doesnā€™t ā€œtouchā€ the element.

The event you are looking for to work with is on touchstart:

https://developer.playcanvas.com/api/pc.ElementComponent.html#event:touchstart

2 Likes
#3

Thanks Leonidas,

I am already using touchstart which is what is causing the issue. If you start on one element, tap it, then drag your finger into another element, the touchstart event doesnt seem to fire for the second element. Is this intended functionality? And if so, can you think of a way around that? Shifting your thumb on a physical d-pad is how Iā€™ve always used a dpad so I am trying to replicate that functionality digitally while still using the PlayCanvas buttons.

#4

I see, thatā€™s a good point, not sure how to approach that.

Have you tried touchmove? I think it will fire continuously and give you most likely what you are looking for, touch events over any element.

1 Like
#5

Iā€™ve only been able to get touchmove to fire if the touch starts on the element. Right now the only way I can really see around this is to have a single d-pad ā€œoriginā€ button and do some math on how far the touch is from the middle to see if its up down left or right. Does that sound right to you?

#6

Good question, @yaustar any ideas?

1 Like
#7

I have something that might help a bit?

https://playcanvas.com/project/915144/overview/elementtouchmovetest

https://playcanvas.com/editor/code/915144?tabs=78523033

    this.entity.element.on('touchmove', function (evt) {

        var touchmoveEntityName;

        // Get touched element for current touchend coordinates x,y.  Uses private api.        
        var touchedElement = pc.app.elementInput._determineTouchedElements(evt); 
        
        if (touchedElement[evt.touch.identifier]) {
            
            // There is an element at touchmove coordinates x,y

            touchmoveEntityName = touchedElement[evt.touch.identifier].element.entity.name;
            
            console.log("touchmoveEntityName = " +  touchmoveEntityName + " : for touch started on " + this.entity.name);
        }
        else {
            
            // There is no element at touchend coordinates x,y

            console.log("No touchmoveEntity for touch started on " + this.entity.name);
        }
        
    }, this);
1 Like
#8

No, I was thinking about the use case and it makes sense for some sort of ā€˜touchenterā€™ event to exist here

#9

Created a ticket for this: Fire touch event for when a touch enters a UI element Ā· Issue #4202 Ā· playcanvas/engine Ā· GitHub

As a workaround, I would say to treat that whole dpad as a single element/area and rather basing it on the which button is pressed, track where the touch is relative to the center of the dpad and work out the input based on that.

2 Likes