Phaser.Button click/touch events not working on Canvas+ (phaser v2.2.2 & cocoonJS v2.1.1.1)

[joshgerdes]

I am having issues getting the click events to fire for a basic Phaser.Button when running in canvas+ with cocoonJS.

 

I am testing the app (using phaser v2.2.2) with the cocoonJS launcher (using cocoonJS v2.1.1.1) on iOS 8.1.2 on an iPhone 6.

 

Here is what I have on a basic menu game state:

var button = this.game.add.button(this.game.world.centerX - 100, 215, 'assets', null, this, 'button_play_02.png', 'button_play_01.png', 'button_play_02.png', 'button_play_01.png');button.inputEnabled = true;button.fixedToCamera = true;button.smoothed = false;button.events.onInputOut.add(function() {	console.log('button event onInputOut');}, this);button.events.onInputDown.add(function() {	console.log('button event onInputDown');}, this);

The button image displays in canvas+ but does not fire anything when clicked/touched. In webview+ and webview it works fine. The 'assets' is a texture atlas with the images being displayed for the buttons based on transparent pngs.

 

I have seen similar issue on other topics (see below) but found no solution that worked.  Any help would be greatly appreciated.

 

Related topics:

http://www.html5gamedevs.com/topic/3980-common-phaser-cocoonjs-issues/page-13

http://www.html5gamedevs.com/topic/7167-conoonjsphaser-buttons-dont-work-even-with-canvas/

 

[Phaiax]

Same problem.

I noticed that if window.devicePixelRatio is 2, the positions of the clicks are not scaled correctly (Canvas mode differs from Webgl mode!).

Set your button to 100, 100 and try to click to the coordinate twice of your button (200, 200).

[joshgerdes]

I checked and window.devicePixelRatio is 2 for me as well.  I unfortunately have bigger problems. I am unable to click the location you described or trigger any touch events at all for that matter.

 

I tested for the following events firing:

• button.events.onInputDown
• button.events.onInputUp
• game.input.onTap
• game.input.onDown

But I'm getting no events firing when trying to run the game in Canvas+ mode from the cocoonJS launcher on iOS. The events trigger in the browser fine. 

 

Perhaps I'm missing some general configuration setting but I have not found anything specific on what those would be.  Here's the only input related settings in the current game code:

this.game.input.maxPointers = 2;this.game.input.multiInputOverride = Phaser.Input.TOUCH_OVERRIDES_MOUSE;

Is there anything else that needs to be setup to allow touch to work in Canvas+?

[joshgerdes]

Update: I finally figured out what my issue was. I had a hidden div element layered over the canvas which was blocking touch. I was using the div to display orientation instructions when users played the game in a mobile web browser. The div element was set to display none and worked fine in webview and webview+ but still caused issues in canvas+. 

 

So in short, the button example I have in my original post works perfectly using phaser v2.2.2 with the cocoonJS launcher (using cocoonJS v2.1.1.1).

 

Thanks!

[Tom Atom]

Great! Works for me. you saved me hours of time!