Rotating Pixijs Graphic with Viewport

[Dhruv]

I am trying to rotate a pixijs square from its center according to my mouse movements. I am using the pixi-viewport library. However, even though I set anchor to 0.5, the square does not rotate from its center, instead it rotates around another arbitrary point on the screen. However, when I remove "viewport.moveCenter(sprite.position.x+50, sprite.position.y+50);" from the animate function, the square rotates perfectly with my mouse position, but the viewport does not follow the square anymore. This is my code:

 

window.onload = () =>
{ 

    const app = new PIXI.Application({autoResize: true, resolution: devicePixelRatio});
    document.body.appendChild(app.view);
     
    // create viewport
    const viewport = new Viewport({
        screenWidth: window.innerWidth,
        screenHeight: window.innerHeight,
        screenworldWidth: 10000,
        screenworldHeight: 1000,
        interaction: app.renderer.plugins.interaction // the interaction module is important for wheel to work properly when renderer.view is placed or scaled
    });
     
    // add the viewport to the stage
    app.stage.addChild(viewport);

     
    // add a red box
    const sprite = viewport.addChild(new PIXI.Sprite(PIXI.Texture.WHITE));
    sprite.tint = 0xff0000;
    sprite.width = sprite.height = 100;
    sprite.position.set(500, 100);
    sprite.vy = 0;
    sprite.vx = 0;

    const sprite1 = viewport.addChild(new PIXI.Sprite(PIXI.Texture.WHITE))
    sprite1.tint = 0xff0000
    sprite1.width = sprite.height = 100
    
    sprite1.position.set(3000, 100)
    sprite1.vy = 0;
    sprite1.vx = 0;

    function Rotate(mx, my, px, py)
    {
        var self = this;
        var dist_Y = my - py;
        var dist_X = mx - px;
        var angle = Math.atan2(dist_Y,dist_X);
        //var degrees = angle * 180/ Math.PI;
        return angle; 
    }

    function keyboard(value) {
        let key = {};
        key.value = value;
        key.isDown = false;
        key.isUp = true;
        key.press = undefined;
        key.release = undefined;
        //The `downHandler`
        key.downHandler = event => {
          if (event.key === key.value) {
            if (key.isUp && key.press) key.press();
            key.isDown = true;
            key.isUp = false;
            event.preventDefault();
          }
        };
      
        //The `upHandler`
        key.upHandler = event => {
          if (event.key === key.value) {
            if (key.isDown && key.release) key.release();
            key.isDown = false;
            key.isUp = true;
            event.preventDefault();
          }
        };
      
        //Attach event listeners
        const downListener = key.downHandler.bind(key);
        const upListener = key.upHandler.bind(key);
        
        window.addEventListener(
          "keydown", downListener, false
        );
        window.addEventListener(
          "keyup", upListener, false
        );
        
        // Detach event listeners
        key.unsubscribe = () => {
          window.removeEventListener("keydown", downListener);
          window.removeEventListener("keyup", upListener);
        };
        
        return key;
      }
      
      let left = keyboard("ArrowLeft");
      let up = keyboard("ArrowUp");
      let right = keyboard("ArrowRight");
      let down = keyboard("ArrowDown");

      left.press = () => {
        sprite.vx = -5;
        sprite.vy = 0;
      };
      
      left.release = () => {
        if (!right.isDown && sprite.vy === 0) {
          sprite.vx = 0;
        }
      };
    
      up.press = () => {
        sprite.vy = -5;
        sprite.vx = 0;
      };
      up.release = () => {
        if (!down.isDown && sprite.vx === 0) {
          sprite.vy = 0;
        }
      };
    
      right.press = () => {
        sprite.vx = 5;
        sprite.vy = 0;
      };
      right.release = () => {
        if (!left.isDown && sprite.vy === 0) {
          sprite.vx = 0;
        }
      };
    
      down.press = () => {
        sprite.vy = 5;
        sprite.vx = 0;
      };

      down.release = () => {
        if (!up.isDown && sprite.vx === 0) {
          sprite.vy = 0;
        }
      };

    animate();
    function animate() {
        requestAnimationFrame(animate);     
        sprite.position.x += sprite.vx;
        sprite.position.y += sprite.vy;
        sprite.anchor.set(0.5);
        sprite.rotation = Rotate(app.renderer.plugins.interaction.mouse.global.x, app.renderer.plugins.interaction.mouse.global.y, sprite.position.x+50,  sprite.position.y+50);
        viewport.moveCenter(sprite.position.x+50, sprite.position.y+50);
        viewport.addChild(sprite);
        app.renderer.resize(window.innerWidth, window.innerHeight);
    }
     
    // activate plugins
    viewport

// GAME CODE
}

 

[jonforum]

I don't know how the view-port plugin work, but from what i am reading , it should work.
sprite.anchor.set(0.5);
sprite.rotation = value

Should work and make the rotation from the center !
Are you able to create a playground with your plugin ?

It maybe a behavior from the plugin your using ?

[Dhruv]

56 minutes ago, jonforum said:

I don't know how the view-port plugin work, but from what i am reading , it should work.
sprite.anchor.set(0.5);
sprite.rotation = value

Should work and make the rotation from the center !
Are you able to create a playground with your plugin ?

It maybe a behavior from the plugin your using ?

I am having trouble importing the pixi-viewport npm package onto a jsfiddle. However, I will leave both my html and js code here. It probably is a behavior from the plugin I'm using.

HTML:

<!doctype html>
<html>

<body>

    <script src="index.js"></script>
</body>

