christianstrang

Canvas not scrollable on mobile

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Hi,

 

I tried this in my state create method but with no success - still unable to scroll my navigator page when over the canvas

Phaser.Canvas.setTouchAction(game.canvas,"pan-x pan-y");

Any idea ?

 

Thank you

Share this post


Link to post
Share on other sites

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 this

window.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 (°_°)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 this

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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites
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? 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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.