- hp UI

Robouste · Robouste · commit 0ebd85fe7610 · 2025-01-25T01:34:36.000+01:00
diff --git a/public/assets/sprites/ui/heart-background.webp b/public/assets/sprites/ui/heart-background.webp
diff --git a/public/assets/sprites/ui/heart-border.webp b/public/assets/sprites/ui/heart-border.webp
diff --git a/public/assets/sprites/ui/heart.webp b/public/assets/sprites/ui/heart.webp
diff --git a/public/assets/spritesheets/heart-spritesheet-36.webp b/public/assets/spritesheets/heart-spritesheet-36.webp
diff --git a/src/configs/assets.config.ts b/src/configs/assets.config.ts
@@ -44,6 +44,18 @@ export class AssetsConfig {
         tag: ImageTag.PROJECTILE_ARROW,
         url: "sprites/projectiles/arrow.webp",
       },
+      {
+        tag: ImageTag.HEART,
+        url: "sprites/ui/heart.webp",
+      },
+      {
+        tag: ImageTag.HEART_BORDER,
+        url: "sprites/ui/heart-border.webp",
+      },
+      {
+        tag: ImageTag.HEART_BACKGROUND,
+        url: "sprites/ui/heart-background.webp",
+      },
     ];
   }
 
@@ -122,6 +134,14 @@ export class AssetsConfig {
           frameHeight: 32,
         },
       },
+      {
+        tag: SpritesheetTag.HEART,
+        url: "spritesheets/heart-spritesheet-36.webp",
+        config: {
+          frameWidth: 36,
+          frameHeight: 36,
+        },
+      },
     ];
   }
 
diff --git a/src/game-objects/hero.game-object.ts b/src/game-objects/hero.game-object.ts
@@ -3,7 +3,7 @@ import { depthsConfig } from "../configs";
 import { HeroState } from "../helpers";
 import { GameHelper } from "../helpers/game.helper";
 import { ArcadeBody, ArcadeSprite } from "../phaser-aliases";
