Jump to content

How to rotate multiple sprites as one?


Recommended Posts

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.


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

    this.container = new PIXI.Container();

    this.body = new PIXI.Sprite(
    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(
    this.hands.x = x;
    this.hands.y = y - 40;
    this.hands.anchor.x = 0.5;
    this.hands.anchor.y = 0.5;

    this.id = id;


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


Link to comment
Share on other sites

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.



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(
entity.container.rotation = rot;

Edit: here's a gif


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...