 # Make a Path follow the player, not the player follow a path

I have cirlce path

``````new Phaser.Curves.Path(0, 0).circleTo(100);
``````

I want this path to follow my players position.
On this path i will draw a image (flyging around the player, like a drone or something).
So the path (circle in this case) have to be centered on players position. Sounds easy to my, but i cant change the position of this path element…

Is there any other lightweight method to achive this?

Thx a lot!

As I understand it, a path is just a set of instructions that provide coordinates based on a “time” along that path, where 0 is the start of the path and 1 is the end. The positions along the path are relative to the origin (0, 0), so you can just add the coordinates from that path at a particular time along the path to the position of the player to simulate the path actually moving with the player.

I like the path approach because you can make all kinds of wacky-shaped paths, and as long as they’re centered around (0, 0), you can easly translate them to the player. So you could have something orbiting the player in a square shape, or a star shape, or a wavy-line circle!

A brief example below. Note that I use some handy vector functions here, which I find a lot more convenient than setting x and y coordinates separately:

``````let path, positionOnPath;

create() {
...
// Creates a path of a circle centered at (0, 0)
path = new Phaser.Curves.Path();

// this will always be relative to (0, 0)
positionOnPath = new Phaser.Math.Vector2();
}

update() {
...
// input some time "t" between 0 and 1, and it will store the position along
// that path RELATIVE TO (0, 0) at that time to "positionOnPath"
path.getPoint(t, positionOnPath)
// Say you have a sprite "orbitingDrone". Set its position to the path's position
// relative to (0, 0) PLUS the player's position. Now the path's position is
// relative to the player!
}
``````

Here’s a CodePen with a working example. Hope this helps!

2 Likes

That looks so good! It also avoids the “wrong position” problem when player moves.
I solved it with some other function / logic and there it was not so smooth at all :

``````Phaser.Math.RotateAroundDistance( this.img, player.x, player.y, 0.2, 50)
``````