Patrolling enemy

Phaser 3
1

I’m trying to make a 4-directions game and I’m stuck on how to make the enemy patrols with animation( like a rectangle path).
I tried two ways to solve it, first is the path follower, but I have no idea how to add the animation when enemies are toward different directions.

path = this.add.path(150, 150);
path.lineTo(300, 150);
path.lineTo(300, 300);
path.lineTo(150, 300);
path.lineTo(150, 150);
enemies =  this.add.follower(path, 0, 0, 'npc');
 enemies.startFollow({
positionOnPath: true,
 duration: 8000,

repeat: -1,
rotateToPath: false,
verticalAdjust: true
          });
//I tried add animation here 
enemy.anims.play('right');

the second one is time Event, I can make enemies randomly move with animation but I can’t figure out how to build a path.
In the function create(),

 var timedEvent = this.time.addEvent({
            delay: 500,
            callback: moveEnemies,
            callbackScope: this,
            loop: true
        });

,and this is the function I called in the time event

function moveEnemies () {
const randNumber = Math.floor((Math.random() * 4) + 1);

        switch(randNumber) {
            case 1:
                enemy.body.setVelocityX(50);
                enemy.anims.play('left');
                repeat: 5;

                break;
            case 2:
                enemy.body.setVelocityX(-50);
                enemy.anims.play('left');
                repeat: 5;


                break;
            case 3:
                enemy.body.setVelocityY(-50);
                enemy.anims.play('left');
                repeat: 5;

                break;
            case 4:
                enemy.body.setVelocityY(50);
                enemy.anims.play('left');
                repeat: 5;

                break;
            default:
                enemy.body.setVelocityX(50);
        }
    }

I also tried to set bound for the enemy but it doesn’t work,

if (enemy.x < 200) {
enemy.body.setVelocityX(0);
}

Any suggestions will be appreciated

2

Hi, did you try rotateToPath: true ?

3

In the first case, you can do

var dir = path.getTangent(enemies.pathTween.getValue());

if (dir.x > 0) enemy.anims.play('right', true);
// etc.
4

Thank you, I tried it and the enemy just rotates to the central.image

5

Thank you, I tried to add this after path follower, there is a type error, I’m not sure if that is caused by different versions of Phaser.

Uncaught TypeError: Cannot read property ‘getValue’ of undefined

image

6

My mistake, it should be enemies.pathTween.getValue().

7

It should be done in update() after the follower has started.

With the tangent vector you should just check the direction of x and y.

function update() {
  var dir = path.getTangent(enemies.tween.getValue());

  if      (dir.x > 0) enemy.anims.play('right', true);
  else if (dir.x < 0) enemy.anims.play('left', true);
  else if (dir.y > 0) enemy.anims.play('down', true);
  else if (dir.y < 0) enemy.anims.play('up', true);
  else                enemy.anims.stop();
}
8

Sorry, it still doesn’t work.
image

and when I check api document,
image
I think length of path may help? I’m still trying to figure out.

9

Substitute:

var t = enemies.pathTween.getValue();
var p1 = path.getPoint(Phaser.Math.Clamp(t - 1e-6, 0, 1));
var p2 = path.getPoint(Phaser.Math.Clamp(t + 1e-6, 0, 1));
var dir = p2.clone().subtract(p1);
3 Likes
10

11

Thank you!

1 Like