Folder structure

assets/Scripts/Game/Unit/Player/PlayerUI/PlayerHealthUI.ts

@@ -0,0 +1,19 @@
+import { Component, ProgressBar, _decorator } from "cc";
+import { UnitHealth } from "../UnitHealth";
+const { ccclass, property } = _decorator;
+
+@ccclass("PlayerHealthUI")
+export class PlayerHealthUI extends Component {
+    @property(ProgressBar) public healthBar: ProgressBar;
+    private health: UnitHealth;
+
+    public init(health: UnitHealth): void {
+        this.healthBar.progress = 1;
+        this.health = health;
+        this.health.HealthPointsChangeEvent.on(this.updateHealthBar, this);
+    }
+
+    private updateHealthBar(): void {
+        this.healthBar.progress = this.health.HealthPoints / this.health.MaxHealthPoints;
+    }
+}

assets/Scripts/Game/Unit/Player/PlayerUI/PlayerHealthUI.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "def45aaf-cc88-4ec6-97ff-4d5b0beb015b",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/Scripts/Game/Unit/Player/PlayerUI/PlayerUI.ts

@@ -0,0 +1,13 @@
+import { Component, _decorator } from "cc";
+import { UnitHealth } from "../UnitHealth";
+import { PlayerHealthUI } from "./PlayerHealthUI";
+const { ccclass, property } = _decorator;
+
+@ccclass("PlayerUI")
+export class PlayerUI extends Component {
+    @property(PlayerHealthUI) private healthUI: PlayerHealthUI;
+
+    public init(playerHealth: UnitHealth): void {
+        this.healthUI.init(playerHealth);
+    }
+}

assets/Scripts/Game/Unit/Player/PlayerUI/PlayerUI.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "6247f0de-45c1-4e74-89aa-388c217ce3a3",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}