Add scene solely dedicated to preloading assets

src/core/config/GameConfig.ts

@@ -118,6 +118,18 @@ export const GAME_CONFIG = {
   gameplay: {
     energyThreshold: 100,
     actionCost: 100
+  },
+
+  assets: {
+    spritesheets: [
+      { key: "warrior", path: "assets/sprites/actors/player/warrior.png", frameConfig: { frameWidth: 12, frameHeight: 15 } },
+      { key: "rat", path: "assets/sprites/actors/enemies/rat.png", frameConfig: { frameWidth: 16, frameHeight: 15 } },
+      { key: "bat", path: "assets/sprites/actors/enemies/bat.png", frameConfig: { frameWidth: 15, frameHeight: 15 } },
+      { key: "tiles0", path: "assets/tilesets/dungeon.png", frameConfig: { frameWidth: 16, frameHeight: 16 } },
+    ],
+    images: [
+      { key: "splash_bg", path: "assets/ui/splash_bg.png" }
+    ]
   }
 } as const;
 

src/main.ts

@@ -2,6 +2,7 @@ import Phaser from "phaser";
 import GameUI from "./ui/GameUI";
 import { GameScene } from "./scenes/GameScene";
 import { MenuScene } from "./scenes/MenuScene";
+import { PreloadScene } from "./scenes/PreloadScene";
 
 new Phaser.Game({
   type: Phaser.AUTO,
@@ -14,5 +15,5 @@ new Phaser.Game({
   backgroundColor: "#111",
   pixelArt: true,
   roundPixels: true,
-  scene: [MenuScene, GameScene, GameUI]
+  scene: [PreloadScene, MenuScene, GameScene, GameUI]
 });

src/scenes/GameScene.ts

@@ -42,13 +42,6 @@ export class GameScene extends Phaser.Scene {
     super("GameScene");
   }
 
-  preload() {
-    this.load.spritesheet("warrior", "warrior.png", { frameWidth: 12, frameHeight: 15 });
-    this.load.spritesheet("rat", "rat.png", { frameWidth: 16, frameHeight: 15 });
-    this.load.spritesheet("bat", "bat.png", { frameWidth: 15, frameHeight: 15 });
-    this.load.spritesheet("tiles0", "assets/tiles0.png", { frameWidth: 16, frameHeight: 16 });
-  }
-
   create() {
     this.cursors = this.input.keyboard!.createCursorKeys();
 

src/scenes/MenuScene.ts

@@ -7,10 +7,6 @@ export class MenuScene extends Phaser.Scene {
     super("MenuScene");
   }
 
-  preload() {
-    this.load.image('splash_bg', 'splash_bg.png');
-  }
-
   create() {
     const { width, height } = this.scale;
 

src/scenes/PreloadScene.ts

@@ -0,0 +1,53 @@
+import Phaser from "phaser";
+import { GAME_CONFIG } from "../core/config/GameConfig";
+
+export class PreloadScene extends Phaser.Scene {
+  constructor() {
+    super("PreloadScene");
+  }
+
+  preload() {
+    const { width, height } = this.scale;
+
+    // Loading UI
+    const progressLimit = 300;
+    const progressBar = this.add.graphics();
+    const progressBox = this.add.graphics();
+    progressBox.fillStyle(0x222222, 0.8);
+    progressBox.fillRect(width / 2 - progressLimit / 2 - 10, height / 2 - 25, progressLimit + 20, 50);
+
+    const loadingText = this.make.text({
+      x: width / 2,
+      y: height / 2 - 50,
+      text: "Loading Assets...",
+      style: {
+        font: "20px monospace",
+        color: "#ffffff"
+      }
+    });
+    loadingText.setOrigin(0.5, 0.5);
+
+    this.load.on("progress", (value: number) => {
+      progressBar.clear();
+      progressBar.fillStyle(0xff2266, 1);
+      progressBar.fillRect(width / 2 - progressLimit / 2, height / 2 - 15, progressLimit * value, 30);
+    });
+
+    this.load.on("complete", () => {
+      progressBar.destroy();
+      progressBox.destroy();
+      loadingText.destroy();
+      this.scene.start("MenuScene");
+    });
+
+    // Load Spritesheets
+    GAME_CONFIG.assets.spritesheets.forEach(asset => {
+      this.load.spritesheet(asset.key, asset.path, asset.frameConfig);
+    });
+
+    // Load Images
+    GAME_CONFIG.assets.images.forEach(asset => {
+      this.load.image(asset.key, asset.path);
+    });
+  }
+}