# Set existing player sprite (MatterJS) as path follower?

**URL:** <https://phaser.discourse.group/t/set-existing-player-sprite-matterjs-as-path-follower/5743>\
**Category:** Phaser 3\
**Created:** [April 3, 2020, 2:07am UTC](https://phaser.discourse.group/t/set-existing-player-sprite-matterjs-as-path-follower/5743 "2020-04-03T02:07:17Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![SHG42](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/shg42/32/2231_2.png) [@SHG42](https://phaser.discourse.group/u/SHG42)\
**Post date:** [April 3, 2020, 2:07am UTC](https://phaser.discourse.group/t/set-existing-player-sprite-matterjs-as-path-follower/5743/1 "2020-04-03T02:07:17Z")

</div>

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](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/e/eef87303f5a12816e46d90d04f56ce8fe82c2ece.png) ![ledge2](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/3/35fdd1133459688c82086a9438a6375ca6003c0d.png)

```
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);

    }
```

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [April 3, 2020, 4:33pm UTC](https://phaser.discourse.group/t/set-existing-player-sprite-matterjs-as-path-follower/5743/2 "2020-04-03T16:33:27Z")

</div>

I think it should work. You could try to mix in the PathFollower properties to your class or [run a tween through the path](http://labs.phaser.io/view.html?src=src%5Cphysics%5Carcade%5Cbody%20on%20a%20path.js) manually.

---

<div class="post-metadata">

**Author:** ![SHG42](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/shg42/32/2231_2.png) [@SHG42](https://phaser.discourse.group/u/SHG42)\
**Post date:** [April 3, 2020, 7:10pm UTC](https://phaser.discourse.group/t/set-existing-player-sprite-matterjs-as-path-follower/5743/3 "2020-04-03T19:10:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [April 3, 2020, 10:44pm UTC](https://phaser.discourse.group/t/set-existing-player-sprite-matterjs-as-path-follower/5743/4 "2020-04-03T22:44:50Z")

</div>

```javascript
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
);

```

---

<div class="post-metadata">

**Author:** ![SHG42](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/shg42/32/2231_2.png) [@SHG42](https://phaser.discourse.group/u/SHG42)\
**Post date:** [April 6, 2020, 4:27pm UTC](https://phaser.discourse.group/t/set-existing-player-sprite-matterjs-as-path-follower/5743/5 "2020-04-06T16:27:06Z")

</div>

Very helpful, thank you!