pointerover and pointerdown events

Phaser 3
1

Phaser newbie here, so I apologize if this question has been asked before.

Tried adding “pointerover” and “pointerdown” listeners to render X/Y coordinates of the mouse to a text object when an object is clicked on or hovered over.

What I noticed is that the event gets triggered when the pointer is way outside the bounding box, as rendered in debug mode. I would expect the event to be triggered only when you cross the boundary made visible in debug mode.

I would appreciate it if someone can “point” me in the right direction :wink:

2

:wave:

Can you show the code and a screenshot?

4

It seems like there is a disconnect between what debug mode outline and actual position of event in the case where setSize and setOffset is called on the object:

when I call setSize and setOffset

when I do not call setSize and setOffset

Perhaps I need to look into interactive handlers to customize the bounding box rather than playing with size and offset, but this is still confusing to me.

Thanks!

class Example extends Phaser.Scene {
    constructor() {
        super();
    }

    preload() {
        this.load.image('pig', 'assets/imgs/PigWingsUp.png');
    }

    create() {
        const pig = this.physics.add.sprite(70, 60, 'pig');
        //pig.setSize(100,100);
        //pig.body.setOffset(50, 90);
        
        pig.setInteractive();
        const position_text = this.add.text(100, 0, 'Hello');

        pig.on('pointerover', (e)=>{position_text.setText(JSON.stringify(e.position))});
    }

}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    pixelArt: true,
    backgroundColor: "#5DACD8",
    scene: Example,
    physics: {
        default: 'arcade',
        arcade: {
            debug: true
        }
    },
};

const game = new Phaser.Game(config);
5

With sprites and images you shouldn’t use setSize() because those dimensions represent the texture frame (i.e., constant). You can use setDisplaySize() or setScale().

The physics body is unrelated to pointer input so body.setOffset() won’t affect that. To adjust the hit area you should pass a rectangle to setInteractive():

pig.setInteractive(
  new Phaser.Geom.Rectangle(0, 0, 16, 16),
  Phaser.Geom.Rectangle.Contains
);

// Show the hit area
this.input.enableDebug(pig);