diff --git a/public/bat.png b/public/assets/sprites/actors/enemies/bat.png similarity index 100% rename from public/bat.png rename to public/assets/sprites/actors/enemies/bat.png diff --git a/public/rat.png b/public/assets/sprites/actors/enemies/rat.png similarity index 100% rename from public/rat.png rename to public/assets/sprites/actors/enemies/rat.png diff --git a/public/warrior.png b/public/assets/sprites/actors/player/warrior.png similarity index 100% rename from public/warrior.png rename to public/assets/sprites/actors/player/warrior.png diff --git a/public/assets/tiles0.png b/public/assets/tilesets/dungeon.png similarity index 100% rename from public/assets/tiles0.png rename to public/assets/tilesets/dungeon.png diff --git a/public/splash_bg.png b/public/assets/ui/splash_bg.png similarity index 100% rename from public/splash_bg.png rename to public/assets/ui/splash_bg.png diff --git a/src/core/config/GameConfig.ts b/src/core/config/GameConfig.ts index de2de22..6509981 100644 --- a/src/core/config/GameConfig.ts +++ b/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; diff --git a/src/main.ts b/src/main.ts index 9d95945..6f02be6 100644 --- a/src/main.ts +++ b/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] }); diff --git a/src/scenes/GameScene.ts b/src/scenes/GameScene.ts index bdee1a6..f2616d7 100644 --- a/src/scenes/GameScene.ts +++ b/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(); diff --git a/src/scenes/MenuScene.ts b/src/scenes/MenuScene.ts index f74bc15..7a94afa 100644 --- a/src/scenes/MenuScene.ts +++ b/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; diff --git a/src/scenes/PreloadScene.ts b/src/scenes/PreloadScene.ts new file mode 100644 index 0000000..44da41a --- /dev/null +++ b/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); + }); + } +}