- dynamic patrolling system with obstacles and edges detection

Author: Robouste

public/assets/tilemaps/forest-map.json

@@ -451,63 +451,39 @@
                 }, 
                 {
                  "height":0,
-                 "id":18,
+                 "id":24,
                  "name":"pixie_ennemy_tag",
-                 "polyline":[
-                        {
-                         "x":0,
-                         "y":0
-                        }, 
-                        {
-                         "x":-258.666666666667,
-                         "y":1.33333333333331
-                        }],
+                 "point":true,
                  "rotation":0,
                  "type":"ennemy_patrol",
                  "visible":true,
                  "width":0,
-                 "x":691,
-                 "y":391.833333333333
+                 "x":737,
+                 "y":375.5
                 }, 
                 {
                  "height":0,
-                 "id":20,
+                 "id":25,
                  "name":"pixie_ennemy_tag",
-                 "polyline":[
-                        {
-                         "x":0,
-                         "y":0
-                        }, 
-                        {
-                         "x":-131.333666666667,
-                         "y":1.33333
-                        }],
+                 "point":true,
                  "rotation":0,
                  "type":"ennemy_patrol",
                  "visible":true,
                  "width":0,
-                 "x":982.833333333333,
-                 "y":194.666666666667
+                 "x":912,
+                 "y":187
                 }, 
                 {
                  "height":0,
-                 "id":23,
+                 "id":26,
                  "name":"pixie_ennemy_tag",
-                 "polyline":[
-                        {
-                         "x":0,
-                         "y":0
-                        }, 
-                        {
-                         "x":-131.334,
-                         "y":1.33333
-                        }],
+                 "point":true,
                  "rotation":0,
                  "type":"ennemy_patrol",
                  "visible":true,
                  "width":0,
-                 "x":1253,
-                 "y":387.5
+                 "x":1186.5,
+                 "y":373.5
                 }],
          "opacity":1,
          "type":"objectgroup",
@@ -516,7 +492,7 @@
          "y":0
         }],
  "nextlayerid":10,
- "nextobjectid":24,
+ "nextobjectid":27,
  "orientation":"orthogonal",
  "renderorder":"right-down",
  "tiledversion":"1.11.0",

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

