How correct button component to use touch instead of mouse clicking on mobiles?
I mean those buttons from that thread: [SOLVED] 3D sphere, 2D circle or flat image as a button - #9 by mdesign .
On mobiles, I touch buttons and nothing happens.
It`s a newest project with those buttons:
https://playcanvas.com/project/1052067/overview/box-in-a-box--button-test-08
It works from time to time but it`s very hard to hit the button target because it’s a very small point (smaller than the icon). How to increase the clickable field and make those buttons more responsive?
I`ve solved it.
It was needed to add those lines:
this.entity.element.on('touchstart', function (evt) {
evt.stopPropagation();
this.entity.parent.anim.playing = true;
}, this);
this.entity.element.on('mousedown', function (evt) {
evt.stopPropagation();
this.entity.parent.anim.playing = true;
}, this);
before was only mousedown without touchstart
I would also suggest that you use the ‘click’ event for ease on buttons ButtonComponent | PlayCanvas API Reference
It works for both touch and mouse events.
Also on the button, there is a padding property that you can enlarge to make the hit area bigger. (See green lines)
