Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Delay in y-axis pan event #1272

Open
geotheory opened this issue Feb 18, 2021 · 4 comments
Open

Delay in y-axis pan event #1272

geotheory opened this issue Feb 18, 2021 · 4 comments

Comments

@geotheory
Copy link

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
Copy link

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

@f4irline
Copy link

Same issue here!

@geotheory
Copy link
Author

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

@bennlich
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@bennlich @geotheory @f4irline @KS-CleverCopter