Rotating a sprite.body around the point with keeping the orientation

[BunBunBun]

I want to move the arcade.physics.body around the point like this: (with keeping the orientation of the platform)

 

first way: If to change the pivot of sprite and use angularVelocity of the sprite will change the angle also.

second way: also I tried to move it via cos and sin:

theta += rotateSpeed;
if(theta >= 360) theta = -360;
rad = theta * Math.PI/180;
difX = startPositionX - obj.body.x;
difY = startPositionY - obj.body.y;		

obj.body.velocity.x = Math.round(difX + R * Math.cos(rad));
obj.body.velocity.y = Math.round(difY + R * Math.sin(rad));

but in that case I can't stop the moving of the platform in the game, for example, I want to pause the moving every 90 degrees so player need enough time to get up to it.

Any ideas to do it?

[symof]

You need to use math to calculate a point on a circle

If nobody helps until Monday or you can't figure it out, then I can give you the code(I'm on my phone now and don't have access to a laptop)

 

[BunBunBun]

@symof need to think how to move the platform as a arcade.physics object by changing velocity for example or other powers. I know how to move objects via math calculating - but in this case coordinates(x,y) of object will be changed -> the collision between other objects will not work in the arcade physics.

[BunBunBun]

for example box2d has joints, through them I have the idea how to do that rotation, but I need the solution in arcade.physic.

[Ralph]

3 hours ago, BunBunBun said:

@symof need to think how to move the platform as a arcade.physics object by changing velocity for example or other powers. I know how to move objects via math calculating - but in this case coordinates(x,y) of object will be changed -> the collision between other objects will not work in the arcade physics.

Find however many points you want around the cirlce, say 10. Get all those points, calculate the slopes between them and turn that slope into velocity.x and velocity.y at whatever ratio you want for speed and then whenever it reaches the point it was aimed at, reset it towards the next point on the circle. 

So if the top point of the circle was 0,10 and a point about 30 degrees to the right was 3,8 you need to move over 3 and down 2 so the ratio of of the x velocity to the y velocity is 3/2 (the slope). Then you just scale that with the speed you want it to travel. So to make this translation walking speed you would set the velocities to be 150 in the x plane, and -100 for the y, to maintain the 3/2 slope.

Then be checking the position of the sprite and if it reaches 3,8 reset it for the next point you took from the circle. Pretty simple geometry

[Tom Atom]

Hi, to achieve, what you want just: create Phaser.group and your platform (Phaser.Sprite?) as child. Then in group's update rotate whole group and counter-rotate child platform with the same amount. This is working example (just add platfotm sprite):

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

var platform;

function preload() {
    game.load.image('platform', 'platform.png');
}

function create() {

    var graphics = game.add.graphics(400, 300);
    graphics.beginFill(0xFF0000, 1);
    graphics.drawCircle(0, 0, 5);

    var parent = game.add.group();
    parent.position.set(400, 300);
    
    platform = game.add.sprite(100, 0, "platform", 0, parent);
    platform.anchor.set(0.5, 0.5);
    game.physics.arcade.enable(platform);
    
    parent.update = function() {
        this.angle += 0.5;
        platform.angle -= 0.5;
    }
}

function render() {
    game.debug.body(platform);
}

Red circle is there only to show center.

[symof]

https://jsfiddle.net/7orw0xxr/ this is with p2js

https://jsfiddle.net/7orw0xxr/1/ this is with arcade

https://jsfiddle.net/7orw0xxr/2/ TomAtom fiddle.

[BunBunBun]

thanks your all guys for helping!  insteresting solution of @Tom Atom with counter-rotate child in parent, first time see. Thanks @symof for examples! 

but, can try to add to any of above methods of rotation the gravity to the _object , and you will see that he don't move with the platform together.

https://jsfiddle.net/7orw0xxr/5/

check out if just change the velocity of the _platform, the _object keeps staying in the middle of the _platform.

https://jsfiddle.net/7orw0xxr/6/

for now I see only one way: change the velocity of the _platform from point to point, as @Ralph suggested, do it manually.

[Tom Atom]

@BunBunBun

Quote

can try to add to any of above methods of rotation the gravity to the _object , and you will see that he don't move with the platform together.

 Problem is, that in those two examples you use pretty different physics settings:

• in first example gravity for your physics body is only 120, while in second it is 2000,
• in first example you are missing this line from second example: _platform.body.immovable = true;

 If you set either gravity to 2000 + add _platform.body.immovable = true; in first example or gravity to 120 in second example, you will get similar results.

 Higher gravity sticks player to platform. But if the platform is moving fast down and to side, then sliding may occur.

[BunBunBun]

@Tom Atom hm... really, you are right, now all okay, thanks!  

[symof]

It's just math and collisions, and the hard part (collisions) is handled by phaser.

https://jsfiddle.net/7orw0xxr/14/ 

You can do this a number of ways. You can calculate it based on the platform.body current x & y and set the new coords for your player, or object.

[BunBunBun]

@symof yes! that's what I need! I like this solution more. Thanks!