Set existing player sprite (MatterJS) as path follower?

Phaser 3
1

I see in the docs that PathFollower extends the sprite class and can do the same things a regular sprite can do, but all of the examples I’ve found have something like this:
var lemming = this.add.follower(curve, 50, 300, ‘lemming’);
Where a path follower object is created from a static sprite. In the tutorials I’ve found, it’s the same way.

What I want is to use my existing player sprite (created in a custom class) as a path follower on a series of very short paths. The paths are just one element in a much larger map. Can I set an existing sprite object as a path follower? I’ve been digging in the docs and I haven’t seen anything to do so. Is there a way I can do this?

Context: I’m trying to implement ledge climbing into my platformer. Here’s how the functionality is planned to work:

  1. One custom keycode for grabbing the ledge, G, and one for climbing up, C.
  2. On G + cursor-up keypress, the sprite jumps up. If a ledge is within range, the sprite grabs the ledge at a predefined point and is kept there by toggling the isStatic property. (This stage is completed)
  3. On C keypress, toggle the isStatic property again to “unchain” the sprite, and move the sprite up onto the ledge. This is where the trouble is.

After trying a few different things, I think using a path is the best option for getting the sprite onto the ledge. I’ve already coded the path, I just need to know if I can use my player sprite as a path follower. Here’s screenshots of the ledge climbing in action with the path rendered to the map in the climbing stage, plus my current code for climbing ledges:
ledge1 ledge2

ledgeClimb() {

        if (this.specialKeys.climb.isDown && Phaser.Input.Keyboard.JustDown(this.specialKeys.climb) && !this.hero.isTouching.ground) {

            console.log('climb!');

            this.hero.sprite.anims.play('climb', true);

            this.hero.sprite.on('animationcomplete-climb', ()=>{

                this.hero.sprite.setStatic(false);

                if (this.hero.sprite.flipX) {

                    this.climbLeft();

                } else if (!this.hero.sprite.flipX) {

                    this.climbRight();

                }

            });

        }

    }

    climbLeft() {

        this.graphics = this.add.graphics();

        this.spriteStart = this.hero.sprite.body.position;

        //start point: sprite position

        this.startPoint = new Phaser.Math.Vector2(this.spriteStart.x, this.spriteStart.y);

        //controlPoint1 to left: sprite position x-=1, y-=1

        this.ctrlPt1Left = new Phaser.Math.Vector2(this.startPoint.x, this.startPoint.y-=8);

        //controlPoint2 to left: ctrlPt1 position x-=1, y-=1

        this.ctrlPt2Left = new Phaser.Math.Vector2(this.ctrlPt1Left.x-=9, this.ctrlPt1Left.y-=4);

        //endPoint to left: ctrlPt2 position x-=1, y

        this.endPointLeft = new Phaser.Math.Vector2(this.ctrlPt2Left.x-=9, this.ctrlPt2Left.y);

        //curve to left

        this.curveLeft = new Phaser.Curves.CubicBezier(this.startPoint, this.ctrlPt1Left, this.ctrlPt2Left, this.endPointLeft);

        

        this.graphics.clear();

        this.graphics.lineStyle(5, 0x00ff00, 1);

        this.curveLeft.draw(this.graphics);

    }
2

I think it should work. You could try to mix in the PathFollower properties to your class or run a tween through the path manually.

3

Could you give me an example of how I might mix the PathFollower properties into my sprite class, please?

4 
class Sprite extends Phaser.Physics.Matter.Sprite {
  constructor(world, x, y, texture, frame, options, path) {
    super(world, x, y, texture, frame, options);

    if (path) this.path = path;
  }
}

Object.assign(
  Sprite.prototype,
  Phaser.GameObjects.Components.PathFollower
);
5

Very helpful, thank you!