Detecting touch input on HTML5 on mobile

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By GringoFrenzy
:warning: Old Version Published before Godot 3 was released.

Is it possible to detect screen taps/touch from a mobile device running an HTML5 game in browser? (Chrome or Safari)

I’m trying to make a basic one-button game that can be embedded on a web page and will run on iOS / Android without needing to download from an app store.

I don’t want to do anything clever; even if the only event I can detect is a basic tap, that would be enough for me.
I’ve verified that the game loads and runs on both platforms…the problem is I can’t get it to respond to any input.

So far I’ve tried BaseButton nodes, TouchScreenButton nodes, and hooking into events like InputEvent.SCREEN_TOUCH and InputEvent.MOUSE_BUTTON…none of them work.

The ‘fullscreen’ button that appears in the top-right of the canvas DOES respond to touch…just none of my buttons.

Am I fighting a losing battle?

For a 1 tap you can use mouse events instead of touch, but I don’t know if will work on mobile web browsers because HTML5 export is not good and mobile support for it is even worse.

You may have to wait fot Godot 3 (or 3.1) to get a good HTML5 export.

eons | 2016-11-17 00:47

:bust_in_silhouette: Reply From: GringoFrenzy

Ok, so as eons suggested, the HTML5 engine treats screen taps as mouse clicks.
I found the below out thanks to YeOldeDM and henkz on the IRC channel.

You can use Input.is_mouse_button_pressed() or (in my example below) you can create an alias for the mouse button via input mapping (I labelled all mouse buttons ‘SCREEN_TAP’)

Polling mode:

func _ready():
	set_process(true)

func _process(delta):
	if(Input.is_action_pressed("SCREEN_TAP")):
		do stuff...

or

Event driven mode:

func _ready():
	set_process_input(true)

func _input(event):
	if ((event.type == InputEvent.MOUSE_BUTTON) and (event.pressed == true)):
		do stuff...

For event driven mode I added the event.pressed == true criteria to prevent it counting each tap as two clicks (pressing is 1 click, releasing is another).

One side-effect of running in a browser is that if you tap too quickly the browser sometimes (not always) interprets it as a double-tap zoom command.
Additionally, holding the tap for an extended time can sometimes timeout after a few seconds, which might be an issue depending on the type of game you want to make.

I’ve tested this on Android 6.0.1 (Chrome 54.0.2840.85 and Opera 37.0.2192) and iPhone 6S Safari on iOS 10.1.1