Pointer position not relative to world

Phaser 3
1

While using input.activePointer and any of pointer.x, worldX, pointer.position.x . Im not getting cursor actual position relative to camera/world. While using worldX i was updating it with cameras.main as parameter. The game has set ratio of 16:9 and if you have wider screen the game has “blackboxes” around, and phaser still calculates those as canvas

2

Show your code please.

3

Create()

this.test['cursor'] = this.add.image(0,0, 'crosshair').setOrigin(0.5, 0.5);

Update(); loop

this.test['cursor'].setPosition(this.cursors.pointer.x, this.cursors.pointer.y);

Update(); loop with worldX/Y

this.cursors.pointer.updateWorldPoint(this.cameras.main);
this.test['cursor'].setPosition(this.cursors.pointer.worldX, this.cursors.pointer.worldY);

Im using it on more places but this is my testing object

Primary problem is that both methods show same result, even tho game canvas is set to 16:9/1920:1080 but if parent window is wider ratio, it always counts with whole window, not only game canvas.

4

And what do you see? Does the sprite track the cursor or not?

5

The sprite is offset in X direction, the X is not relative to the game canvas but screen window

6

If pointer.x and pointer.y are also incorrect then this may be a Scale Manager problem.

7

Is there some good way to manage pointer accuracy? the game is set to run in 1920*1080 and scale canvas to keep 16:9 ratio, so if somebody has wider screen they get black bars around game, but thats managed by HTML/CSS canvas keeps its ratio. All tho cursor still reports coords like it is stretched.
Zoom of camera is set to default, scale of sprites in the game are x2 .

Game config:

const config = {
    type: Phaser.AUTO,
    width: 1920,
    height: 1080,
    scene: [Intro, Menu, Game, Ui, GameOver, LevelUp, Utils],
    fps: {
        forceSetTimeOut: true,
        // panicMax: 0,
        // smoothStep: false,
        target: 60
    },
    physics: {
        default: 'matter',
        arcade: {
            gravity: { y: 300 },
            debug: false,
            tileBias: 1,
        },
        matter: {
            gravity: { y: 2 },
            debug: false,
        }
    },
    plugins: {
    },
    pixelArt: true,
    callbacks: {
        postBoot: function (game) {
            game.canvas.style.height = '100%';
            game.canvas.style.width = '100%';
        }
    }
};
8

Remove this, remove the canvas CSS, and use scale mode FIT.

1 Like
9

Love you mate, thanks alot. This bugged my mind for long time :slight_smile:
:heart: thanks again

const config = {
    type: Phaser.AUTO,
    width: 1920,
    height: 1080,
    scene: [Intro, Menu, Game, Ui, GameOver, LevelUp, Utils],
    fps: {
        forceSetTimeOut: true,
        // panicMax: 0,
        // smoothStep: false,
        target: 60
    },
    physics: {
        default: 'matter',
        arcade: {
            gravity: { y: 300 },
            debug: false,
            tileBias: 1,
        },
        matter: {
            gravity: { y: 2 },
            debug: false,
        }
    },
    plugins: {
    },
    pixelArt: true,
    callbacks: {},
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH,
    }
};