Jump to content

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

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

}

 

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?

Link to post
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...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...