Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

How to rotate multiple sprites as one?


TufanMeric
 Share

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

Screenshot_95.png.43d8c3b58a5e7559a2b686230c3f3a8b.png

and I want to be able to rotate it like this

Screenshot_96.png.4809e26ff8fe149b533cf82d75038982.png

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;
  }
}

 

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.

Screenshot_99.png.79f385e83c8e34c05bfc1dcb27697b49.png

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

c.gif.5f63179369076f24d9514e865d09a39b.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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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