christianstrang Posted May 7, 2014 Share Posted May 7, 2014 Hello I tested my game on my mobile phone and discovered one issue:when I try to swipe down with my finger over the canvas object, the screen doesn't scroll down. Is this a general "issue" with the canvas object on mobile or something phaser specific?Does anybody know a simple way to enable swiping? Is it done with touchmove? Link to comment Share on other sites More sharing options...
stasuss Posted May 7, 2014 Share Posted May 7, 2014 May be this helps: game.canvas.addEventListener('mousewheel',function(event){ return false;}, false); Did not tried, just a concept. I think it s normal for canvas to capture the input. Link to comment Share on other sites More sharing options...
bali33 Posted May 21, 2015 Share Posted May 21, 2015 Hi, I have the same issue and the code above seems to not work as expected. How you guys would you "allow/activate" canvas scroll ? Thank you Link to comment Share on other sites More sharing options...
bali33 Posted May 21, 2015 Share Posted May 21, 2015 Hi, I tried this in my state create method but with no success - still unable to scroll my navigator page when over the canvasPhaser.Canvas.setTouchAction(game.canvas,"pan-x pan-y");Any idea ? Thank you Link to comment Share on other sites More sharing options...
utkiupe Posted May 22, 2015 Share Posted May 22, 2015 Hi guys, I have not tested but i am pretty sure canvas does not prevent touch to scroll your page. There might be some solution directly in phaser. Maybe an option somewhere that we have still not found ^^' Anyway, as I have the same issue and really need to have my project finalised and working so I came up with some kind of solution to handle the touch on the canvas so you can scroll the page when touching it... It is based on this site : http://www.devinrolsen.com/basic-jquery-touchmove-event-setup/ I have jQuery included on my project for many purpose, but I guess you can do pretty much the same without jQuery. So I created a function to handle the touch :var pageScroll=0,pageScrollOffset=0, lastTouchY=0;window.startTouchScroll = function(){ $('#app_canvas canvas').bind('touchmove',function(e){ e.preventDefault(); var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; var elm = $(this).offset(); var maxScroll = $(this).height(); var x = touch.pageX - elm.left; var y = touch.clientY - elm.top; if(lastTouchY!=0){ pageScrollOffset = lastTouchY-y; if (pageScroll+pageScrollOffset>$(document).height()-$(window).height()) pageScrollOffset=0; pageScroll += pageScrollOffset; if (pageScroll<0) pageScroll=0; } lastTouchY = y; if(x < $(this).width() && x > 0){ if(y < $(this).height() && y > 0){ $('html,body').scrollTop(pageScroll); } }}); $('#app_canvas canvas').bind('touchend',function(e){ e.preventDefault(); lastTouchY=0; });}and of course another one to disable thiswindow.endTouchScroll = function(){ $('#app_canvas canvas').unbind ('touchmove'); $('#app_canvas canvas').unbind('touchend');}So basically I use startTouchScroll after phaser is initialised.You might need to disable this, e.g. when you have a drag and drop, so you can use the endTouchScroll function, when starting the drag, and again startTouchScroll after the drop... It's not perfect, might be a little laggy but still better than nothing (°_°) Link to comment Share on other sites More sharing options...
Carlos Posted June 1, 2015 Share Posted June 1, 2015 Setting TouchEvent preventDefault to false will do it.game.input.touch.preventDefault = false; If you are dragging things around in your game you need to enable it while moving and then disable it again. samme 1 Link to comment Share on other sites More sharing options...
mycho Posted December 1, 2015 Share Posted December 1, 2015 Carlos, you are a champ, this works like a charm!Thank you from myself and our team. Link to comment Share on other sites More sharing options...
itknight4ever Posted December 29, 2015 Share Posted December 29, 2015 Setting TouchEvent preventDefault to false will do it.game.input.touch.preventDefault = false; If you are dragging things around in your game you need to enable it while moving and then disable it again.well I don't know why there are differences between devices. I am using xiaomi 2 , it doesn' work while it works on Huawei Honor perfectly. is this a bug or i fogot do anythin'? regards. Link to comment Share on other sites More sharing options...
itknight4ever Posted December 29, 2015 Share Posted December 29, 2015 Hi guys, I have not tested but i am pretty sure canvas does not prevent touch to scroll your page. There might be some solution directly in phaser. Maybe an option somewhere that we have still not found ^^' Anyway, as I have the same issue and really need to have my project finalised and working so I came up with some kind of solution to handle the touch on the canvas so you can scroll the page when touching it... It is based on this site : http://www.devinrolsen.com/basic-jquery-touchmove-event-setup/ I have jQuery included on my project for many purpose, but I guess you can do pretty much the same without jQuery. So I created a function to handle the touch :var pageScroll=0,pageScrollOffset=0, lastTouchY=0;window.startTouchScroll = function(){ $('#app_canvas canvas').bind('touchmove',function(e){ e.preventDefault(); var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; var elm = $(this).offset(); var maxScroll = $(this).height(); var x = touch.pageX - elm.left; var y = touch.clientY - elm.top; if(lastTouchY!=0){ pageScrollOffset = lastTouchY-y; if (pageScroll+pageScrollOffset>$(document).height()-$(window).height()) pageScrollOffset=0; pageScroll += pageScrollOffset; if (pageScroll<0) pageScroll=0; } lastTouchY = y; if(x < $(this).width() && x > 0){ if(y < $(this).height() && y > 0){ $('html,body').scrollTop(pageScroll); } }}); $('#app_canvas canvas').bind('touchend',function(e){ e.preventDefault(); lastTouchY=0; });}and of course another one to disable thiswindow.endTouchScroll = function(){ $('#app_canvas canvas').unbind ('touchmove'); $('#app_canvas canvas').unbind('touchend');}So basically I use startTouchScroll after phaser is initialised.You might need to disable this, e.g. when you have a drag and drop, so you can use the endTouchScroll function, when starting the drag, and again startTouchScroll after the drop... It's not perfect, might be a little laggy but still better than nothing (°_°)thanks for your brilliant work, but it won't work. actually after debug for a while i found it can't work if we bind the function when windows.startTouch. what i 've done is trigger it when the resouces and assets are ready and start the state. otherwise, there is no canvas can be found because $('#app_canvas canvas').length is 0.regards. Link to comment Share on other sites More sharing options...
daniele Posted March 2, 2016 Share Posted March 2, 2016 On 1/6/2015 at 4:05 PM, Carlos said: Setting TouchEvent preventDefault to false will do it. game.input.touch.preventDefault = false; If you are dragging things around in your game you need to enable it while moving and then disable it again. Hi everyone, I know this thread is rather old but I need some help! I'm trying to disable touchevent on a phaser canvas to make users able to scroll the webpage swiping down over canvas object, but I can't make Carlos tip work. This is my code var game = new Phaser.Game('100%', '100%', Phaser.CANVAS, 'game', {create: create}); function create() { game.input.touch.preventDefault = false; }; if I dump game object in console, game.input.touch.preventDefault is always true and phaser continues to capture swipe events. Hope someone can point me in the right direction; I'm new to phaser and I have to edit a phaser project written by another developer... Thanks Link to comment Share on other sites More sharing options...
MadDogTorx Posted April 14, 2016 Share Posted April 14, 2016 I discovered that the "touch-action: none" CSS style added to the canvas element by default was preventing swipe scrolling from working in embedded Phaser games on mobiles. To override this, I used the following code: function create() { Phaser.Canvas.setTouchAction(game.canvas, "auto"); // disable the default "none" game.input.touch.preventDefault = false; // etc etc... } samme 1 Link to comment Share on other sites More sharing options...
FlashyGoblin Posted June 24, 2016 Share Posted June 24, 2016 @MadDogTorx @rich Was this ever resolved? I would like to allow the user to scroll the page on mobile if they swipe up/down over the canvas, but also need to allow button input events. Thoughts? Link to comment Share on other sites More sharing options...
FlashyGoblin Posted July 18, 2016 Share Posted July 18, 2016 On 6/24/2016 at 1:24 PM, FlashyGoblin said: @MadDogTorx @rich Was this ever resolved? I would like to allow the user to scroll the page on mobile if they swipe up/down over the canvas, but also need to allow button input events. Thoughts? Still wondering if there is a solution for this. Where is Phaser disabling the ability to scroll the page on mobile? Link to comment Share on other sites More sharing options...
utkiupe Posted August 18, 2016 Share Posted August 18, 2016 hi @FlashyGoblin just passing by after meeting same kind of issues to see on my old post what solution we had so What I am doing is setting game.input.touch.preventDefault to false when I need to scroll the page (e.g. at the beginning of the game) and setting it to true when I need to move something in drag and drop I have another problem though with buttons. adding input events on mobile events are fired twice, as if there is a clic and a touch event. The workaround I have is to set game.input.touch.preventDefault game.input.touch.preventDefault to true onInputDown. I posted another thread, here : but no answers 'till now Link to comment Share on other sites More sharing options...
ps786 Posted November 18, 2016 Share Posted November 18, 2016 @MadDogTorx Thanks for the solution ... it worked for me. Link to comment Share on other sites More sharing options...
microcipcip Posted June 4, 2017 Share Posted June 4, 2017 @MadDogTorx Your solution does not work for me, all touch events for buttons stop working, and the game.input.touch.preventDefault set to false does absolutely nothing on my end. Is it possible that there is no fix for such a common (and in my opinion quite critical) problem? Link to comment Share on other sites More sharing options...
Guest Posted June 10, 2019 Share Posted June 10, 2019 guys, exist any example of this with Phaser 3? Thanks in advance! Link to comment Share on other sites More sharing options...
Aman Ahmed Posted September 3, 2019 Share Posted September 3, 2019 This worked for me Phaser.Canvas.setTouchAction(game.canvas, "auto"); // disable the default "none" game.input.touch.preventDefault = false; Link to comment Share on other sites More sharing options...
TTristan Posted February 6, 2020 Share Posted February 6, 2020 on desktop device, use this to allow mouse wheel: game.input.mouseWheel.preventDefault = false; Link to comment Share on other sites More sharing options...
Recommended Posts