Camera Rotation + Sprite Dragging

Phaser 3
1

Hi,

So I set my main camera to be rotated at 180 degrees, which turns around the world and works fine but now when I use the dragging input, the dragging coords that are reported are not as I expected. I’m guessing that is because I don’t understand exactly how the rotation works even though I tried to convert the coords but with now luck.

Can someone give me an example function how to conver the points? Or is there any easier solution for my problem?

Here is a bit more Info:

I have a game that is with 450px width and 600px height. I use this.cameras.main.setRotation(Math.PI); to rotate the camera. But once I rotate the camera the most right point of the view is x = 140, and the most left point is x=-310. I could come up with some formula to convert exactly those kind of rotation and points but I just can’t understand why the numbers are 140 and -310?

2

Here is an example code of what I mean, you can open the console and see the values of x and y, and then comment line 24 and see them again.

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();

    });
}

You can run it here (Don’t forget to copy- paste the above code)
Example

3

Welcome hbk,
It is doing that because it is using the viewport’s x and y without accounting for the camera’s rotation. An easy solution is to take the width/height of the screen and subtract the pointer’s x and y, which will give you the inverted position. Here’s some sample code:

var config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    width: 400, height: 400,
    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.prevPos = {x: pointer.x, y: pointer.y};
        gameObject.setTint(0xff0000);
    });

    this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
        let newPos = {x: pointer.x, y: pointer.y};
        gameObject.x += gameObject.prevPos.x - newPos.x;
        gameObject.y += gameObject.prevPos.y - newPos.y;
        gameObject.prevPos = newPos;
    });

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

        gameObject.clearTint();

    });
}
4

Thank you for your time and answer!