Phaser3- Path Followers

by nish_mish

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pathfinding tutorial</title>
    
    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
    <!-- <script type="text/javascript" src="js/easystar.js"></script> -->
</head>
<body>
</body>

</html>

JavaScript

var config = {
  type: Phaser.AUTO,
  width: 600,
  height: 500,
  backgroundColor: 0xE1DED9,  
  scene: {
    preload: preload,
    create: create
  }
};



var path;
var graphics;
var followers;
let pause;

// Initialize Phaser
var game = new Phaser.Game(config);

function preload() {
    this.load.json("path", pathJson);
    this.load.image('target', 'https://i.ibb.co/WvyCbHr/greenball.png')
}

function create() {

		var graphics = this.add.graphics();
    var path = new Phaser.Curves.Path(this.cache.json.get('path'));
    var graphics = this.add.graphics().lineStyle(50, 0x807369, 1);
    
    path.draw(graphics, 16);
    
     followers = this.add.group();

    var self = this;
    // console.log(Phaser.Math.Between(1,5));
    for (var i = 0; i < 30; i++) {
        followers.create(0, 0, 'target');
    }
    for (var i = 0; i < followers.children.entries.length; i++) {
        var ball = this.add.follower(path, 0, 0, followers.children.entries[i].texture.key);
        ball.setScale(0.7)
        .setInteractive();
        ball.rotateToPath=true;
        ball.setData('vector', new Phaser.Math.Vector2());

         ball.startFollow({
             duration: 10000,
             rotateToPath: true,
             startAt: 0,
             delay: i *650
         });

        ball.on('pointerdown', () => {
            console.log(ball.getLocalPoint())
            pause = true;
            ball.pauseFollow(); 
        })
        ball.on('pointerup', () => {
            pause = false;
            ball.resumeFollow();
        })
    }
    
}


var pathJson = {
    "type": "Path",
    "x": 0,
    "y": 0,
    "autoClose": false,
    "curves": [
        {
            "type": "CubicBezierCurve",
            "points": [
                190,
                174,
                267,
                181,
                415,
                196,
                496,
                220
            ]
        },
        {
            "type": "CubicBezierCurve",
           ...