Tap, double tap and buttons

[Conflux]

Clicking a button is activating onTap event after the button and doubleTap activates single tap... Why is that happening? How can i fix it? 

 

statemanager.play = function(game)
{
};

var map;
var player;
var layer;
var jbut;

function onTap(pointer, doubleTap)
{
	if(doubleTap)
	{
	}
	else
	{
		if(player.body.velocity.x == 0)
			player.body.velocity.x = 100;
		else
			player.body.velocity.x = player.body.velocity.x * -1;
	}
}

function jump()
{
	player.body.velocity.x = player.body.velocity.x * -1; //gambiarra!!!
	player.body.velocity.y = -350;
}

statemanager.play.prototype = {
	preload: function() {
		this.load.tilemap('ht', 'maps/happytown.json', null, Phaser.Tilemap.TILED_JSON);
		this.load.image('chao', 'assets/happy town/ground.png');
		this.load.image('plataforma', 'assets/happy town/plat1.png');
		this.load.image('bg', 'assets/happy town/bg.png');
		this.load.image('jumpbut', 'assets/jump.png');
		this.load.atlasJSONArray('dog', 'assets/dogsheet.png', 'assets/dogsheet.json');
	},
	create: function() {
		this.physics.startSystem(Phaser.Physics.ARCADE);
		this.stage.backgroundColor = '#000000';
		bg = this.add.tileSprite(0, 0, 1600, 700, 'bg');
		bg.fixedToCamera = true;
		map = this.add.tilemap('ht');
		map.addTilesetImage('chao');
		map.addTilesetImage('plataforma');
		map.setCollisionByExclusion([]);
		layer = map.createLayer('camada1');
		layer.resizeWorld();
		this.physics.arcade.gravity.y = 500;
		player = this.add.sprite(10, 120, 'dog');
		player.animations.add('idle', Phaser.Animation.generateFrameNames('Idle (', 1, 10, ').png'), 5, true);
		player.animations.play('idle');
		this.physics.enable(player, Phaser.Physics.ARCADE);
		player.body.collideWorldBounds = true;
		player.body.setSize(54, 47, 0, -10);
		this.camera.follow(player);
		this.input.onTap.add(onTap, this);
		jbut = this.add.button(750, 550, 'jumpbut', jump, this);
		jbut.fixedToCamera = true;
	},
	update: function() {
		this.physics.arcade.collide(player, layer);
	}
};

 

[Arcanorum]

This is intended behaviour. A double tap natually must have a single tap first. See this example. https://phaser.io/examples/v2/input/on-tap

To get the kind of double tap that you want, you will have to do it yourself by starting a timer on the first tap and checking if the next tap is within a time threshold for it to be considered a double tap, which is what I had to do before double tap was a feature at all.

Also, the running of button callbacks and input events are independent. The this.input.onTap.add(onTap, this); will run your onTap callback any time there is a tap, on any part of the game, whether it is also over a button or not.

[Conflux]

On 10/02/2017 at 11:50 AM, Arcanorum said:

This is intended behaviour. A double tap natually must have a single tap first. See this example. https://phaser.io/examples/v2/input/on-tap

To get the kind of double tap that you want, you will have to do it yourself by starting a timer on the first tap and checking if the next tap is within a time threshold for it to be considered a double tap, which is what I had to do before double tap was a feature at all.

Also, the running of button callbacks and input events are independent. The this.input.onTap.add(onTap, this); will run your onTap callback any time there is a tap, on any part of the game, whether it is also over a button or not.

How do i conciliate tapping and buttons, then?  

[Arcanorum]

Good question. I couldn't find an immediately obvious answer. What I tried looking for was some way to make a button 'capture' input events so that other input events aren't triggered, but there doesn't seem to be anything like that.

Hopefully someone else reading this will know of an elegant solution. There is no way that you are the first person with this requirement.

[Conflux]

bump

[rroylance]

