Scrollable Text Box Tutorial not working on mobile

Phaser 3
1

Hello all,

I recreated the scrolling text box tutorial in my game. However, it is running a bit glitchy on mobile. For example, if I swipe up, the text first goes down for a second and then follows my finger up. You’ll see the problem if you open the tutorial on mobile. Any thoughts? I copied my code below.

var graphics = scene.make.graphics();

graphics.fillRect(x, y + 10, width, height - 20);

var mask = new Phaser.Display.Masks.GeometryMask(scene, graphics);

var text = scene.add.text(x + 20, y + 20, content, { 

  fontFamily: 'Assistant', 

  fontSize: '28px', 

  color: '#000000', 

  wordWrap: { width: width - 20 } 

}).setOrigin(0);

text.setMask(mask);

var minY = height - text.height - 20;

if (text.height <= height - 20) {

  minY = y + 20;

}

//  The rectangle they can 'drag' within

var zone = scene.add.zone(x, y - 3, width, height + 6).setOrigin(0).setInteractive({useHandCursor: true});

zone.on('pointermove', function (pointer) {

  if (pointer.isDown) {

    text.y += (pointer.velocity.y / 10);

    text.y = Phaser.Math.Clamp(text.y, minY, y + 20);

  }

});
2

I came up with a workaround where I made the zone draggable, and then reset its position on dragend. I then set a threshhold which prevents the jerky movement on mobile:

// The rectangle they can ‘drag’ within

var zone = scene.add.zone(x, y - 3, width, height + 6).setOrigin(0).setInteractive({useHandCursor: true, draggable: true});

scene.input.dragDistanceThreshold = 100;

zone.on('drag', function (pointer) {

 

  if (pointer.isDown) {

    text.y += pointer.velocity.y / 10;

    text.y = Phaser.Math.Clamp(text.y, minY, y + 20);

  }

})

  .on('dragend', () => {

    zone.x = x;

    zone.y = y - 3;

  });