-import { AnimationTag, ImageTag, SfxTag, SpritesheetTag } from "../tags";
+import { AnimationTag, HeroEventTag, ImageTag, SfxTag, SpritesheetTag } from "../tags";
 
 export class Hero extends ArcadeSprite {
   public declare body: ArcadeBody;
@@ -30,6 +30,9 @@ export class Hero extends ArcadeSprite {
   public get hp(): number {
     return this._hp;
   }
+  public get maximumHp(): number {
+    return this._maximumHp;
+  }
 
   private _invincibilityWindow = 1000;
   private _isInvincible = false;
@@ -134,7 +137,8 @@ export class Hero extends ArcadeSprite {
     });
 
     this._hp -= damage;
-    console.log("aie");
+
+    this.scene.events.emit(HeroEventTag.HURT);
 
     if (this._hp <= 0) {
       this.scene.sound.play(SfxTag.HERO_DIE);
diff --git a/src/scenes/game.scene.ts b/src/scenes/game.scene.ts
@@ -2,7 +2,7 @@ import { Scene } from "phaser";
 import { AssetsConfig } from "../configs";
 import { Hero } from "../game-objects";
 import { ForestLevel } from "../levels";
-import { SceneTag } from "../tags";
+import { AnimationTag, HeroEventTag, ImageTag, SceneTag, SpritesheetTag } from "../tags";
 
 export class Game extends Scene {
   private _hero: Hero | undefined;
@@ -46,7 +46,11 @@ export class Game extends Scene {
 
     this._hero = new Hero(this);
     this._hero.on("destroy", () => this.scene.start(SceneTag.GAME_OVER));
+
+    this.events.on(HeroEventTag.HURT, () => {});
     this._currentLevel = new ForestLevel(this._hero, this);
+
+    this.createHeartsAnimation();
   }
 
   /**
@@ -72,6 +76,7 @@ export class Game extends Scene {
 
     this._hero?.update(time, delta);
     this._currentLevel?.update();
+    this.updateHearts();
   }
 
   private createDebug(): void {
@@ -93,4 +98,35 @@ export class Game extends Scene {
       this._hero.heroState.set({ action: "MOVING-RIGHT" });
     }
   }
+
+  private updateHearts(): void {
+    if (!this._hero) {
+      return;
+    }
+
+    const { hp, maximumHp } = this._hero;
+
+    this.drawHearts(maximumHp, ImageTag.HEART_BACKGROUND);
+    this.drawHearts(maximumHp, ImageTag.HEART_BORDER);
+    this.drawHearts(hp, ImageTag.HEART);
+  }
+
+  private drawHearts(loop: number, imageTag: ImageTag): void {
+    for (let i = 0; i < loop; i++) {
+      const heart = this.add.sprite(16 + 18 * i, 16, imageTag);
+      heart.setOrigin(0, 0);
+      heart.setScrollFactor(0);
+    }
+  }
+
+  private createHeartsAnimation(): void {
+    this.anims.create({
+      key: AnimationTag.HEART_CHANGE,
+      frames: this.anims.generateFrameNumbers(SpritesheetTag.HEART, {
+        start: 0,
+        end: 4,
+      }),
+      frameRate: 8,
+    });
+  }
 }
diff --git a/src/tags/animation.tag.ts b/src/tags/animation.tag.ts
@@ -11,4 +11,5 @@ export enum AnimationTag {
   ENNEMY_DEATH = "ennemy-death_animation",
   ENNEMY_ATTACK = "ennemy-attack_animation",
   ENNEMY_ATTACK_HITBOX = "ennemy-attack-hitbox_animation",
+  HEART_CHANGE = "heart-change_animation",
 }
diff --git a/src/tags/hero-event.tag.ts b/src/tags/hero-event.tag.ts
@@ -0,0 +1,3 @@
+export enum HeroEventTag {
+  HURT = "hero-hurt_event_tag",
+}
diff --git a/src/tags/image.tag.ts b/src/tags/image.tag.ts
@@ -4,4 +4,7 @@ export enum ImageTag {
   FOREST_BACKGROUND_DAY_3 = "forest-background-day-3_image_tag",
   FOREST_BACKGROUND_DAY_4 = "forest-background-day-4_image_tag",
   PROJECTILE_ARROW = "projectile-arrow_image_tag",
+  HEART = "heart_image_tag",
+  HEART_BORDER = "heart-border_image_tag",
+  HEART_BACKGROUND = "heart-background_image_tag",
 }
diff --git a/src/tags/index.ts b/src/tags/index.ts
@@ -1,6 +1,7 @@
 export * from './animation.tag';
 export * from './background-sound.tag';
 export * from './ennemy.tag';
+export * from './hero-event.tag';
 export * from './image.tag';
 export * from './plugin.tag';
 export * from './scene.tag';
diff --git a/src/tags/spritesheet.tag.ts b/src/tags/spritesheet.tag.ts
@@ -1,4 +1,5 @@
 export enum SpritesheetTag {
   HERO = "hero_spritesheet",
   PIXIE_HITBOX = "pixie-hitbox_ennemy_tag",
+  HEART = "heart-animated_spritesheet",
 }

Original file line number	Diff line number	Diff line change
`@@ -11,4 +11,5 @@ export enum AnimationTag {`
`11`	`11`	`ENNEMY_DEATH = "ennemy-death_animation",`
`12`	`12`	`ENNEMY_ATTACK = "ennemy-attack_animation",`
`13`	`13`	`ENNEMY_ATTACK_HITBOX = "ennemy-attack-hitbox_animation",`
	`14`	`+ HEART_CHANGE = "heart-change_animation",`
`14`	`15`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export enum HeroEventTag {`
	`2`	`+ HURT = "hero-hurt_event_tag",`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -4,4 +4,7 @@ export enum ImageTag {`
`4`	`4`	`FOREST_BACKGROUND_DAY_3 = "forest-background-day-3_image_tag",`
`5`	`5`	`FOREST_BACKGROUND_DAY_4 = "forest-background-day-4_image_tag",`
`6`	`6`	`PROJECTILE_ARROW = "projectile-arrow_image_tag",`
	`7`	`+ HEART = "heart_image_tag",`
	`8`	`+ HEART_BORDER = "heart-border_image_tag",`
	`9`	`+ HEART_BACKGROUND = "heart-background_image_tag",`
`7`	`10`	`}`