Clicked event on mobile

[nazywamsiepawel]

Hey,

I'm currently struggling with pinch and drag events triggering a pointer event in handlers for interaction for other sprites on mobile.

I managed to solve it on desktop by using:

 viewport.on("clicked", this.viewportClickHandler);

With the viewportClickHandler function checking for hits using containsPoint and performing any further action.

Unfortunately, this doesn't work on mobile where I use pointerdown, pointerup and pointermove events. The clicked event on the viewport doesn't seem to be triggered.

Is there any recommended way to use them in a similar way to how the clicked event is used on the desktop browsers? Is there anything that I'm doing wrong?

All the best and thanks in advance for any replies.

[jasonsturges]

@nazywamsiepawel David would have more insight, but I believe handling both mouse click and touch events are combined via pointer events. Otherwise, you're listening for only click or touch.

    // Mouse & touch events are normalized into
    // the pointer* events for handling different
    // button events.
        .on('pointerdown', onButtonDown)
        .on('pointerup', onButtonUp)
        .on('pointerupoutside', onButtonUp)
        .on('pointerover', onButtonOver)
        .on('pointerout', onButtonOut);

As an aside, in my app there are numerous sprites with interactivity enabled - they do not fire during pixi viewport zoom pan events. However, it has been noted some people aren't exactly proficient using touch devices, and their timid actions result in quick tap like actions.

In my app, my display objects listen for click and tap to better isolate intended gestures for mobile and desktop:

  sprite.on("click", this.clickHandler);
  sprite.on("tap", this.clickHandler);

Mention in case you're handling down vs quick up inside events.

[nazywamsiepawel]

@jasonsturges thanks for the answer!

What I have found is that each of the events (pointerup, pointerdown, pointermove, tap) is triggered when the drag event occurs within the viewport and happens to end at the coordinates which fall into the bounds of the interactive sprite. Since the tap is supposed to happen on the background image of the map (where user selects where does he want to move an avatar) I would not associate the issue to fat fingers - the space is rather large and unobstructed with others sprites.

An issue which I believe might be parallel has been already posted before - https://github.com/davidfig/pixi-viewport/issues/206

I have not fixed the origin of that problem but got the solution to work with a bit of a hack.

Viewport has two events that can be listened to when the drag event happens - drag-start and drag-end. I have simply added a variable that indicates if the drag is currently in progress and passed it down to wherever the pointer events happen.

this.viewport.on("drag-start", (event) => {
    this.game.setDragInProgress(true);
});

this.viewport.on("drag-end", (event) => {
    this.game.setDragInProgress(false);
});

And then later, the variable is being used in the mobile events:

handlePointerTap(event) {
   if (this.dragInProgress) {
     return;
   }
   ...

While this adds to the number of variables that are passed around, the solution might be potentially faster than the one found in https://github.com/davidfig/pixi-viewport/issues/206 as iterating through all of the sprites is not necessary.

[jasonsturges]

@nazywamsiepawel Some events will fire, like pointerup, pointerdown, and pointermove - but I wouldn't think tap should fire as that is a specific tap (click) gesture.

For me, the combo of click and tap isolate those events from viewport - I'm not experiencing this issue.

Perhaps you could experiment with event stopPropagation() or stopImmediatePropagation() to prevent events from bubbling up from the sprite to the viewport during capture phase.

[rbozan]

Hi, did you have any solution for this?