Delay in y-axis pan event

geotheory commented 3 years ago

The following script is a basic navigation that enforces perpendicular motion (left-right-up-down) in a Phaser-based app. My problem is a significant delay in y-direction pan events triggering, which renders the app very difficult to use. This definitely seems an event problem rather than parameter sensitivity as adjusting parameters has no effect on the delay.

Notes:

x-axis pan is immediately detected
when transitioning a single gesture from x-pan to y-pan, the latter has no delay
when initiating a new y-axis pan (up or down) there is a significant delay (~0.5s) before the event triggers.

Any ideas how to workaround this? Here is a working example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//cdn.jsdelivr.net/npm/phaser@3.52.0/dist/phaser.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/phaser@3.52.0/dist/phaser-arcade-physics.min.js"></script> -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js'></script>
</head>
<body>
<div id="game-area"></div>
<script>

var config = {
    parent: 'game-area', type: Phaser.AUTO, width: 800, height: 600,
    backgroundColor: '#aaa', scene: { create: create, update: update }
}

var player;

function create () {
    var light_wall_graphics = this.add.graphics({ fillStyle: { color: 0xffff00 } });
    player = new Phaser.Geom.Rectangle( 400, 300, 50, 50 );
    player = light_wall_graphics.fillRectShape(player);
}

function update () {

    if ( Math.abs(g.x) > 1 ) {
        player.x += Math.sign(g.x) * 10;
        g = {"x": 0, "y": 0 };  // reset
    }

    if ( Math.abs(g.y) > 1 ) {
        player.y += Math.sign(g.y) * 10;
        g = {"x": 0, "y": 0 };
    }
}

var game = new Phaser.Game(config, 'game-area');

// hammer listener
var g = {"x": 0, "y": 0 }
var target = document.getElementById('game-area');
var hammertime = new Hammer(target, { velocity: 0.1, threshold: 0 });
hammertime.on('pan', function(ev) { g.x += ev.velocityX; g.y += ev.velocityY; });

</script>
</body>
</html>

KS-CleverCopter commented 3 years ago

I'm facing the exact same issue. Any pointers would be great.

f4irline commented 3 years ago

Same issue here!

geotheory commented 3 years ago

I gave up on hammerjs in the end. Dead project and I realised what I needed was achievable with recent core javascript improvements.

bennlich commented 2 years ago

@geotheory @f4irline @KS-CleverCopter It turns out this is because hammer.js is only configured for x-axis pan by default (I don't know why -- probably something to do with default scrolling behavior). To remove the delay from y-axis pan, try this:

var hammertime = new Hammer(myContainer, {
  recognizers: [
    [Hammer.Pan]
  ]
})

This works because the Hammer.Pan gesture recognizer is configured for Hammer.DIRECTION_ALL by default.

hammerjs / hammer.js

Delay in y-axis pan event #1272