- ennemy patrolling and chasing

Author: Robouste

esbuild/build.prod.mjs

@@ -3,15 +3,12 @@ import clean from "esbuild-plugin-clean";
 import copy from "esbuild-plugin-copy";
 import inlineImage from "esbuild-plugin-inline-image";
 
-const pluginDirectory = "./public/assets/plugins";
-
 const builder = async () => {
   await build({
     entryPoints: ["./src/main.ts"],
     bundle: true,
     minify: true,
     sourcemap: false,
-    // target: ["chrome58", "firefox57", "safari11", "edge16"],
     outfile: "./dist/bundle.min.js",
     plugins: [
       clean({

src/game-objects/ennemy.game-object.ts

@@ -1,66 +1,120 @@
 import { Scene } from "phaser";
 import { depthsConfig } from "../configs";
+import { GameHelper } from "../helpers";
 import { ArcadeBody, Sprite } from "../phaser-aliases";
 import { AnimationTag, EnnemyTag } from "../tags";
+import { Hero } from "./hero.game-object";
+
+export interface EnnemyConfig {
+  scene: Scene;
+  x: number;
+  y: number;
+  patrolDistance: number;
+  chaseDistance: number;
+  speed: number;
+  sprite: EnnemyTag;
+}
 
 export class Ennemy extends Sprite {
   public declare body: ArcadeBody;
 
+  private _patrolDistance: number;
+  private _chaseDistance: number;
+  private _player: Hero;
+  private _startingX: number;
+  private _spriteTag: EnnemyTag;
+  private _patrolDirection = 1;
   private _speed = 60;
-  private _startingPoint = { x: 0, y: 0 };
-  private _endingPoint = { x: 0, y: 0 };
-  private _isMovingToEnd = true;
+  private _patrolTween: Phaser.Tweens.Tween | null = null;
 
-  constructor(private _scene: Scene, private _spriteTag: EnnemyTag) {
-    super(_scene, 0, 0, _spriteTag);
+  private get _isPatrolling(): boolean {
+    return this._patrolTween !== null;
+  }
 
-    this.setDepth(depthsConfig.ennemies);
+  constructor(config: EnnemyConfig, player: Hero) {
+    super(config.scene, config.x, config.y, config.sprite);
+    this._startingX = config.x;
+    this._patrolDistance = config.patrolDistance;
+    this._chaseDistance = config.chaseDistance;
+    this._speed = config.speed;
+    this._spriteTag = config.sprite;
 
-    this.createAnimations();
-  }
+    this._player = player;
 
-  public spawn(x: number, y: number): void {
     this.scene.add.existing(this);
     this.scene.physics.add.existing(this);
 
-    this.play(AnimationTag.ENNEMY_IDLE);
-
     this.flipX = true;
-    this.x = x;
-    this.y = y;
 
-    this._startingPoint = { x, y };
-  }
+    this.setDepth(depthsConfig.ennemies);
 
-  public patrol(endingPoint: { x: number; y: number }): void {
-    this._endingPoint = endingPoint;
+    this.createAnimations();
+    this.startPatrol();
     this.play(AnimationTag.ENNEMY_MOVING);
+  }
 
-    this._scene.events.on("update", () => {
-      if (this._isMovingToEnd) {
-        this.goToTarget(this._endingPoint.x, this._endingPoint.y);
+  public update(): void {
+    this.updateFlipX();
 
-        const distance = Phaser.Math.Distance.Between(this.x, this.y, this._endingPoint.x, this._endingPoint.y);
+    const distanceToPlayer = Phaser.Math.Distance.Between(this.x, this.y, this._player.x, this._player.y);
 
-        if (distance < 10) {
-          this._isMovingToEnd = false;
-        }
-      } else {
-        this.goToTarget(this._startingPoint.x, this._startingPoint.y);
+    if (distanceToPlayer <= this._chaseDistance) {
+      this.stopPatrol();
+      this.chasePlayer();
+    } //
+    else if (distanceToPlayer > this._chaseDistance && this._patrolTween === null) {
+      this.returnToStart();
+    }
+  }
 
-        const distance = Phaser.Math.Distance.Between(this.x, this.y, this._startingPoint.x, this._startingPoint.y);
+  private startPatrol(): void {
+    if (this._patrolTween !== null) {
+      return;
+    }
 
-        if (distance < 10) {
-          this._isMovingToEnd = true;
-        }
-      }
+    this._patrolDirection = Math.sign(this._patrolDistance);
 
-      this.flipX = this.body.velocity.x < 0;
+    this._patrolTween = this.scene.tweens.add({
+      targets: this,
+      x: this._startingX + this._patrolDistance,
+      duration: Math.abs(this._patrolDistance) * 10,
+      yoyo: true,
+      repeat: -1,
+      onYoyo: () => (this._patrolDirection *= -1),
+      onRepeat: () => (this._patrolDirection *= -1),
     });
   }
 
-  public goToTarget(targetX: number, targetY: number): void {
-    this.scene.physics.moveTo(this, targetX, targetY, this._speed);
+  private stopPatrol(): void {
+    if (this._patrolTween !== null) {
+      this._patrolTween.stop();
+      this._patrolTween = null;
+    }
+  }
+
+  private chasePlayer(): void {
+    const direction = Math.sign(this._player.x - this.x);
+    this.body.setVelocityX(direction * this._speed);
+  }
+
+  private returnToStart(): void {
+    if (!GameHelper.isCloseEnough(this.x, this._startingX)) {
+      const direction = Math.sign(this._startingX - this.x);
+      this.body.setVelocityX(direction * this._speed);
+    } else {
+      console.log("reached start");
+      this.body.setVelocityX(0);
+      this.startPatrol();
+    }
+  }
+
+  private updateFlipX(): void {
+    // Patrol is using a tween, which updates X position instead of velocity
+    if (this._isPatrolling) {
+      this.setFlipX(this._patrolDirection < 0);
+    } else {
+      this.setFlipX(this.body.velocity.x < 0);
+    }
   }
 
   private createAnimations(): void {

src/game-objects/hero.game-object.ts

@@ -7,13 +7,15 @@ import { AnimationTag, ImageTag, SfxTag, SpritesheetTag } from "../tags";
 export class Hero extends Sprite {
   public declare body: ArcadeBody;
   public projectiles: Phaser.Physics.Arcade.Group;
-  private _isJumping = false;
   public get isMovingLeft(): boolean {
     return this._cursors.left.isDown;
   }
   public get isMovingRight(): boolean {
     return this._cursors.right.isDown;
   }
+  public get speed(): number {
+    return this._speed;
+  }
 
   private _speed = 160;
   private _jumpSpeed = 360;
@@ -23,6 +25,7 @@ export class Hero extends Sprite {
   private _cursors: Phaser.Types.Input.Keyboard.CursorKeys;
   private _keyboard: Phaser.Input.Keyboard.KeyboardPlugin;
   private _shootKey: Phaser.Input.Keyboard.Key;
+  private _isJumping = false;
   // That's SHIT. I need to understand better how it works and make it more dynamic
   private _offset = {
     x: 8,

src/helpers/game.helper.ts

@@ -39,4 +39,8 @@ export class GameHelper {
 
     sprite.anims.play(animation, ignoreIfPlaying);
   }
+
+  public static isCloseEnough(value1: number, value2: number, epsilon: number = 1): boolean {
+    return Math.abs(value1 - value2) <= epsilon;
+  }
 }

src/levels/1-forest.level.ts

@@ -1,6 +1,6 @@
 import { Scene } from "phaser";
 import { depthsConfig } from "../configs";
-import { Ennemy, Hero } from "../game-objects";
+import { Ennemy, EnnemyConfig, Hero } from "../game-objects";
 import { GameHelper } from "../helpers";
 import { Sprite, Tilemap, Tileset } from "../phaser-aliases";
 import {
@@ -122,6 +122,12 @@ export class ForestLevel {
     this.setCollisions();
   }
 
+  public update(): void {
+    this._ennemies.getChildren().forEach((ennemy) => {
+      ennemy.update();
+    });
+  }
+
   private addBackgrounds(): void {
     const backgrounds = [
       ImageTag.FOREST_BACKGROUND_DAY_1,
@@ -200,13 +206,6 @@ export class ForestLevel {
   }
 
   private addEnnemies(): void {
-    const ennemies = this._map
-      .createFromObjects(TilemapObjectsTag.POSITIONS, {
-        type: "ennemy",
-        classType: Sprite,
-      })
-      .filter((ennemy): ennemy is Sprite => ennemy instanceof Sprite);
-
     const positions = this._map.objects.find(
       (objectLayer) => objectLayer.name === TilemapObjectsTag.POSITIONS
     )?.objects;
@@ -221,19 +220,20 @@ export class ForestLevel {
       if (!patrol.x || !patrol.y || !patrol.polyline || patrol.polyline.length < 2) {
         throw Error("Invalid patrol object");
       }
-      console.log("patrol", patrol);
 
       const { x, y, polyline } = patrol;
 
-      const ennemyObject = new Ennemy(this._scene, patrol.name as EnnemyTag);
-      ennemyObject.spawn(x, y);
-
-      const endingPoint = {
-        x: polyline[1].x + x,
-        y: polyline[1].y + y,
+      const ennemyConfig: EnnemyConfig = {
+        x,
+        y,
+        chaseDistance: 200,
+        patrolDistance: polyline[1].x,
+        speed: this.hero.speed - 30,
+        sprite: patrol.name as EnnemyTag,
+        scene: this._scene,
       };
 
-      ennemyObject.patrol(endingPoint);
+      const ennemyObject = new Ennemy(ennemyConfig, this.hero);
 
       this._ennemies.add(ennemyObject);
     });

src/scenes/game.scene.ts

@@ -8,6 +8,7 @@ export class Game extends Scene {
   private _hero: Hero | undefined;
   private _keyboard: Phaser.Input.Keyboard.KeyboardPlugin | undefined;
   private _toggleDebugKey: Phaser.Input.Keyboard.Key | undefined;
+  private _currentLevel: ForestLevel | undefined;
 
   constructor() {
     super(SceneTag.GAME);
@@ -28,7 +29,7 @@ export class Game extends Scene {
     this.createDebug();
 
     this._hero = new Hero(this);
-    new ForestLevel(this._hero, this);
+    this._currentLevel = new ForestLevel(this._hero, this);
   }
 
   /**
@@ -47,6 +48,7 @@ export class Game extends Scene {
     }
 
     this._hero?.update(time, delta);
+    this._currentLevel?.update();
   }
 
   private createDebug(): void {