Rotate group of bodies around an anchor point in Phaser

[Layht]

Hello, I have searched a solution for a problem for long time and didn't found, if someone have some ideas I am taking all x) did someone know if it's possible to rotate a group of bodies around an anchor point, I set some bodies for invisble walls and my objective is to turn them around by 90° around an anchor point, I know It must be not very comprehensive so I set up an Image to explain myself.

In the screen, I have 2 bodies and I want them to turn around the red dot what must be my anchor point, I know it's impossible in arcade so I tried in P2 physics and impossible to found any solution :/

 

Thanks for reading, feel free to leave a feedback 

[samid737]

Hi,I was looking for solutions for the exact same problem not a while ago.

If you are just looking for a way to rotate a group of sprites about a pivot :

https://phaser.io/examples/v2/sprites/pivot

I have worked out an example for you if you want to use arcade physics bodies that rotate about a centrepoint:

here is a test:

http://54.87.189.59/example/

If you want to use P2 physics and keep the bodies tangential, you could use lockconstraints:

http://54.87.189.59/example2/

if you need the javascript source:

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });

function preload() {
    game.load.image('arrow1', 'assets/sprites/arrow1.png');
    game.load.image('arrow2', 'assets/sprites/arrow2.png');

}

var arrow1;
var arrow2;
var pivotpoint;
function create() {

    game.stage.backgroundColor = '#3e5f96';
    game.physics.startSystem(Phaser.Physics.P2JS);


    pivotpoint=game.add.sprite(300,300);
    arrow1 = game.add.sprite(300, 300,'arrow1');
    arrow1.anchor.x=0.5;
    arrow1.anchor.y=0.5;

    arrow2 = game.add.sprite(400, 200,'arrow2');
    arrow2.anchor.x=0.5;
    arrow2.anchor.y=0.5;

    game.physics.p2.enable( [arrow1,arrow2,pivotpoint]);

    pivotpoint.body.static=true;

    game.physics.p2.createLockConstraint(pivotpoint, arrow1,[150, 0], 0);
    game.physics.p2.createLockConstraint(pivotpoint, arrow2,[0, 150], 0);

    arrow1.body.debug=true;
    arrow2.body.debug=true;
    pivotpoint.body.debug=true;

}

function update() {

    pivotpoint.body.rotation+=0.05;

}

function render() {
    game.debug.body(arrow1);
    game.debug.body(arrow2 );
     game.debug.body(pivotpoint);

    game.debug.geom(new Phaser.Point(pivotpoint.x, pivotpoint.y), '#ffff00');

}

 

[Layht]

Do you think It could be possible to rotate the bodies like the sprite ? I know I can't with arcade, mayble with body.angle 

Thank you very much for this code !!, it helps

[samid737]

7 minutes ago, Layht said:

Do you think It could be possible to rotate the bodies like the sprite ? I know I can't with arcade, mayble with body.angle 

Thank you very much for this code !!, it helps

I just updated my reply, I think it should be what you needed now... I forgot that the bodies themselves dont remain tangent to the centrepoint (in the arcade example). the second example sould be oke?

[Layht]

I saw that, oh my god thank you so much, you just find the solution !! 

[samid737]

by the way you don't really need the invisiblebodies group that I added in example2..(that was for example1, again I updated the code above)...