Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Tap, double tap and buttons


Conflux
 Share

Recommended Posts

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);
	}
};

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?  

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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);

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...