Something along these lines ? (pseudo/untested code)

function onInputUp(button, pointer, isOver) {
    if (isOver) {
        if (button.data.lastClickTime === null) {
            button.data.lastClickTime = this.game.time.now;
        } else if (this.game.time.now - button.data.lastClickTime < 300) { //300 meaning tapping twice within 300 milliseconds
            console.log('DOUBLE CLICK!');
        }

        return;
    }

    button.data.lastClickTime = null;
}

jbut = this.add.button(750, 550, 'jumpbut', jump, this);
jbut.fixedToCamera = true;
jbut.data.lastClickTime = null;
jbut.events.onInputup.add(onInputUp, this);

EDIT) I feel like I've misunderstood where this is at now... you need to know how to have an anywhere tap events that are not called when you tap a button.

What you could do in that case is setup your buttons onInputDown to set a flag saying it was a button then in your onTap check and reset that flag (again, untested...)?

var buttonWasPressed = false;

function onTap(pointer, doubleTap)
{
    if (buttonWasPressed) {
        buttonWasPressed = false;
        return;
    }
    ....
}

function onInputDown(button, pointer, isOver) {
    if (isOver) {
        buttonWasPressed = true;
    }
}

jbut.events.onInputDown.add(onInputDown, this);

 

[Conflux]

21 hours ago, UncleAcid said:

Something along these lines ? (pseudo/untested code)

function onInputUp(button, pointer, isOver) {
    if (isOver) {
        if (button.data.lastClickTime === null) {
            button.data.lastClickTime = this.game.time.now;
        } else if (this.game.time.now - button.data.lastClickTime < 300) { //300 meaning tapping twice within 300 milliseconds
            console.log('DOUBLE CLICK!');
        }

        return;
    }

    button.data.lastClickTime = null;
}

jbut = this.add.button(750, 550, 'jumpbut', jump, this);
jbut.fixedToCamera = true;
jbut.data.lastClickTime = null;
jbut.events.onInputup.add(onInputUp, this);

EDIT) I feel like I've misunderstood where this is at now... you need to know how to have an anywhere tap events that are not called when you tap a button.

What you could do in that case is setup your buttons onInputDown to set a flag saying it was a button then in your onTap check and reset that flag (again, untested...)?

var buttonWasPressed = false;

function onTap(pointer, doubleTap)
{
    if (buttonWasPressed) {
        buttonWasPressed = false;
        return;
    }
    ....
}

function onInputDown(button, pointer, isOver) {
    if (isOver) {
        buttonWasPressed = true;
    }
}

jbut.events.onInputDown.add(onInputDown, this);

 

Nice, this shall work, thank you, I'll post the result after i test(can't do it now).

[rroylance]

22 minutes ago, Conflux said:

Nice, this shall work, thank you, I'll post the result after i test(can't do it now).

You'll probably run into issues because onTap is not called if you don't release quick enough (not a tap)... honestly, what I would do is use a background and add onInputDown and onInputUp to it to handle the tap and double tap (using time.now and lastClickTime and timers for figuring out if it's one or the other) avoiding the global input.onTap. Then you also don't have to worry about clicking buttons counting as a tap or not as the button is covering the background and therefore the background doesn't get the event...

[Conflux]

On 15/02/2017 at 3:46 PM, UncleAcid said:

You'll probably run into issues because onTap is not called if you don't release quick enough (not a tap)... honestly, what I would do is use a background and add onInputDown and onInputUp to it to handle the tap and double tap (using time.now and lastClickTime and timers for figuring out if it's one or the other) avoiding the global input.onTap. Then you also don't have to worry about clicking buttons counting as a tap or not as the button is covering the background and therefore the background doesn't get the event...

Yeah, this solution has some weird behavior, it was working almost perfectly, then i changed one sprite image(no code) and now it doesn't work anymore. I think I'll drop that project, i hate mobile games anyways, was doing that just as a test.