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

Phaser 3
1

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.

:slight_smile:
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!

2

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();
  path.add(new Phaser.Curves.Ellipse(0, 0, 100));

  // 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!
  orbitingDrone.copyPosition(positionOnPath.add(player.body.center));
}

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

2 Likes
3

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 :slight_smile: :

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

So i adaped your solution! Thx again!

4

The helper functions bundled with Phaser are super useful! And they’re kinda hard to find, so props coming across RotateAroundDistance.

Something that I do in my example but I don’t think I ever explicitly mention is to set the position of game objects relative to the BODY of any other game object moving via physics. For example, if you give gameObjectA a velocity, and you want gameObjectB to follow its position while it’s moving around, gameObjectA.x and gameObjectA.body.x are NOT equal - the value on body will take physics interactions, including velocity and acceleration, into account before calculating the position!

I ran into this issue a bunch and as far as I can tell, setting positions relative to a gameObject’s BODY seems to solve most of them. So your original code might totally work - if your player has a velocity, simply using player.body.x and player.body.y may be enough!