1

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?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
Improve this question
1

2 Answers 2

Reset to default
0

the solution is to set the pan direction to "DIRECTION_ALL".

because the default pan direction in hammer is horizontal. https://github.com/hammerjs/hammer.js/blob/master/src/hammer.js#L93

Improve this answer
1
  • is it how you should declare it ? var mcCompass = new Hammer( target,{ inputClass: Hammer.TouchMouseInput, direction: Hammer.DIRECTION_ALL }); It doesn't seems to do anything for me.
    – Lego
    Commented Feb 16, 2022 at 16:47
0

Working answer (for me) is given in the other given thread :

you need to specify recognizers Hammer.Pan

https://github.com/hammerjs/hammer.js/issues/1272

var mcCompass = new Hammer(
target, 
{
    inputClass: Hammer.TouchMouseInput,
    recognizers: [
        [Hammer.Pan]
    ]
});
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.