tidally locking an orbiting sprite

[Nebulocity]

Hi again,

I have a rectangle that orbits around a player, and I'm attempting to get it to always have the same side facing inwards.  This is actually called "tidal locking", and is what happened to our moon: the same side of the moon always faces the Earth.  This is because the time that it takes for the moon (rectangle) to rotate on it's axis is the same time that it takes to revolve around the earth (player).  This is what I'm trying to mimic. So if my rectangle has one long red side and one long blue side, I always want the blue side facing in towards the player.

I was attempting to do this by causing the rectangle to rotate on its axis, but i'm not clever enough to determine what the angle of rotation should be in order to match the rotational speed. 

Does anyone have the math wits about them to help me solve this, OR another possible solution to the problem (other than not doing it, lol)?

Create()

        rectangles = game.add.group();

        // Player sprite is 64x76, so add half of each to top-left

        // corner to find center.

        var pCenterX = player.x + 32;

        var pCenterY = player.y + 38;

        // Create rectangle at the center of the player.

    // Rectangle is 40x20 in size.

        var rectangle = rectangles.create(pCenterX, pCenterY, 'rectangle');

        rectangle.anchor.setTo(0.5, 0.5);

        // orbitPoint is the point at which orbit occurs.

        orbitPoint = new Phaser.Point(pCenterX + 50, pCenterY + 50);

        // orbitTarget is the point at which orbitPoint orbits around.

        orbitTarget = new Phaser.Point(pCenterX, pCenterY);

Update()

        rectangles.forEachAlive(function(rectangle)

        {

            // Start orbit.

            orbitPoint.rotate(orbitTarget.x, orbitTarget.y, game.math.wrapAngle(d), true);

            // Since rectangle is a sprite and not a Phaser.Point, not sure how

            // to orbit the sprite other than to have the rectangle sprite follow

            // the orbitPoint's coordinates.

            rectangle.x = orbitPoint.x;

            rectangle.y = orbitPoint.y;

            // Angle for rotation...trying to get this to face

            // player center (not sure how to do it)

            rectangle.angle += 1;

            // Angle

            d += 5;

        });

[jcs]

as long the rectangle is close by, you could just have it be a long/tall sprite with it's pivot point at the center of the thing that it is circling and the 'rectangle graphic' part of it out at the edge (and the rest transparent, obviously). then there's no tricky math involved, you just rotate it.

 

if you want the distance at which it orbits to vary then this won't work properly without some extra work, however. 

[Nambiar]

If 'r' is the distance from the center, then orbiting time period is 2*Pi*r/v = T, where v is the tangential velocity. Then the angular velocity of rotation of the body for it to be locked is 2*Pi/T. 

 

In your case, since the point is orbiting 5 units every update function, it should be easy to keep the rectangle rotating too at the same angle per update. Try putting rectangle.angle+=5;

[Nebulocity]

Nambiar, thank you, but how do I make one side continually face inward on a specific side?  Right now, it's the wrong side (the rectangle is orbiting on it's short end).

[Nebulocity]

To clarify, my question really just boils down to this:  Are there any pre-built methods in Phaser to make a sprite turn on an angle, but not rotate?

[Nebulocity]

Disregard, I just rotated the sprite manually for when I need it to orbit something, and use a different sprite when I don't ;-)

[jpdev]

Hi Nebulocity,

 

Couldn't disregard.. had to play around with orbiting.

 

You can do it without using a different sprite size by using the sprites pivot.

You don't even have to make any point calculations.

 

Check it out here:

 

http://janpeter.net/perma/phaser/orbit.html

 

(If you click anywhere the star will be moved to that position)

 

This is the create function:

  function create() {    playergroup = game.add.group();    var sprite = game.add.sprite(0, 0, 'star', 0, playergroup);    sprite.anchor.setTo(0.5, 0.5);    orbiter = game.add.sprite(0, 0, 'pointer', 0, playergroup);    orbiter.anchor.setTo(0.5, 0.5);    orbiter.pivot.x = -100;    orbiter.pivot.y = 0;    playergroup.x =  400;    playergroup.y = 300;  }

