Jump to content

Tap, double tap and buttons


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 post
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 post
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 post
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 post
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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...