Touching object (button)

Phaser 3
1

Hi

I know there are a touch function, but i think it’s just on touched and pointer up.

I need to check if player hold (touching) a button. so i can call a function every x second.

dsgdf

And if player touching a button and move it’s touch position outside of button area, it’s will be detecting as pointerup.

How to do this ?

Thanks

2

Hey William,
I would create your own button class with code similar to the following:

export default class MyButton extends Phaser.GameObjects.Image
{
    constructor(scene, x, y, texture, frame = null)
    {
        super(scene, x, y, texture, frame);

        this.setInteractive();
        this.isDown = false;

        this.onPressed = null;
        this.onReleased = null;

        this.on('pointerdown', () => { this.isDown = true; });
        this.on('pointerup', () => { this.pointerUp(); });
        this.on('pointerout', () => { this.pointerUp(); });
    }

    pointerUp()
    {
        this.isDown = false;
        if(this.onReleased != null) this.onReleased();
    }

    update()
    {
        if(this.isDown && this.onPressed != null) this.onPressed();
    }
}

Now in your game’s class you can just do the following:

create()
{
    let button = new MyButton(this, x, y, texture);
    this.add.existing(button);
    button.onPressed = ()=>{
        console.log("BUTTON IS BEING PRESSED");
    };
    button.onReleased= ()=>{
        console.log("BUTTON WAS RELEASED");
    };
}

Hope it works for you!

1 Like
3

Thank you!

I need to make some changes on your script to make it working with my game.

class touchButton extends Phaser.GameObjects.Image {
constructor(scene, x, y, texture)
{
    super(scene, x, y, texture);
    scene.add.sprite(x, y, texture);
    this.setInteractive();
    this.isDown = false;

    this.onPressed = null;
    this.onReleased = null;

    this.on('pointerdown', () => { this.isDown = true; this.onPressed(); });
    this.on('pointerup', () => { this.pointerUp(); });
    this.on('pointerout', () => { this.pointerUp(); });
}

pointerUp()
{
    this.isDown = false;
    if(this.onReleased != null) this.onReleased();
}

}

I dont know if i use a bad method or not

4

No problem,

I think you have some redundancies here. For instance, the class that I provided overrides Phaser’s Image class, so you want to add that directly to your scene using scene.add.existing(new MyButton). This means that you do not need, scene.add.sprite(x, y, texture); within the Button class.

Also, I was under the impression that you needed a method that called a function for each frame the user held down the button. This makes an update loop somewhat necessary in your code, hence:

update()
{
    if(this.isDown && this.onPressed != null) this.onPressed();
}

I believe you could use Phaser’s built-in preUpdate method. Or in your main class, you can simply call the following:

create()
{
}

update()
{
    myButton.update();
}
1 Like
5

Thanks

this.onPressed() are never triggered inside update() function. and i avoid any functions that run continously that are not necessary.

this.onPressed() is same as “on touch start”, right ?

6

Agreed, anything that can be placed outside of an Update loop should be. However, in this instance, I was intending this.onPressed() to be called each frame the user had their finger/pointer pressed on the button.

If that’s not what you want and you want it to just be fired once at the start of the press, your above code should do the trick. (Then in an update loop in your main game you can just check for myButton.isDown if you want to detect whether or not it’s being held down.)

7

Great! Thank you, you really help me