Jump to content

Canvas not scrollable on mobile


christianstrang
 Share

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?

Link to comment
Share on other sites

  • 1 year later...

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

Link to comment
Share on other sites

  • 2 weeks later...
  • 6 months later...
  • 4 weeks later...

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

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.

Link to comment
Share on other sites

  • 2 months later...
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

  • 1 month later...

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

 

Link to comment
Share on other sites

  • 2 months later...
  • 4 weeks later...
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

  • 5 weeks later...

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

  • 3 months later...
  • 6 months later...
  • 2 years later...
  • 2 months later...
  • 5 months later...

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

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...