Pointer coordinates get off when page resized or scrolled

Phaser 3
1

I have my game in a div with an id that I pass to config. It renders fine.

In my game I can click and draw a rectangle using this.input.on(‘pointerdown’, (pointer)=>{ … })

But when I scroll the page which moves the game div up, or if I expand the width which centers the game div, the pointer coordinates are no longer correct. I click in my game and draw a rectangle and it starts to draw from the wrong origin. If I resize my window back to how it was initially, the coordinates are again correct.

I have tried pointer.worldX / Y but the result is the same.

I will soon try to make an example to show this.

2

I am facing a similar problem. Were you able to solve this problem?

3

There is a positionToCamera method, you can find it in the input manager for a scene.
input.activePointer.positionToCamera(theCameraItShouldUse).

4

Parent and Display canvas containment guidelines

5

I have had some success by making the phaser-parent div (the id of my canvas) have css position: absolute. It still floats around when I resize the screen because it is inside another div that is relatively positioned.

In the config I also added mode: Phaser.Scale.RESIZE which seems to make a difference. Sometimes I get a glitch but in most cases it now seems to work better.

6

Actually, I have to use scaleMode: phaser.Scale.FIT in my game, and there are button created using setInteractive(). The game is part of an angular app. On scrolling the whole page, the buttons of phaser game are not working properly i.e. the click area is not scrolled.

What can be done in this case?

1 Like