Yesterday I was making a game for an online course I\u2019m writing. The game has a flying cat and when you click anywhere on the canvas the cat will change position. This is the line of code I was using:<\/p>\n

game.input.onUp.add(this.changePos, this);<\/p>\n

The game was working fine on desktop mode, but when I changed to the mobile simulator on Google chrome it looked like the event did not fire at all because the cat didn\u2019t move. After about 15 minutes of trying to debug, I found that instead of not firing the event was actually firing twice. What was happening was that the browser was detecting two different events.<\/p>\n

A touch event for the device
\nA mouse event from the browser<\/p>\n

If I had simply tested the game on mobile, it would have worked fine, because the mobile device would not have dispatched a mouse event. So all in all, the game would be fine, but I still needed to test it on chrome, so I needed a workaround. Here\u2019s what I did.<\/p>\n

When you use the line of code above, it passes a parameter to the function which is called a pointer. The documentation for Phaser defines a pointer this way.<\/p>\n

A Pointer object is used by the Mouse, Touch and MSPoint managers and represents a single finger on the touch screen.<\/p>\n

The pointer contains a lot of information including if the user is using a mouse or not. I could simply return from the function if the pointer.isMouse==true, but I do not want to have to maintain two sets of code, and want my code to work on both desktop and mobile.<\/p>\n

So the solution is twofold<\/p>\n

1. Detect if the code is being run on a mobile device.
\n2. Return from the function if a mouse event is detected and we are using a mobile device.<\/p>\n

The first part I am already using in the game.<\/p>\n

isMobile=navigator.userAgent.indexOf(\u201cMobile\u201d);
\nisMobile=(isMobile==-1)?false:true;<\/p>\n

Now Phaser does have built in mobile detection, but I use this code to set things up before the game is declared, so I can set the game size.<\/p>\n

The second part I simply include a pointer parameter variable in my function and check if is a mouse, and if we are using a device, return.<\/p>\n

Here is what the code looks like:<\/p>\n

Main.js
\nvar game;
\nwindow.onload = function()
\n{
\nisMobile=navigator.userAgent.indexOf(\"Mobile\");
\nisMobile=(isMobile==-1)?false:true;<\/code><\/p>\n

if (isMobile==false)
\n{
\ngame=new Phaser.Game(480,640,Phaser.AUTO,”ph_game”);
\n}
\nelse
\n{
\ngame=new Phaser.Game(window.innerWidth,window.innerHeight,Phaser.AUTO,”ph_game”);
\nconsole.log(“Mobile”);
\n}<\/p>\n

game.state.add(“StateMain”,StateMain);
\ngame.state.start(“StateMain”);
\n}<\/p>\n

StateMain.js
\n
\nvar StateMain = {<\/code><\/p>\n

preload: function () {<\/p>\n

},<\/p>\n

create: function () {
\ngame.input.onUp.add(this.changePos, this);
\n},
\nchangePos:function(p)
\n{
\nif (p.isMouse==true && isMobile==true)
\n{
\nconsole.log(“caught mouse!”);
\nreturn;
\n}<\/strong>
\nconsole.log(“clicked”);
\n},
\nupdate: function () {<\/p>\n

}<\/p>\n

}<\/p>\n

This allows us to keep testing on chrome while avoiding this pesky annoyance.<\/p>\n

I hope this helps someone.<\/p>\n

Thanks!<\/p>\n

UPDATE!::<\/p>\n

I found that sometimes this method isn\u2019t working.<\/p>\n

An alternative would be to check the id of the pointer and if it isn\u2019t equal to one, ignore it.<\/p>\n

if (pointer.id!=1)
\n{
\nreturn;
\n}<\/p>\n","protected":false},"excerpt":{"rendered":"

Yesterday I was making a game for an online course I\u2019m writing. The game has a flying cat and when you click anywhere on the canvas the cat will change position. This is the line of code I was using: game.input.onUp.add(this.changePos, this); The game was working fine on desktop mode, but when I changed to […]<\/p>\n","protected":false},"author":1,"featured_media":82,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[33],"tags":[24,25,23,7],"class_list":["post-57","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bugs","tag-event","tag-firing","tag-gameinputonup","tag-phaser"],"yoast_head":"\n