</html>

JS:

window.onload = () =>
{ 

    const app = new PIXI.Application({autoResize: true, resolution: devicePixelRatio});
    document.body.appendChild(app.view);
     
    // create viewport
    const viewport = new Viewport({
        screenWidth: window.innerWidth,
        screenHeight: window.innerHeight,
        screenworldWidth: 10000,
        screenworldHeight: 1000,
        interaction: app.renderer.plugins.interaction // the interaction module is important for wheel to work properly when renderer.view is placed or scaled
    });
     
    // add the viewport to the stage
    app.stage.addChild(viewport);

     
    // add a red box
    const sprite = viewport.addChild(new PIXI.Sprite(PIXI.Texture.WHITE));
    sprite.tint = 0xff0000;
    sprite.width = sprite.height = 100;
    sprite.position.set(500, 100);
    sprite.vy = 0;
    sprite.vx = 0;

    const sprite1 = viewport.addChild(new PIXI.Sprite(PIXI.Texture.WHITE))
    sprite1.tint = 0xff0000
    sprite1.width = sprite.height = 100
    
    sprite1.position.set(3000, 100)
    sprite1.vy = 0;
    sprite1.vx = 0;

    function Rotate(mx, my, px, py)
    {
        var self = this;
        var dist_Y = my - py;
        var dist_X = mx - px;
        var angle = Math.atan2(dist_Y,dist_X);
        //var degrees = angle * 180/ Math.PI;
        return angle; 
    }

    function keyboard(value) {
        let key = {};
        key.value = value;
        key.isDown = false;
        key.isUp = true;
        key.press = undefined;
        key.release = undefined;
        //The `downHandler`
        key.downHandler = event => {
          if (event.key === key.value) {
            if (key.isUp && key.press) key.press();
            key.isDown = true;
            key.isUp = false;
            event.preventDefault();
          }
        };
      
        //The `upHandler`
        key.upHandler = event => {
          if (event.key === key.value) {
            if (key.isDown && key.release) key.release();
            key.isDown = false;
            key.isUp = true;
            event.preventDefault();
          }
        };
      
        //Attach event listeners
        const downListener = key.downHandler.bind(key);
        const upListener = key.upHandler.bind(key);
        
        window.addEventListener(
          "keydown", downListener, false
        );
        window.addEventListener(
          "keyup", upListener, false
        );
        
        // Detach event listeners
        key.unsubscribe = () => {
          window.removeEventListener("keydown", downListener);
          window.removeEventListener("keyup", upListener);
        };
        
        return key;
      }
      
      let left = keyboard("ArrowLeft");
      let up = keyboard("ArrowUp");
      let right = keyboard("ArrowRight");
      let down = keyboard("ArrowDown");

      left.press = () => {
        sprite.vx = -5;
        sprite.vy = 0;
      };
      
      left.release = () => {
        if (!right.isDown && sprite.vy === 0) {
          sprite.vx = 0;
        }
      };
    
      up.press = () => {
        sprite.vy = -5;
        sprite.vx = 0;
      };
      up.release = () => {
        if (!down.isDown && sprite.vx === 0) {
          sprite.vy = 0;
        }
      };
    
      right.press = () => {
        sprite.vx = 5;
        sprite.vy = 0;
      };
      right.release = () => {
        if (!left.isDown && sprite.vy === 0) {
          sprite.vx = 0;
        }
      };
    
      down.press = () => {
        sprite.vy = 5;
        sprite.vx = 0;
      };

      down.release = () => {
        if (!up.isDown && sprite.vx === 0) {
          sprite.vy = 0;
        }
      };

    animate();
    function animate() {
        requestAnimationFrame(animate);     
        sprite.position.x += sprite.vx;
        sprite.position.y += sprite.vy;
        sprite.anchor.set(0.5);
        sprite.rotation = Rotate(app.renderer.plugins.interaction.mouse.global.x, app.renderer.plugins.interaction.mouse.global.y, sprite.position.x+50,  sprite.position.y+50);
        viewport.moveCenter(sprite.position.x+50, sprite.position.y+50);
        viewport.addChild(sprite);
        app.renderer.resize(window.innerWidth, window.innerHeight);
    }
     
    // activate plugins
    viewport

// GAME CODE
}

 

Edited December 28, 2019 by Dhruv

[jonforum]

it work on my side !!!?
am no understand your issue ? sorry.
The rotation are from center.
https://www.pixiplayground.com/#/edit/7LCZOSuDa0_e9YRw5CbDI

Edited December 28, 2019 by jonforum

[Dhruv]

I opened and ran the pixiplayground. When you rotate the mouse around the square it should turn a full 360 degrees. However, in this case, that does not happen.

[ivan.popelyshev]

I've modified playground example.

        sprite.rotation = 0;

        const p = sprite.toLocal(app.renderer.plugins.interaction.mouse.global);

        sprite.rotation = Math.atan2(p.y, p.x);

[Dhruv]

5 hours ago, ivan.popelyshev said:

I've modified playground example.

        sprite.rotation = 0;

        const p = sprite.toLocal(app.renderer.plugins.interaction.mouse.global);

        sprite.rotation = Math.atan2(p.y, p.x);

That fixed my issue. Thanks!

For learning purposes, what was the initial problem that caused my square not to rotate properly?

[ivan.popelyshev]

you didnt account for viewport shift. In my case, `toLocal` is actually works like "global - (viewport.position + sprite.position)". 

Bear in mind that "toLocal" also has downsides: you cant ask it to ignore a part of transform, that's why i set rotation to 0