Image and Button Click Not Working on Android Chrome

[Dylan M]

Hello all. I am having a browser-specific issue with Phaser 2.10.0 that I cannot seem to understand. I have the following code for a button.

minDimension = Math.min(game.width, game.height);
resetButton = game.add.sprite(game.width * 0.5, game.height * 0.925, 'Reset');
resetButton.anchor.setTo(0.5, 0.5);
resetButton.width = resetButton.height = minDimension * 0.075;
resetButton.inputEnabled = true;
resetButton.events.onInputDown.add(resetProcess, this);

This puts a reset button image at the middle of the bottom of the browser window.

As expected, when clicked or tapped, the resetProcess() function is called and the level in my game is reset. This works as expected in most browsers on desktop and mobile; however, in Android Chrome (in my case, Android 7.0.0 and Chrome 64.0.3282.137) the button appears but does not do anything when clicked. I verified that the issue is not in my resetProcess() function. It seems that the onInputDown event isn't working properly.

I also tried the following code, using a button instead of an image.

minDimension = Math.min(game.width, game.height);
resetButton = game.add.button(game.width * 0.5, game.height * 0.925, 'Reset', resetProcess, this);
resetButton.anchor.setTo(0.5, 0.5);
resetButton.width = resetButton.height = minDimension * 0.075;

This caused behavior identical to the snippet above. 

Previously, a few months ago, I was able to get my button working as expected no matter the browser, and no changes were made to this part of my code since then. 

Does anyone have any thoughts as to what might be causing this issue, and how to fix it?

Thanks.

[Yngar]

I'm having the same problem I noticed that if the sprites were really big it would work. I drew debug info for the active pointer it seems that the input coordinates do not match up. So you still have input but its not in the right place. Looking into a fix now.

[mickeyren]

I have touch inputs working on one my tutorials - https://www.programmingmind.com/phaser/fun-with-spells-using-phaser

you can load it in your android browser and touch the spell icons - it will work.

[baik]

I'm having the samed problem. Button not work with 2.10.0 on Android Chrome. I've downgraded my version of phaser to 2.6.2 and it's working...

[balazsdavid987]

I have the same problem with Phaser CE v2.9.4. The game works well on mobile with Firefox, but not with Chrome. I was able to overcome the problem by using Phaser v2.6.2.

[samme]

Please use

game.debug.pointer(game.input.activePointer);

to verify where Phaser is placing it.

[earok]

Hi all,

I have the same problem, the game was absolutely fine up until recently so presumably (from the fact that we're all having the same problem at once) it was broken by an update to Android Chrome (also on some old Android tablets that haven't been updated, it works fine). The same issue happens when using responsive mode in desktop chrome to simulate Android Chrome browser.

I tried game.debug.pointer(game.input.activePointer); as samme suggested, the pointer is WAY off when using scaling.

Using Phaser v2.8.7. I'll keep digging.


Edit: Drop in replacement with Phaser v2.6.2 as per Baik's suggestion works fine.

[mickeyren]

i'm using Phaser 2.10.0 and this one works - 

 

http://dtml.programmingmind.com/wordbattle/

iconAttack.events.onInputDown.add

[samme]

Try adding, e.g.,

<meta name="viewport" content="initial-scale=1">

to your page if it has no viewport description.

 

[Dylan M]

Hello everyone.

Thanks very much for your help. The insights and suggestions were very useful.

Thanks very much to samme for the solution. Adding the meta tag solved the problem I was having. 

I wish you all the best.