- raycasting to detect hero

Author: Robouste

package-lock.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "phaser": "^3.87.0",
     "phaser-animated-tiles": "^2.0.2",
+    "phaser-raycaster": "^0.10.11",
     "rxjs": "^7.8.1"
   },
   "devDependencies": {

package.json

@@ -1,12 +1,12 @@
-import { Scene } from "phaser";
+import { CustomScene } from "@game-types";
 import { depthsConfig } from "../configs";
 import { GameHelper } from "../helpers";
 import { ANIMATION, ArcadeBody, ArcadeSprite } from "../phaser-aliases";
 import { AnimationTag, EnnemyTag, SfxTag } from "../tags";
 import { Hero } from "./hero.game-object";
 
 export interface EnnemyConfig {
-  scene: Scene;
+  scene: CustomScene;
   x: number;
   y: number;
   chaseDistance: number;
@@ -28,6 +28,16 @@ export class Ennemy extends ArcadeSprite {
     return this._config.speed;
   }
 
+  public get direction(): number {
+    return this._direction;
+  }
+  protected debugGraphics: Phaser.GameObjects.Graphics;
+
+  protected set direction(value: number) {
+    this._direction = value;
+    this.setFlipX(value < 0);
+  }
+
   private _player: Hero;
   private _config: EnnemyConfig;
   private _isAttacking = false;
@@ -43,8 +53,13 @@ export class Ennemy extends ArcadeSprite {
     return this.scene.physics;
   }
 
+  private _raycaster: Raycaster;
+  private _ray: Raycaster.Ray;
+
   constructor(config: EnnemyConfig, player: Hero) {
     super(config.scene, config.x, config.y, config.sprite);
+    this.debugGraphics = this.scene.add.graphics();
+
     this._config = config;
 
     this._player = player;
@@ -80,28 +95,38 @@ 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.direction = Phaser.Math.Distance.Between(this.x, this.y, this._player.x, this._player.y) > 0 ? 1 : -1;
 
     this.startPatrol();
+    const plugin: PhaserRaycaster = this._config.scene.raycasterPlugin;
+
+    this._raycaster = plugin.createRaycaster({
+      debug: false,
+    });
+    this.scene.physics.world.staticBodies.entries.forEach((body) => this._raycaster.mapGameObjects(body.gameObject));
+    this._raycaster.mapGameObjects(this._player, true);
+
+    this._ray = this._raycaster.createRay();
+    this._ray.setRayRange(this._config.chaseDistance);
+    // this._ray.setRayRange(1000);
   }
 
   public update(_: number, __: number): void {
     if (this._config.hp <= 0 || this._isAttacking) {
       return;
     }
 
-    this.updateFlipX();
-
     const distanceToPlayer = GameHelper.getEdgeToEdgeDistance(this, this._player);
 
     if (distanceToPlayer <= this._config.range) {
+      this.stopPatrol();
       this.attack();
     } //
-    else if (distanceToPlayer <= this._config.chaseDistance) {
+    else if (this.heroIsInSight()) {
       this.stopPatrol();
       this.chasePlayer();
     } //
-    else if (distanceToPlayer > this._config.chaseDistance && !this._isPatrolling) {
+    else if (!this._isPatrolling) {
       this.startPatrol();
     }
 
@@ -139,7 +164,7 @@ export class Ennemy extends ArcadeSprite {
         return;
       }
       const speed = this._isPatrolling ? this._config.patrolSpeed : this._config.speed;
-      this.body.setVelocityX(speed * this._direction);
+      this.body.setVelocityX(speed * this.direction);
     });
   }
 
@@ -148,7 +173,7 @@ export class Ennemy extends ArcadeSprite {
 
     GameHelper.animate(this, AnimationTag.ENNEMY_MOVING);
 
-    this.body.setVelocityX(this._config.patrolSpeed * this._direction);
+    this.body.setVelocityX(this._config.patrolSpeed * this.direction);
   }
 
   private stopPatrol(): void {
@@ -157,8 +182,8 @@ export class Ennemy extends ArcadeSprite {
 
   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);
+      this.direction *= -1;
+      this.body.setVelocityX(this._config.patrolSpeed * this.direction);
     }
   }
 
@@ -170,7 +195,7 @@ export class Ennemy extends ArcadeSprite {
     this.scene.sound.play(SfxTag.PIXIE_ATTACK);
 
     const hitboxPosition = {
-      x: this.x + this._direction * this._attackHitbox.width,
+      x: this.x + this.direction * this._attackHitbox.width,
       y: this.y,
     };
 
@@ -200,27 +225,22 @@ export class Ennemy extends ArcadeSprite {
     });
   }
 
