Prevent clicking while scrolling

Phaser 3
1

I have some game objects with pointerup events. The camera can also be scrolled if the pointer is moved while the mouse button is down. How can I prevent the pointerup event to be fired on my game objects when I release the camera scrolling? Is there some sort of click event that I can use on my game objects instead, or perhaps I can prevent pointerup to be fired after a scroll somehow?

2

Hi,
It depends on how you implemented your pointer eventListener.
There is some preventDefault options:
https://newdocs.phaser.io/docs/3.54.0/Phaser.Input.Mouse.MouseManager#preventDefaultUp

Show us an example of your code for better help

3

Or decide based on getDuration().

4

getDuration is an idea, but it wouldn’t be very scalable if I have to check for that each place I have a pointerup listener.

I’m not completely sure how I can use preventDefaultUp. But I’ll show how my code works. https://codepen.io/orjandh/pen/zYwreNK

I should be able to change my scrolling logic if that can help solve the problem.

5

You think Phaser is psychic? Of course you need to tell it exactly what each listener needs to do.
You want a ‘dont react on pointerup if pointerdown and moved’. As far as I know, that doesn’t exist :slight_smile:

6

Fair enough. Thanks for the help.

7

With a flag, you can handle what you want…

var SceneA = new Phaser.Class({

    Extends: Phaser.Scene,

    initialize:

    function SceneA ()
    {
        Phaser.Scene.call(this, { key: 'sceneA' });
    },

    preload: function ()
    {
        this.load.image('water', 'https://raw.githubusercontent.com/photonstorm/phaser3-examples/master/public/assets/textures/water.png');
      this.load.image('button', 'https://raw.githubusercontent.com/photonstorm/phaser3-examples/master/public/assets/sprites/button-bg.png');
    },

    create: function ()
    {
        this.add.sprite(0, 0, 'water').setOrigin(0, 0);
      
      this.add.sprite(100, 100, 'button')
        .setScale(0.5)
        .setInteractive()
        .on('pointerup', (e) => {
        // check camera scrolling flag
        if (this.camIsScrolling === true){
            return;
          }
            txt.setVisible(true);
          setTimeout(() => {
            txt.setVisible(false);
          }, 2000);
      });
      
      var txt = this.add.text(100, 100, "Clicked").setOrigin(0.5, 0.5).setVisible(false);

      this.cameras.main.setBounds(0, 0, 1000, 200);
      this.cameras.main.scrollX = 100;

        this.input.on('pointermove', function (p) {
            if (!p.isDown) return;
          this.camIsScrolling = true;
            var cam = this.cameras.main;
            cam.scrollX -= (p.x - p.prevPosition.x)
        }, this);
      // Handling flag for camera scroll
        this.input.on('pointerup', function (p) {
          if (this.camIsScrolling === true){
            this.camIsScrolling = false;
          }
        }, this)
    }
});


var config = {
    type: Phaser.AUTO,
    width: 200,
    height: 200,
    backgroundColor: '#000000',
    parent: 'phaser-example',
    scene: [ SceneA]
};

var game = new Phaser.Game(config);
1 Like
8

If you mean the pointer may be no longer over the game object when the button is released, you can look at the localX, localY arguments in the event handler.

9

Using a flag might be the most robust way to handle this, thanks for the suggestion.

10

With a flag, you can handle what you want…

where would we be without bits … :smirk: :relaxed: true dat