135 lines
4.9 KiB
TypeScript
135 lines
4.9 KiB
TypeScript
import ImageFrameConfig = Phaser.Types.Loader.FileTypes.ImageFrameConfig;
|
|
import { DirtyScene } from "../Game/DirtyScene";
|
|
import { gameManager } from "../Game/GameManager";
|
|
|
|
const TextName: string = "Loading...";
|
|
const LogoFrame: ImageFrameConfig = { frameWidth: 310, frameHeight: 60 };
|
|
|
|
const loadingBarHeight: number = 16;
|
|
const padding: number = 5;
|
|
|
|
export class Loader {
|
|
private progressContainer!: Phaser.GameObjects.Graphics;
|
|
private progress!: Phaser.GameObjects.Graphics;
|
|
private progressAmount: number = 0;
|
|
private logo: Phaser.GameObjects.Image | undefined;
|
|
private loadingText: Phaser.GameObjects.Text | null = null;
|
|
private logoNameIndex!: string;
|
|
|
|
public constructor(private scene: Phaser.Scene) {}
|
|
|
|
public addLoader(): void {
|
|
// If there is nothing to load, do not display the loader.
|
|
if (this.scene.load.list.entries.length === 0) {
|
|
return;
|
|
}
|
|
|
|
const logoResource = gameManager.currentStartedRoom.loadingLogo ?? "static/images/logo.png";
|
|
this.logoNameIndex = "logoLoading" + logoResource;
|
|
|
|
const loadingBarWidth: number = Math.floor(this.scene.game.renderer.width / 3);
|
|
|
|
const promiseLoadLogoTexture = new Promise<Phaser.GameObjects.Image>((res) => {
|
|
if (this.scene.load.textureManager.exists(this.logoNameIndex)) {
|
|
return res(
|
|
(this.logo = this.scene.add.image(
|
|
this.scene.game.renderer.width / 2,
|
|
this.scene.game.renderer.height / 2 - 150,
|
|
this.logoNameIndex
|
|
))
|
|
);
|
|
} else {
|
|
//add loading if logo image is not ready
|
|
this.loadingText = this.scene.add.text(
|
|
this.scene.game.renderer.width / 2,
|
|
this.scene.game.renderer.height / 2 - 50,
|
|
TextName
|
|
);
|
|
}
|
|
this.scene.load.spritesheet(this.logoNameIndex, logoResource, LogoFrame);
|
|
this.scene.load.once(`filecomplete-spritesheet-${this.logoNameIndex}`, () => {
|
|
if (this.loadingText) {
|
|
this.loadingText.destroy();
|
|
}
|
|
return res(
|
|
(this.logo = this.scene.add.image(
|
|
this.scene.game.renderer.width / 2,
|
|
this.scene.game.renderer.height / 2 - 150,
|
|
this.logoNameIndex
|
|
))
|
|
);
|
|
});
|
|
});
|
|
|
|
this.progressContainer = this.scene.add.graphics();
|
|
this.progress = this.scene.add.graphics();
|
|
this.progressContainer.fillStyle(0x444444, 0.8);
|
|
|
|
this.resize();
|
|
|
|
this.scene.load.on("progress", (value: number) => {
|
|
this.progressAmount = value;
|
|
this.drawProgress();
|
|
});
|
|
this.scene.load.on("complete", () => {
|
|
if (this.loadingText) {
|
|
this.loadingText.destroy();
|
|
}
|
|
promiseLoadLogoTexture
|
|
.then((resLoadingImage: Phaser.GameObjects.Image) => {
|
|
resLoadingImage.destroy();
|
|
})
|
|
.catch((e) => console.error(e));
|
|
this.progress.destroy();
|
|
this.progressContainer.destroy();
|
|
if (this.scene instanceof DirtyScene) {
|
|
this.scene.markDirty();
|
|
}
|
|
});
|
|
}
|
|
|
|
public removeLoader(): void {
|
|
if (this.scene.load.textureManager.exists(this.logoNameIndex)) {
|
|
this.scene.load.textureManager.remove(this.logoNameIndex);
|
|
}
|
|
}
|
|
|
|
public resize(): void {
|
|
const loadingBarWidth: number = Math.floor(this.scene.game.renderer.width / 3);
|
|
|
|
this.progressContainer.clear();
|
|
this.progressContainer.fillStyle(0x444444, 0.8);
|
|
this.progressContainer.fillRect(
|
|
(this.scene.game.renderer.width - loadingBarWidth) / 2 - padding,
|
|
this.scene.game.renderer.height / 2 + 50 - padding,
|
|
loadingBarWidth + padding * 2,
|
|
loadingBarHeight + padding * 2
|
|
);
|
|
|
|
this.drawProgress();
|
|
|
|
if (this.loadingText) {
|
|
this.loadingText.x = this.scene.game.renderer.width / 2;
|
|
this.loadingText.y = this.scene.game.renderer.height / 2 - 50;
|
|
}
|
|
|
|
if (this.logo) {
|
|
this.logo.x = this.scene.game.renderer.width / 2;
|
|
this.logo.y = this.scene.game.renderer.height / 2 - 150;
|
|
}
|
|
}
|
|
|
|
private drawProgress() {
|
|
const loadingBarWidth: number = Math.floor(this.scene.game.renderer.width / 3);
|
|
|
|
this.progress.clear();
|
|
this.progress.fillStyle(0xbbbbbb, 1);
|
|
this.progress.fillRect(
|
|
(this.scene.game.renderer.width - loadingBarWidth) / 2,
|
|
this.scene.game.renderer.height / 2 + 50,
|
|
loadingBarWidth * this.progressAmount,
|
|
loadingBarHeight
|
|
);
|
|
}
|
|
}
|