Detecting doubleTap in PhaserJS

Question

I am a complete newbie in PhaserJS. I am trying to develop a game in PhaserJS where tapping the screen once should make the user avatar move on the screen and double-tapping should make it jump. However, I am not being able to figure out how to catch the double tap event. I have seen this tutorial in their official documentation, but that didn't work. When I am putting this line

game.input.onTap.add(onTap, this);

in the

function create(){
    .....
}

function, it is showing this error

Uncaught TypeError: Cannot read property 'add' of undefined

I am being able to detect single tap events using this code:

if(game.input.onTap && player.body.touching.down){
    player.setVelocity(-530);
}

I've read another thread where the members have commented that to detect double click, one should start a timer and check both the clicks are coming within a threshold value. However, I think this is not a fool-proof method and there must be a better way of doing it. Can anyone please help?

Edit: Relevant code:

<script type="text/javascript">
var width = 800;
var height = 600;

var config = {
    type: Phaser.AUTO,
    width: width,
    height: height,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y:300 },
            debug: false
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);

function preload (){
    this.load.image("sky", "{% static 'task_scheduler/assets/sky.png' %}");
    this.load.image("ground", "{% static 'task_scheduler/assets/platform.png' %}");
    this.load.image("star", "{% static 'task_scheduler/assets/star.png' %}");
    this.load.image("bomb", "{% static 'task_scheduler/assets/bomb.png' %}");
    this.load.spritesheet("dude", "{% static 'task_scheduler/assets/dude.png' %}", {frameWidth: 32, frameHeight: 48});
}

var platforms;
var player;
var cursors;
var stars;
var bombs;
var score = 0;
var scoreText;

function create (){
    //some other code here

    //mouse and touch
    this.input.onTap.add(onTap, this);
}

function onTap(pointer, doubleTap){
    if (doubleTap){
        player.setVelocityY(-530);
    }else{
        player.setVelocityX(160);
        player.anims.play('right', true);
    }
}

Can you share the full js file or at least the relevant part? — Chris Ghenea
@ChrisGhenea Added the code. Currently, the js is embedded in html file only. — Arka Ghosh

Krunal-Gadhiya Krunal-Gadhiya · Accepted Answer · 2018-04-29T12:07:07

function create (){
    //some other code here

    //mouse and touch
    this.input.onTap.add(onTap, this);
}

Here you should use game.input.onTap.add(onTap, this); because this would reference to context from which create function is called. So, this wouldn't have property add and other properties that are available with game variable.

As far as the Double Tap is concerned that would be detected by phaser. I don't think you need to write any explicit code for that. onTap function would work just fine.

Detecting doubleTap in PhaserJS

1 Answers