Phaser Coding Tips 3 Revisited, Part 3: "Ride on" Elliptical Platforms

In the previous post I explained how Mr Dude can be made to ride on platforms that move in straight lines, even diagonal lines.

In this post, I use my customised Path Follower class to make Mr Dude ride on a platform that moves in an elliptical path.

Here is a list of the things I mulled over in creating the code.

Why not use frictionX?

In the first post of this series I used frictionX to keep Mr Dude "slipping" off horizontally moving platforms. In the example of this post, I have deliberately set the friction of the platform to zero.

I also set gravity effect on Mr Dude to zero, when he lands on the platform.

  ridePlatform(dude, platform) {
    if (platform.body.touching.up && dude.body.touching.down) {
      dude.locked = true;
      dude.lockedTo = platform;   
      dude.body.setAllowGravity(false);
      dude.body.setVelocityY(0);
    }
  }

I have done this because the effect of gravity and friction is difficult to manage as the combination has different implications depending on whether the platform is moving up or down. For example, if I had gravity set to true and friction set to 1, Mr Dude would stay on the platform when travelling up. However, when the platform is going down, and the gravity was not sufficient, Mr Dude would not always be in contact (ie colliding) with the platform, hence friction would not work, and hence fall off.

Naturally, if I set gravity to false, Mr Dude will not be "touching" the platform even though he will be flush on top of it, as his relative position would be "fixed"; hence friction would not work.

Extra check when jumping from platform

As stated above, once Mr Dude is stood on top of the platform, he will not be "touching" the platform. Hence the basic check for jumping (ie up arrow key down and body touching down) will not work. It needs an extra check for up arrow key down in combination with "locked = true (ie standing on a platform) of Mr Dude.

And when jumping off the platform, gravity is set to true again.

 // JUMP!!!
    if ((this.cursors.up.isDown && this.body.touching.down) || (this.cursors.up.isDown && this.locked)) {
      this.setVelocityY(-330);
      this.locked = false;
      this.lockedTo = null;
      this.body.setAllowGravity(true);
    }

Having sorted the above out, the rest was easy.

The Code is available below.

Key references:

Creating moving platforms for my Phaser JS game - Game Devlog #22 | pablo.gg