@@ -9,7 +9,6 @@ export interface EnnemyConfig {
   scene: Scene;
   x: number;
   y: number;
-  patrolDistance: number;
   chaseDistance: number;
   speed: number;
   patrolSpeed: number;
@@ -25,10 +24,11 @@ export interface EnnemyConfig {
 export class Ennemy extends ArcadeSprite {
   public declare body: ArcadeBody;
 
+  public get speed(): number {
+    return this._config.speed;
+  }
+
   private _player: Hero;
-  private _startingX: number;
-  private _patrolDirection = 1;
-  private _patrolTween: Phaser.Tweens.Tween | null = null;
   private _config: EnnemyConfig;
   private _isAttacking = false;
   private _canAttack = true;
@@ -37,16 +37,14 @@ export class Ennemy extends ArcadeSprite {
     body: ArcadeBody;
   };
 
-  private get _isPatrolling(): boolean {
-    return this._patrolTween !== null;
-  }
+  private _direction = 1;
+  private _isPatrolling = false;
   private get _physics(): Phaser.Physics.Arcade.ArcadePhysics {
     return this.scene.physics;
   }
 
   constructor(config: EnnemyConfig, player: Hero) {
     super(config.scene, config.x, config.y, config.sprite);
-    this._startingX = config.x;
     this._config = config;
 
     this._player = player;
@@ -82,10 +80,12 @@ export class Ennemy extends ArcadeSprite {
       this
     );
 
+    this._direction = Phaser.Math.Distance.Between(this.x, this.y, this._player.x, this._player.y) > 0 ? 1 : -1;
+
     this.startPatrol();
   }
 
-  public update(): void {
+  public update(_: number, __: number): void {
     if (this._config.hp <= 0 || this._isAttacking) {
       return;
     }
@@ -102,7 +102,11 @@ export class Ennemy extends ArcadeSprite {
       this.chasePlayer();
     } //
     else if (distanceToPlayer > this._config.chaseDistance && !this._isPatrolling) {
-      this.returnToStart();
+      this.startPatrol();
+    }
+
+    if (this._isPatrolling) {
+      this.updatePatrol();
     }
 
     GameHelper.animate(this, AnimationTag.ENNEMY_MOVING, {
@@ -126,23 +130,36 @@ export class Ennemy extends ArcadeSprite {
     }
   }
 
+  public knockback(strength: number, direction: number): void {
+    this.body.setVelocityX((strength / this.body.mass) * direction);
+
+    this.scene.time.delayedCall(400, () => {
+      // ennemy is dead
+      if (!this.body) {
+        return;
+      }
+      const speed = this._isPatrolling ? this._config.patrolSpeed : this._config.speed;
+      this.body.setVelocityX(speed * this._direction);
+    });
+  }
+
   private startPatrol(): void {
-    if (this._patrolTween !== null) {
-      return;
-    }
+    this._isPatrolling = true;
 
     GameHelper.animate(this, AnimationTag.ENNEMY_MOVING);
-    this._patrolDirection = Math.sign(this._config.patrolDistance);
-
-    this._patrolTween = this.scene.tweens.add({
-      targets: this,
-      x: this._startingX + this._config.patrolDistance,
-      duration: (Math.abs(this._config.patrolDistance) / this._config.patrolSpeed) * 1000,
-      yoyo: true,
-      repeat: -1,
-      onYoyo: () => (this._patrolDirection *= -1),
-      onRepeat: () => (this._patrolDirection *= -1),
-    });
+
+    this.body.setVelocityX(this._config.patrolSpeed * this._direction);
+  }
+
+  private stopPatrol(): void {
+    this._isPatrolling = false;
+  }
+
+  private updatePatrol(): void {
+    if (GameHelper.isObstacleAhead(this, this.scene) || GameHelper.isLedgeAhead(this, this.scene)) {
+      this._direction *= -1;
+      this.body.setVelocityX(this._config.patrolSpeed * this._direction);
+    }
   }
 
   private attack(): void {
@@ -151,9 +168,9 @@ export class Ennemy extends ArcadeSprite {
     }
 
     this.scene.sound.play(SfxTag.PIXIE_ATTACK);
-    const direction = this.flipX ? -1 : 1;
+
     const hitboxPosition = {
-      x: this.x + direction * this._attackHitbox.width,
+      x: this.x + this._direction * this._attackHitbox.width,
       y: this.y,
     };
 
@@ -183,39 +200,22 @@ export class Ennemy extends ArcadeSprite {
     });
   }
 
-  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._config.speed);
-  }
-
-  private returnToStart(): void {
-    if (GameHelper.isCloseEnough(this.x, this._startingX)) {
-      this.body.setVelocityX(0);
-      this.startPatrol();
-    } else {
-      const direction = Math.sign(this._startingX - this.x);
-      this.body.setVelocityX(direction * this._config.patrolSpeed);
-    }
+    this._direction = Math.sign(this._player.x - this.x);
+    this.body.setVelocityX(this._direction * this._config.speed);
   }
 
   private updateFlipX(): void {
     // Patrol is using a tween, which updates X position instead of velocity
     if (this._isPatrolling) {
-      this.setFlipX(this._patrolDirection < 0);
+      this.setFlipX(this._direction < 0);
     } //
     else {
       const distanceToPlayer = Phaser.Math.Distance.Between(this.x, this.y, this._player.x, this._player.y);
 
       if (distanceToPlayer <= this._config.chaseDistance) {
-        const playerDirection = Math.sign(this._player.x - this.x);
-        this.setFlipX(playerDirection < 0);
+        this._direction = Math.sign(this._player.x - this.x);
+        this.setFlipX(this._direction < 0);
       } //
       else {
         this.setFlipX(this.body.velocity.x < 0);

src/helpers/game.helper.ts

@@ -1,4 +1,4 @@
-import { Sprite, Tween } from "@phaser-aliases";
+import { Sprite, SpriteWithDynamicBody, Tween } from "@phaser-aliases";
 import { AnimationTag } from "@tags";
 import { Scene } from "phaser";
 
@@ -66,4 +66,71 @@ export class GameHelper {
       yoyo: true,
     });
   }
+
+  public static isObstacleAhead(
+    object: SpriteWithDynamicBody,
+    scene: Scene,
+    params?: {
+      debug: boolean;
+      debugColor?: number;
+    }
+  ): boolean {
+    // body origin is top left. we check the center of the sprite
+    const posY = object.body.y + object.body.height / 2;
+    return GameHelper.isColliderAtY(object, scene, posY, params);
+  }
+
+  public static isLedgeAhead(
+    object: SpriteWithDynamicBody,
+    scene: Scene,
+    params?: {
+      debug: boolean;
+      debugColor?: number;
+    }
+  ): boolean {
+    // body origin is top left. we check the bottom of the sprite + arbitrary offset of 10px
+    const posY = object.body.y + object.body.height + 10;
+    return !GameHelper.isColliderAtY(object, scene, posY, params);
+  }
+
+  private static isColliderAtY(
+    object: SpriteWithDynamicBody,
+    scene: Scene,
+    yPos: number,
+    params?: {
+      debug: boolean;
+      debugColor?: number;
+    }
+  ): boolean {
+    const direction = object.flipX ? "LEFT" : "RIGHT";
+    const baseOffset = object.body.width / 2;
+    // body origin is top left, so we add the width of the sprite if looking right.
+    const offsetX = direction === "RIGHT" ? baseOffset + object.body.width : -baseOffset;
+    const checkX = object.body.x + offsetX;
+    const checkY = yPos;
+
+    // Create a test groundCheckRect at the given position
+    const groundCheckRect = new Phaser.Geom.Rectangle(checkX, checkY, 2, 2);
+    const { x, y, width, height } = groundCheckRect;
+    // Check if any physical object is overlapping with our test groundCheckRect
+    const overlappingObjects = scene.physics.overlapRect(x, y, width, height, true, true);
+
+    if (params?.debug) {
+      const debugGraphics = scene.add.graphics();
+      debugGraphics.clear();
+      debugGraphics.setDepth(1000000);
+      debugGraphics.lineStyle(2, params.debugColor ?? 0xff0000);
+      debugGraphics.strokeRect(checkX, checkY, 2, 2);
+
+      scene.time.addEvent({
+        delay: 1000,
+        callback: () => debugGraphics.destroy(),
+        callbackScope: this,
+        loop: false,
+      });
+    }
+
+    // TODO: check for static objects only
+    return overlappingObjects.filter((obj) => obj instanceof Phaser.Physics.Arcade.StaticBody).length > 0;
+  }
 }

src/levels/level-1/1-forest.level.ts

@@ -110,9 +110,9 @@ export class ForestLevel {
     this.setCollisions();
   }
 
-  public update(): void {
+  public update(time: number, delta: number): void {
     this._ennemies.getChildren().forEach((ennemy) => {
-      ennemy.update();
+      ennemy.update(time, delta);
     });
   }
 
@@ -163,6 +163,8 @@ export class ForestLevel {
       .forEach((collider) => {
         collider.alpha = 0;
       });
+
+    this._scene.physics.world.enable(this._colliderGroup);
   }
 
   private addHero(): void {
@@ -196,11 +198,11 @@ export class ForestLevel {
     const patrols = positions.filter((position) => position.type === "ennemy_patrol");
 
     patrols.forEach((patrol, index) => {
-      if (!patrol.x || !patrol.y || !patrol.polyline || patrol.polyline.length < 2) {
+      if (!patrol.x || !patrol.y) {
         throw Error("Invalid patrol object");
       }
 
-      const { x, y, polyline } = patrol;
+      const { x, y } = patrol;
       const ennemyTag = patrol.name;
 
       if (!isEnumValue(EnnemyTag, ennemyTag)) {
@@ -211,7 +213,6 @@ export class ForestLevel {
         x,
         y,
         chaseDistance: 200,
-        patrolDistance: polyline[1].x,
         speed: this.hero.speed - 80,
         patrolSpeed: 40,
         sprite: ennemyTag,
@@ -251,6 +252,16 @@ export class ForestLevel {
         throw Error("ennemy is not a sprite");
       }
 
+      if (!("body" in projectile)) {
+        throw Error("projectile has no body");
+      }
+
+      // TODO: compute strength based on ennemy mass
+      const knockbackStrength = 50;
+      const direction = projectile.body.velocity.x > 0 ? 1 : -1;
+
+      ennemy.body.setVelocityX(knockbackStrength * direction);
+      ennemy.knockback(knockbackStrength, direction);
       ennemy.hurt(this.hero.damage);
       projectile.destroy();
     });