[bug] Sprites require additional tap to trigger event on mobile devices

[lmfff]

I'm checking for input events on a sprite in the draw loop with if (sprite.mouse.presses()). This works fine on desktop but on Android (both Chrome and Firefox) nothing will be triggered on the first "tap" on the sprite. A second "tap" will trigger the event. It's interesting to notice that the second tap doesn't need to be on the sprite itself but can be anywhere on the canvas.

An hacky solution for now is to schedule a fake second tap. I've achieved this editing the source code of p5play.
For example on line 8507:

pInst._ontouchend = function (e) {
  __onmouseup.call(this, 'left');
  _ontouchend.call(this, e);
  // hacky solution
  setTimeout(() => {
	  __onmouseup.call(this, 'left');
	  _ontouchend.call(this, e);
  }, 100)
};

Any ideas?

[quinton-ashley]

I don't have an android but I've tested the p5play.org homepage physics demo on Android before and never experienced that problem.

Does the problem only occur the first time you interact with the canvas or for every tap?

[lmfff]

Every tap. Another detail is that I'm using p5 instancing mode. I might try to see if with global mode it goes away but i doubt it. I can also make a minimal example to reproduce this behaviour if that might help.

[lmfff]

The homepage example works for me too. I'll keep investigating.
Could it really be using instancing mode that causes this issue?

[quinton-ashley]

Ah well the homepage example doesn't use sprite.mouse, my bad.

Here's a simple example:
https://p5play.org/learn/input_devices.html?page=3

I hadn't noticed it before but you're right, even on iPhone it doesn't work! The sprite only turns green on the second tap. I will investigate that.

[lmfff]

Did you close this because it's solved? If so can you point me to the commit that solves this? I'm curious to learn about the issue.

[quinton-ashley]

Ah wait I wait I thought I fixed this but only partially, cause the example on the website still doesn't work.

I'll let you know when it gets fixed 100%

[quinton-ashley]

@lmfff Fixed in v3.15.3.

I added these lines to _ontouchstart

if (this.touches.length == 1) {
	this.mouse.update();
	this.world.mouseSprites = this.world.getMouseSprites();
}

https://github.com/quinton-ashley/p5play/blob/3.15.3/p5play.js#L8798

On mouse based devices the mouse position updates every frame and the mouse will already be hovering over the sprite before the user clicks on the sprite. But on touch based devices obviously that's not the case.

So p5play needs to update the mouse's position when the user touches. Then it needs to get all the sprites at that point, which I call mouseSprites. The sprite on the top most layer is thee mouseSprite which can be dragged.

I also added _ontouchmove to make dragging work.

My error before was that I used touches instead of this.touches which is the touches array for that instance of p5.js, which is why it didn't work on the website cause all the sketches on there are instanced, not global.