Layht

Rotate group of bodies around an anchor point in Phaser

Recommended Posts

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 :)

rotation_example.png

Share this post


Link to post
Share on other sites

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');

}

 

Share this post


Link to post
Share on other sites

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 :wacko:

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

Share this post


Link to post
Share on other sites
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 :wacko:

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?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.