1 decade ago by nholbert
I ran into a similar issue described in this thread:
http://impactjs.com/forums/help/using-mouse-clicks-with-touch-button-plugin
Essentially, I needed to be able to detect and do things with touches in the game world while also wanting to use the touch-button.js plugin to handle UI buttons. So, if you input.bind the mouse-button, and try to create touch-buttons using the plugin, tapping in the game world works fine, but button taps aren't registered. This is because currently, both input and touch-button create touch event listeners.
In working on a solution I wanted to do most of my modifications to the plugin and avoid changes to input. In the end I DID have to comment out the addEventListener for touch events in input as indicted below.
Next I made a few minor changes to the touch-button.js plugin. Essentially, when the button isn't touched, I pass the event off to the input.keydown. In addition, at the end of a touch if no button is being pressed I pass the event to input.keyup.
A fork of the original plugin with my changes can be found here:
https://gist.github.com/nholbert/9646155
While figuring out the problem and coming up with a solution was very challenging for me, the change itself seems a bit too easy... So far I haven't run into any problems in my own game, but if the above seems problematic or makes incorrect assumptions about how the code works, I'd be very interested to hear about it! Likewise, if anyone has come up with a more elegant solution to this problem I'd be very interested to see how you did it!
In the meantime, feel free to make use of this trick to get touch-buttons to work nicely with input mouse clicks!
http://impactjs.com/forums/help/using-mouse-clicks-with-touch-button-plugin
Essentially, I needed to be able to detect and do things with touches in the game world while also wanting to use the touch-button.js plugin to handle UI buttons. So, if you input.bind the mouse-button, and try to create touch-buttons using the plugin, tapping in the game world works fine, but button taps aren't registered. This is because currently, both input and touch-button create touch event listeners.
In working on a solution I wanted to do most of my modifications to the plugin and avoid changes to input. In the end I DID have to comment out the addEventListener for touch events in input as indicted below.
if( ig.ua.touchDevice ) {
// // Standard
// ig.system.canvas.addEventListener('touchstart', this.keydown.bind(this), false );
// ig.system.canvas.addEventListener('touchend', this.keyup.bind(this), false );
ig.system.canvas.addEventListener('touchmove', this.mousemove.bind(this), false );
// // MS
// ig.system.canvas.addEventListener('MSPointerDown', this.keydown.bind(this), false );
// ig.system.canvas.addEventListener('MSPointerUp', this.keyup.bind(this), false );
ig.system.canvas.addEventListener('MSPointerMove', this.mousemove.bind(this), false );
ig.system.canvas.style.msTouchAction = 'none';
}
Next I made a few minor changes to the touch-button.js plugin. Essentially, when the button isn't touched, I pass the event off to the input.keydown. In addition, at the end of a touch if no button is being pressed I pass the event to input.keyup.
A fork of the original plugin with my changes can be found here:
https://gist.github.com/nholbert/9646155
While figuring out the problem and coming up with a solution was very challenging for me, the change itself seems a bit too easy... So far I haven't run into any problems in my own game, but if the above seems problematic or makes incorrect assumptions about how the code works, I'd be very interested to hear about it! Likewise, if anyone has come up with a more elegant solution to this problem I'd be very interested to see how you did it!
In the meantime, feel free to make use of this trick to get touch-buttons to work nicely with input mouse clicks!