Add loading progress bar to the creation template

templates/template-creation-web/package.json

@@ -5,7 +5,8 @@
   "type": "module",
   "scripts": {
     "build": "tsc && vite build",
-    "dev": "vite"
+    "dev": "vite",
+    "start": "vite"
   },
   "dependencies": {
     "@esotericsoftware/spine-pixi-v8": "^4.2.66",

templates/template-creation-web/src/app/screens/LoadScreen.ts

@@ -1,43 +1,52 @@
+import { CircularProgressBar } from "@pixi/ui";
 import { animate } from "motion";
 import type { ObjectTarget } from "motion/react";
-import { Container, Sprite, Text, Texture } from "pixi.js";
+import { Container, Sprite, Texture } from "pixi.js";
 
 /** Screen shown while loading assets */
 export class LoadScreen extends Container {
   /** Assets bundles required by this screen */
   public static assetBundles = ["preload"];
   /** The PixiJS logo */
   private pixiLogo: Sprite;
-  /** LThe loading message display */
-  private message: Text;
+  /** Progress Bar */
+  private progressBar: CircularProgressBar;
 
   constructor() {
     super();
 
-    this.message = new Text({
-      text: "Loading...",
-      style: {
-        fill: "white",
-        fontFamily: "Verdana",
-        align: "center",
-        fontSize: 40,
-      },
+    this.progressBar = new CircularProgressBar({
+      backgroundColor: "#3d3d3d",
+      fillColor: "#e72264",
+      radius: 100,
+      lineWidth: 15,
+      value: 20,
+      backgroundAlpha: 0.5,
+      fillAlpha: 0.8,
+      cap: "round",
     });
-    this.message.anchor.set(0.5);
-    this.addChild(this.message);
+
+    this.progressBar.x += this.progressBar.width / 2;
+    this.progressBar.y += -this.progressBar.height / 2;
+
+    this.addChild(this.progressBar);
 
     this.pixiLogo = new Sprite({
       texture: Texture.from("logo.svg"),
       anchor: 0.5,
-      scale: 0.5,
+      scale: 0.2,
     });
     this.addChild(this.pixiLogo);
   }
 
+  public onLoad(progress: number) {
+    this.progressBar.progress = progress;
+  }
+
   /** Resize the screen, fired whenever window size changes  */
   public resize(width: number, height: number) {
-    this.message.position.set(width * 0.5, height * 0.5 + 125);
     this.pixiLogo.position.set(width * 0.5, height * 0.5);
+    this.progressBar.position.set(width * 0.5, height * 0.5);
   }
 
   /** Show screen with animations */
@@ -47,9 +56,6 @@ export class LoadScreen extends Container {
 
   /** Hide screen with animations */
   public async hide() {
-    // Change then hide the loading message
-    this.message.text = "Ready!";
-
     await animate(this, { alpha: 0 } as ObjectTarget<this>, {
       duration: 0.3,
       ease: "linear",

templates/template-creation-web/src/engine/navigation/navigation.ts

@@ -25,6 +25,8 @@ interface AppScreen extends Container {
   blur?(): void;
   /** Focus the screen */
   focus?(): void;
+  /** Method to react on assets loading progress */
+  onLoad?: (progress: number) => void;
 }
 
 /** Interface for app screens constructors */
@@ -139,7 +141,15 @@ export class Navigation {
     // Load assets for the new screen, if available
     if (ctor.assetBundles) {
       // Load all assets required by this new screen
-      await Assets.loadBundle(ctor.assetBundles);
+      await Assets.loadBundle(ctor.assetBundles, (progress) => {
+        if (this.currentScreen?.onLoad) {
+          this.currentScreen.onLoad(progress * 100);
+        }
+      });
+    }
+
+    if (this.currentScreen?.onLoad) {
+      this.currentScreen.onLoad(100);
     }
 
     // If there is a screen already created, hide and destroy it