By setting the pivot of the orbiting object to -100 it's orbiting the star with a distance of 100 pixel and does always point to the star.

Just like the moon

 

Hope you like this,

JP

[RestingCoder]

This could also be useful: http://gametest.mobi/phaser/examples/_site/view_full.html?d=physics&f=angle+between.js&t=angle%20between

[Nebulocity]

This could also be useful: http://gametest.mobi/phaser/examples/_site/view_full.html?d=physics&f=angle+between.js&t=angle%20between

 

It's good for spinning things around on their anchor, which was cool!  But as far as doing something with orbits, I'm not clever enough to figure it out ;-)

[Nebulocity]

Hi Nebulocity,

 

Couldn't disregard.. had to play around with orbiting.

 

You can do it without using a different sprite size by using the sprites pivot.

You don't even have to make any point calculations.

 

Check it out here:

 

http://janpeter.net/perma/phaser/orbit.html

 

(If you click anywhere the star will be moved to that position)

 

This is the create function:

*snip*

By setting the pivot of the orbiting object to -100 it's orbiting the star with a distance of 100 pixel and does always point to the star.

Just like the moon

 

Hope you like this,

JP

 

JP

That's very neat about pivot!  I did not find this in the documentation, and so I wasn't aware that it existed ;-)  I was disappointed before seeing your post, because the only way to rotate something is if it was a Point or a Group, and obviously a Sprite is neither of these (setting the Group rotate property doesn't change the children, from what I understand).  So your way is a very simple way of doing it, and that's cool!

Unfortunately, I'm not sure if .pivot will work, because I need to add at least 3 more "orbiters", which need to orbit around the player.  I'm still trying to find out what I can do to do this, like perhaps using Math.PI and the angle of the pivot, but so far I haven't had any luck. 

[slightlybentOR]

I know this is an old thread but I found the discussion useful, but then found the exact answer with example here -- http://phaser.io/examples/v2/sprites/rotate-sprite-around-point

 

That's a Phaser.io Example whichs shows how to use position.rotate to set sprite orbit at a certain speed and distance from an x,y Point.   Setting the sprite.angle would allow you to orient face of sprite so that it is in "tidal lock" position (or perhaps if a ship rotating around a planet then facing proper direction).

 

Hope this helps anyone else that finds this thread for "phaser orbiting sprite".

[slightlybentOR]

Here's my code for accomplishing having a sprite approach the pointer and then enter a "tidally locked" orbit around it at a certain number of pixels distance...

    update: function () {        if ((Phaser.Point.distance(myDemo.bmpMouseSprite.position, this.game.input.activePointer.position)) > myDemo.orbitalPixelDistance) {            this.game.physics.arcade.moveToPointer(myDemo.bmpMouseSprite, 120, this.game.input.activePointer, 900);            var angle = this.game.physics.arcade.angleBetween(myDemo.bmpMouseSprite, this.game.input.activePointer);            myDemo.game.add.tween(myDemo.bmpMouseSprite).to({ rotation: angle }, 100, "Linear", true);        }    },    preRender: function () {        if (Math.round((Phaser.Point.distance(myDemo.bmpMouseSprite.position, this.game.input.activePointer.position))) < myDemo.orbitalPixelDistance) {            myDemo.bmpMouseSprite.position.rotate(this.game.input.activePointer.x, this.game.input.activePointer.y, Math.PI, true, myDemo.orbitalPixelDistance);            myDemo.bmpMouseSprite.rotation = this.game.physics.arcade.angleBetween(myDemo.bmpMouseSprite, this.game.input.activePointer) - Phaser.Math.degToRad(90);        }    },

hint: if you don't care about orientation of the "face" of the sprite, then you can simply refer to the Phaser.io example for using the position.rotate in preRender to accomplish the orbit.  here -- http://phaser.io/examples/v2/sprites/rotate-sprite-around-point