joshgerdes

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

Recommended Posts

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/

 

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

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+?

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.