How to Dynamically / Incrementally Move a Spite Along a Path?

[mlammert]

Developing a new game in Phaser 3 and this is my first time using paths.

I have successfully created a JSON path using PathBuilder. Very cool utility.

I successfully have the sprite follow the path by using this code:

    this.pathTrack = new Phaser.Curves.Path(this.cache.json.get('pathTrack'));

    this.followerCharacter = this.add.follower(this.pathTrack, 0, 0, 'imageCharacter');

    this.followerCharacter.startFollow({
      duration: 6000,
      yoyo: false,
      repeat: -1,
      rotateToPath: true,
      rotationOffset: 90
    });

That works great as a proof of concept.

However, I would like to be able to control how "fast" the sprite follows the path.

For example, I would like to control the speed of the sprite along the path so say I could hold down the 1 key to make it go slow, or the 2 key to make it go faster. If no key is being held down the sprite would not move at all.

I am familiar with Phaser's input.keyboard methods. But, I just can't figure out how to control the sprite along the path. Basically, I am trying to create a "race" game and determine which sprite gets to the end first. But, I want them to run around a predefined track.

Am I approaching this problem in the wrong way?

Any help is appreciated!

[mlammert]

I ended up figuring this out on my own.

I had to completely change the way I was approaching this:

    create() {   

        this.pathPlayTrack = new Phaser.Curves.Path(this.cache.json.get('pathPlayTrack'));

        this.pathFollower = {t: 0, vector:new Phaser.Math.Vector2()};
    
        this.pathPlayTrack.getPoint(this.pathFollower.t, this.pathFollower.vector);
    
        this.spriteCar.setPosition(this.pathFollower.vector.x, this.pathFollower.vector.y);

    )

 

    update(time, delta) {

        // Get the current x/y coordinates of the car
        let fltCarCurrentX = this.spriteCar.x;
        let fltCarCurrentY = this.spriteCar.y;
    
        // Update the position of t along the path based on the car speed and the delta of the gaem update
        this.pathFollower.t += ((1/5000)*delta)*this.fltCarCurrentSpeed;
    
        // Loop the path
        if (this.pathFollower.t >= 1) {
          this.pathFollower.t = 0;
        }
    
        // Get new point on path and set the position of the car to it
        this.pathPlayTrack.getPoint(this.pathFollower.t, this.pathFollower.vector);
        this.spriteCar.setPosition(this.pathFollower.vector.x, this.pathFollower.vector.y);
    
        // Get the new x/y coordinates of the car now that we have updated t
        let fltCarNewX = this.spriteCar.x;
        let fltCarNewY = this.spriteCar.y;
    
        // Create points based on the car current and new position
        let fltCarLastPoint = new Phaser.Geom.Point(fltCarCurrentX, fltCarCurrentY);
        let fltCarMoveToPoint = new Phaser.Geom.Point(fltCarNewX, fltCarNewY);
    
        // Rotate the car appropriately based on the differences between the two points
        // NOTE: Rotation is in radians so we need to add 90 degrees to orient the car correctly
        this.spriteCar.rotation = (Phaser.Math.Angle.BetweenPoints(fltCarLastPoint, fltCarMoveToPoint) + 1.5708);

    }

This seems to have done it.

If anyone knows of a better way that it could have been done, I would love to hear it.

Thanks!