# tidally locking an orbiting sprite

## Recommended Posts

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

// 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;

});

##### Share on other sites

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.

##### Share on other sites

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;

##### Share on other sites

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

##### Share on other sites

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?

##### Share on other sites

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

##### Share on other sites

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

##### Share on other sites

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.

##### Share on other sites

• 1 year later...

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".

##### Share on other sites

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

## 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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.