Pointerdown event returns weird pointer coordinates when on Phaser.Scale.FIT scale mode

Phaser 3
1

Hi,
I’m not sure if this is a bug or is it that I’m doing something wrong:
I have this:

var config = {
    type: Phaser.AUTO,
    parent: gameConfig.parentId,
    scale: {
        width: screen.width,
        height: screen.height,
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH,
        autoRound: true,
    },
    render: {
        transparent:true,
    },
    scene: [Scene01(gameConfig.mainScnConfig)]
};
var game = new Phaser.Game(config);

And the on the scene create function I do:

  //...
  this.input.on('pointerdown', onPointerDown);
}

function onPointerDown(pointer, currentyOver) {
    console.log('pointerdown', pointer.x, pointer.y);
}

The pointer x and y are completely off. Please help!

2

Maybe you are just confusing pointer.x and pointer.worldX?

The way you have it now should return {x: 0, y: 0}, if you click the top left corner of the canvas and {x: gameWidth, y: gameHeight} if you click on the bottom right corner of the canvas.

3

No, pointer.x and pointer.worldX have the same values.

And in my case on the top left they return {x:686.4, y:440.8} and on the bottom right {x:1233.6, y:638.3} :anguished: . Width and height are set to screen width and height which in my monitor should be 1920x1080 pixels

What I also find weird is that if I click outside of the canvas the event is fired too

4

Ok. So then maybe something in your html or css file is wrong? Because your GameConfigs seems to be right.

I once made a simple phaser template which uses the same setting. Maybe it helps taking a loot at it?

5

Oh no I see something! Maybe you just have to put the parent inside the scale object?

6

Thanks a lot Yannick! You gave the clue. It was the css. I forgot to remove this property from the canvas CSS from a previous test I was doing (stupid of me!!)

border: solid 1000px white;

I removed it and it works!

1 Like