How to rotate multiple sprites as one?

[TufanMeric]

I want to rotate player's both body and hands simultaneously but i couldn't figure out how to do it.

My player looks like this

and I want to be able to rotate it like this

The body and hands are different sprites in a container, everything gets weird when I try to rotate (or move) the container.

Player.js

class Player {
  constructor(game, id, x, y) {
    this._game = game;

    this.container = new PIXI.Container();

    this.body = new PIXI.Sprite(
      PIXI.Loader.shared.resources['assets/player-1.png'].texture
    );
    this.body.x = x;
    this.body.y = y;
    this.body.anchor.x = 0.5;
    this.body.anchor.y = 0.5;

    this.hands = new PIXI.Sprite(
      PIXI.Loader.shared.resources['assets/player-1-hands.png'].texture
    );
    this.hands.x = x;
    this.hands.y = y - 40;
    this.hands.anchor.x = 0.5;
    this.hands.anchor.y = 0.5;

    this.id = id;

    this.container.addChild(this.hands);
    this.container.addChild(this.body);
    this._game.camera.addChild(this.container);
  }

  updatePosition(x, y) {
    this.body.x = x;
    this.body.y = y;
    this.hands.x = x;
    this.hands.y = y - 40;
  }
}

 

[ivan.popelyshev]

its rotating relatively to container position. Set container position to (x,y) and remove those variables from positions of all children.

 

Welcome to Flash world.

[TufanMeric]

7 minutes ago, ivan.popelyshev said:

its rotating relatively to container position. Set container position to (x,y) and remove those variables from positions of all children.

Now the container rotates around a circle instead of the center of the body

[ivan.popelyshev]

You did something wrong, it should work. Wanna upload a demo on pixiplayground.com or codepen/jsfiddle?

[TufanMeric]

17 minutes ago, ivan.popelyshev said:

You did something wrong, it should work. Wanna upload a demo on pixiplayground.com or codepen/jsfiddle?

Yes, you're right, adding anchors to body/hands fixed it but now i can't rotate it properly. Red box is where my mouse is.

Ticker:

function rotateToPoint(mx, my, px, py) {
  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;
}
const rot = rotateToPoint(
  this.app.renderer.plugins.interaction.mouse.global.x,
  this.app.renderer.plugins.interaction.mouse.global.y,
  this.camera.position.x,
  this.camera.position.y
);
entity.container.rotation = rot;

Edit: here's a gif

[ivan.popelyshev]

atan2 returns 0 for (x=1, y=0) , its RIGHT direction, that means your character with rotation=0 has to look to the right. Of course people usually make it look down, so you have to add or subtract MATH.PI/2  from atan2 result

[TufanMeric]

2 minutes ago, ivan.popelyshev said:

atan2 returns 0 for (x=1, y=0) , its RIGHT direction, that means your character with rotation=0 has to look to the right. Of course people usually make it look down, so you have to add or subtract MATH.PI/2  from atan2 result

Thanks again, guess I'm bad at maths.

[ivan.popelyshev]

7 minutes ago, TufanMeric said:

Thanks again, guess I'm bad at maths.

It comes with experience, the more graphics stuff you make the deeper you understand stuff learned in high school.