-  private chasePlayer(): void {
-    this._direction = Math.sign(this._player.x - this.x);
-    this.body.setVelocityX(this._direction * this._config.speed);
-  }
+  private heroIsInSight(): boolean {
+    this._ray.setOrigin(this.x, this.y);
+    this._ray.setAngleDeg(this._direction === 1 ? 0 : 180);
+    this._ray.setConeDeg(this._isPatrolling ? 30 : 90);
+    const result = this._ray.castCone();
 
-  private updateFlipX(): void {
-    // Patrol is using a tween, which updates X position instead of velocity
-    if (this._isPatrolling) {
-      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) {
-        this._direction = Math.sign(this._player.x - this.x);
-        this.setFlipX(this._direction < 0);
-      } //
-      else {
-        this.setFlipX(this.body.velocity.x < 0);
+    return result.some((line) => {
+      if ("object" in line) {
+        return line.object instanceof Hero;
       }
-    }
+    });
+  }
+
+  private chasePlayer(): void {
+    this.direction = Math.sign(this._player.x - this.x);
+    this.body.setVelocityX(this.direction * this._config.speed);
   }
 
   private setbodySize(params: { isAttacking: boolean }): void {

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

@@ -59,9 +59,7 @@ export class Hero extends ArcadeSprite {
   constructor(scene: Scene) {
     super(scene, 0, 0, SpritesheetTag.HERO);
 
-    this.setScale(0.5).setDepth(depthsConfig.hero);
-
-    // this.setCollideWorldBounds(true);
+    this.setScale(0.6).setDepth(depthsConfig.hero);
 
     if (!this.scene.input.keyboard) {
       throw Error("Keyboard plugin is not available");
@@ -82,6 +80,7 @@ export class Hero extends ArcadeSprite {
   public spawn(x: number, y: number): void {
     this.scene.add.existing(this);
     this.scene.physics.add.existing(this);
+    this.scene.physics.world.enable(this);
 
     this.x = x;
     this.y = y;

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

@@ -123,7 +123,7 @@ export class GameHelper {
       debugGraphics.strokeRect(checkX, checkY, 2, 2);
 
       scene.time.addEvent({
-        delay: 1000,
+        delay: 1,
         callback: () => debugGraphics.destroy(),
         callbackScope: this,
         loop: false,

src/helpers/game.helper.ts

@@ -1,5 +1,5 @@
-export * from './animations.manager';
-export * from './function';
-export * from './game.helper';
-export * from './hero.state';
-export * from './systems.helper';
+export * from "./animations.manager";
+export * from "./function";
+export * from "./game.helper";
+export * from "./hero.state";
+export * from "./systems.helper";

src/helpers/index.ts

@@ -1,5 +1,6 @@
 import { depthsConfig } from "@configs";
 import { Ennemy, EnnemyConfig, Hero } from "@game-objects";
+import { CustomScene } from "@game-types";
 import { GameHelper, isEnumValue } from "@helpers";
 import { Sprite, Tilemap } from "@phaser-aliases";
 import {
@@ -13,7 +14,6 @@ import {
   TilemapTag,
   TilesetTag,
 } from "@tags";
-import { Scene } from "phaser";
 import { ForestAnimations } from "./forest.animations";
 
 type ValueOf<T> = T[keyof T];
@@ -85,7 +85,7 @@ export class ForestLevel {
 
   private _animationsManager: ForestAnimations;
 
-  constructor(public hero: Hero, private _scene: Scene) {
+  constructor(public hero: Hero, private _scene: CustomScene) {
     this._scene.sound.play(BackgroundSound.RIVER_FLOWING_INSECTS, {
       loop: true,
       volume: GameHelper.audioIsEnabled ? 1 : 0,
@@ -147,7 +147,7 @@ export class ForestLevel {
         layer?.setDepth(this._layersConfig[tag].depth);
       });
 
-    this._scene.sys.animatedTiles.init(this._map);
+    this._scene.animatedTiles.init(this._map);
   }
 
   private addColliders(): void {

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

@@ -1,4 +1,7 @@
+import { PluginTag } from "@tags";
 import { Game, Types } from "phaser";
+import AnimatedTiles from "phaser-animated-tiles/dist/AnimatedTiles.js";
+import PhaserRaycaster from "phaser-raycaster";
 import { GameHelper } from "./helpers";
 import { Boot, GameOver, Game as MainGame, MainMenu, Preloader } from "./scenes";
 
@@ -24,6 +27,20 @@ const config: Types.Core.GameConfig = {
   input: {
     keyboard: true,
   },
+  plugins: {
+    scene: [
+      {
+        key: PluginTag.RAYCASTER,
+        plugin: PhaserRaycaster,
+        mapping: PluginTag.RAYCASTER,
+      },
+      {
+        key: PluginTag.ANIMATED_TILES,
+        plugin: AnimatedTiles,
+        mapping: PluginTag.ANIMATED_TILES,
+      },
+    ],
+  },
   scene: [Boot, Preloader, MainMenu, MainGame, GameOver],
 };
 

src/main.ts

@@ -1,12 +1,11 @@
+import { CustomScene } from "@game-types";
 import { GameHelper } from "@helpers";
 import { ANIMATION, Sprite } from "@phaser-aliases";
-import { Scene } from "phaser";
-import { AssetsConfig } from "../configs";
 import { Hero } from "../game-objects";
 import { ForestLevel } from "../levels";
 import { AnimationTag, HeroEventTag, ImageTag, SceneTag, SpritesheetTag } from "../tags";
 
-export class Game extends Scene {
+export class Game extends CustomScene {
   private _hero: Hero | undefined;
   private _keyboard: Phaser.Input.Keyboard.KeyboardPlugin | undefined;
   private _toggleDebugKey: Phaser.Input.Keyboard.Key | undefined;
@@ -20,12 +19,6 @@ export class Game extends Scene {
     super(SceneTag.GAME);
   }
 
-  public preload(): void {
-    AssetsConfig.plugins.forEach((config) =>
-      this.load.scenePlugin(config.tag, config.url, config.systemKey, config.sceneKey)
-    );
-  }
-
   public create(): void {
     if (!this.input.keyboard) {
       throw Error("Keyboard plugin is not available");

src/scenes/game.scene.ts

@@ -1,3 +1,4 @@
 export enum PluginTag {
   ANIMATED_TILES = "animatedTiles",
+  RAYCASTER = "raycasterPlugin",
 }