Phaser JS Follow Path

by jddevight

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>

CSS

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #111;
  color: #eee;
  font: caption;
}

#version {
  position: absolute;
  left: 5px;
  top: 605px;
}

JavaScript

const COLOR_PRIMARY = 0x43a047;
const COLOR_LIGHT = 0x76d275;
const COLOR_DARK = 0x00701a;

class Demo extends Phaser.Scene {
    constructor() {
        super({
            key: 'examples'
        })
    }

    preload() {
        var url;
  
        url = 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexpathfollowerplugin.min.js';
        this.load.plugin('rexpathfollowerplugin', url, true);
    }

    create() {
        /*
        var path = this.add.path(100, 100)
            .lineTo(300, 100)
            .lineTo(100, 300)
            .lineTo(300, 300)
            .lineTo(100, 100);
        */
      
        /* var curve = new Phaser.Curves.Ellipse(100, 100, 50); */

        var curve = new Phaser.Curves.Spline([
          20, 550,
          260, 450,
          300, 250,
          550, 145,
          745, 256
        ]);
        var path = this.add.path(200, 200)
          .add(curve);
        
        var graphics = this.add.graphics({
            lineStyle: {
                width: 3,
                color: COLOR_DARK,
                alpha: 1
            }
        })
        path.draw(graphics);

        var gameObject = this.add.rectangle(0, 0, 30, 30, COLOR_PRIMARY);
        gameObject.pathFollower = this.plugins.get('rexpathfollowerplugin').add(gameObject, {
            path: path,
            t: 0,
            rotateToPath: true
        });

        this.tweens.add({
            targets: gameObject.pathFollower,
            t: 1,
            ease: 'Linear', // 'Cubic', 'Elastic', 'Bounce', 'Back'
            duration: 3000,
            repeat: -1,
            yoyo: false
        });

    }

    update() {
    }
}

var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH,
    },
    scene: Demo
};

var game = new Phaser.Game(config);