Categories
Debugging Programming

Phaser 3 Touch Scroll on Mobile

While developing Math Command I ran into an issue where mobile users could not scroll the page. It turns out Phaser 3 captures all touch events on the canvas which prevents page scrolling.

The root cause is that Phaser automatically calls “event.preventDefault()” on all touch events. A workaround is to set “game.input.touch.capture” to false and manually call “pointer.event.preventDefault()”. This feels a little hacky but it will enable scrolling while touching the canvas on mobile devices.

var config = {
    type: Phaser.AUTO,
    parent: 'game',
    width: 800,
    height: 600,
    input: {
        touch: {
            capture: true
        }
    },
    scene: {
        create: create
    }
};

var game = new Phaser.Game(config);

function create () {
  // This prevents Phaser from applying event.preventDefault on all events
  game.input.touch.capture = false;

  var rect = this.add.rectangle(200, 200, 100, 100, 0xff0000);
  rect.setInteractive();
  rect.on('pointerup', (pointer) => {
    console.log('Pointer Up!');

    // Ensure event.preventDefault is added as it is no longer added automatically
    pointer.event.preventDefault();
  });
}

Setting capture to false in the config will also enable scroll in Chrome but will cause weird behavior on mobile devices. This is because the setting completely disables the manager instead of just the “event.preventDefault()” call. See https://github.com/photonstorm/phaser/blob/v3.22.0/src/input/touch/TouchManager.js#L246

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.