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

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.
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
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.
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
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?
Good question, @yaustar any ideas?
1 Like
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
No, I was thinking about the use case and it makes sense for some sort of ātouchenterā event to exist here
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