PhaserJS: After Rotation of camera dragging a Sprite gives strange coords

Question

Basically the problem is that after you rotate the camera, the points that are given as arguments in the callback for dragging are not what I expected. I'm guessing I have to Rotate the given points also but I just couldn't.

Can Someone explain what is going on, is this some kind of bug or what should I do in order the sprite to follow the mouse cursor?

Easiest way to explain the problem is to reproduce it:

1) Go to Phaser Example Runner

2) Copy- Paste this code:

var config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    scene: {
        preload: preload,
        create: create
    }
};

var game = new Phaser.Game(config);

function preload ()
{
    this.load.image('eye', 'assets/pics/lance-overdose-loader-eye.png');
}

function create ()
{
    var image = this.add.sprite(200, 300, 'eye').setInteractive();

    this.cameras.main.setRotation(Math.PI);
    image.on('pointerover', function () {

        this.setTint(0x00ff00);

    });

    image.on('pointerout', function () {

        this.clearTint();

    });

    this.input.setDraggable(image);

    this.input.on('dragstart', function (pointer, gameObject) {

        gameObject.setTint(0xff0000);

    });

    this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
    console.log(`x: ${dragX}, y: ${dragY}`);
        gameObject.x = dragX;
        gameObject.y = dragY;

    });

    this.input.on('dragend', function (pointer, gameObject) {

        gameObject.clearTint();

    });
}

3) Open the console, drag around the Eye and look at what coordinates are given.

4) If you remove line 24 (the rotation of the camera) Everything works as expected.

(The example is taken from Phaser 3 Official examples and a bit changed for the bug)

Is the issue that you're expecting the coordinates to be the same when the camera is rotated vs when the camera is not rotated? — brae
The issue is that I can't make the sprite follow the mouse cursor once the camera is rotated. I tried several things but in the end I decided to give the clear example (without any of my code). My biggest problem is that I can't understand the idea of what is happening to the coordinates once the camera is rotated. — chnging

brae brae · Accepted Answer · 2019-08-27T14:24:19

According to Phaser's API Documentation on the setRotation() method, the rotation given in radians applies to everything rendered by the camera. Unfortunately, your pointer isn't rendered by the camera so it doesn't get the same rotated coordinates. Not sure if this is a bug with the library or just a poorly documented exception, but I believe there is a workaround.

Create 2 variables to hold an initial position and a final position:

var image = this.add.sprite(200, 300, 'eye').setInteractive();
var initial = [];
var final = [];

Populate the initial position in your .on('dragstart') method:

this.input.on('dragstart', function (pointer, gameObject) {
    initial = [
        gameObject.x,
        gameObject.y,
        pointer.x,
        pointer.y
    ];
    gameObject.setTint(0xff0000);
});

Then, populate the final variable in your .on('drag') method:

this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
    final = [
        gameObject.x, // not necessary but keeping for variable shape consistency
        gameObject.y, // not necessary but keeping for variable shape consistency
        pointer.x,
        pointer.y
    ];

    gameObject.x = initial[0] + (initial[2] - final[2]);
    gameObject.y = initial[1] + (initial[3] - final[3]);
});

All we're doing here is keeping track of the change in pointer position and mimicking that change in our gameObject.

PhaserJS: After Rotation of camera dragging a Sprite gives strange coords

1 Answers