From 7c6105d93a3b81ced8e8b858c8d762e72284ed9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Wed, 24 Nov 2021 15:21:07 +0100 Subject: [PATCH] Making the loader resizable This way, if the window is resized while loading, the loading bar will stay in the middle --- front/src/Phaser/Components/Loader.ts | 161 +++++++++++------- front/src/Phaser/Game/GameScene.ts | 10 +- front/src/Phaser/Login/CustomizeScene.ts | 7 +- .../src/Phaser/Login/SelectCharacterScene.ts | 6 +- .../src/Phaser/Login/SelectCompanionScene.ts | 6 +- 5 files changed, 121 insertions(+), 69 deletions(-) diff --git a/front/src/Phaser/Components/Loader.ts b/front/src/Phaser/Components/Loader.ts index d126aded..0534aa91 100644 --- a/front/src/Phaser/Components/Loader.ts +++ b/front/src/Phaser/Components/Loader.ts @@ -6,73 +6,114 @@ const TextName: string = "Loading..."; const LogoResource: string = "static/images/logo.png"; const LogoFrame: ImageFrameConfig = { frameWidth: 310, frameHeight: 60 }; -export const addLoader = (scene: Phaser.Scene): void => { - // If there is nothing to load, do not display the loader. - if (scene.load.list.entries.length === 0) { - return; +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; + + public constructor(private scene: Phaser.Scene) { } - let loadingText: Phaser.GameObjects.Text | null = null; - const loadingBarWidth: number = Math.floor(scene.game.renderer.width / 3); - const loadingBarHeight: number = 16; - const padding: number = 5; - const promiseLoadLogoTexture = new Promise((res) => { - if (scene.load.textureManager.exists(LogoNameIndex)) { - return res( - scene.add.image(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 150, LogoNameIndex) - ); - } else { - //add loading if logo image is not ready - loadingText = scene.add.text(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 50, TextName); + public addLoader(): void { + // If there is nothing to load, do not display the loader. + if (this.scene.load.list.entries.length === 0) { + return; } - scene.load.spritesheet(LogoNameIndex, LogoResource, LogoFrame); - scene.load.once(`filecomplete-spritesheet-${LogoNameIndex}`, () => { - if (loadingText) { - loadingText.destroy(); + + const loadingBarWidth: number = Math.floor(this.scene.game.renderer.width / 3); + + const promiseLoadLogoTexture = new Promise((res) => { + if (this.scene.load.textureManager.exists(LogoNameIndex)) { + return res( + this.logo = this.scene.add.image(this.scene.game.renderer.width / 2, this.scene.game.renderer.height / 2 - 150, 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); } - return res( - scene.add.image(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 150, LogoNameIndex) - ); + this.scene.load.spritesheet(LogoNameIndex, LogoResource, LogoFrame); + this.scene.load.once(`filecomplete-spritesheet-${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, LogoNameIndex) + ); + }); }); - }); - const progressContainer = scene.add.graphics(); - const progress = scene.add.graphics(); - progressContainer.fillStyle(0x444444, 0.8); - progressContainer.fillRect( - (scene.game.renderer.width - loadingBarWidth) / 2 - padding, - scene.game.renderer.height / 2 + 50 - padding, - loadingBarWidth + padding * 2, - loadingBarHeight + padding * 2 - ); + this.progressContainer = this.scene.add.graphics(); + this.progress = this.scene.add.graphics(); + this.progressContainer.fillStyle(0x444444, 0.8); - scene.load.on("progress", (value: number) => { - progress.clear(); - progress.fillStyle(0xbbbbbb, 1); - progress.fillRect( - (scene.game.renderer.width - loadingBarWidth) / 2, - scene.game.renderer.height / 2 + 50, - loadingBarWidth * value, + 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(); + }); + this.progress.destroy(); + this.progressContainer.destroy(); + if (this.scene instanceof DirtyScene) { + this.scene.markDirty(); + } + }); + } + + + public removeLoader(): void { + if (this.scene.load.textureManager.exists(LogoNameIndex)) { + this.scene.load.textureManager.remove(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 ); - }); - scene.load.on("complete", () => { - if (loadingText) { - loadingText.destroy(); - } - promiseLoadLogoTexture.then((resLoadingImage: Phaser.GameObjects.Image) => { - resLoadingImage.destroy(); - }); - progress.destroy(); - progressContainer.destroy(); - if (scene instanceof DirtyScene) { - scene.markDirty(); - } - }); -}; - -export const removeLoader = (scene: Phaser.Scene): void => { - if (scene.load.textureManager.exists(LogoNameIndex)) { - scene.load.textureManager.remove(LogoNameIndex); } -}; +} diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 81cf3676..d9bb8186 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -28,7 +28,7 @@ import { localUserStore } from "../../Connexion/LocalUserStore"; import { HtmlUtils } from "../../WebRtc/HtmlUtils"; import { mediaManager } from "../../WebRtc/MediaManager"; import { SimplePeer } from "../../WebRtc/SimplePeer"; -import { addLoader, removeLoader } from "../Components/Loader"; +import { Loader } from "../Components/Loader"; import { lazyLoadPlayerCharacterTextures, loadCustomTexture } from "../Entity/PlayerTexturesLoadingManager"; import { RemotePlayer } from "../Entity/RemotePlayer"; import type { ActionableItem } from "../Items/ActionableItem"; @@ -203,6 +203,7 @@ export class GameScene extends DirtyScene { private sharedVariablesManager!: SharedVariablesManager; private objectsByType = new Map(); private embeddedWebsiteManager!: EmbeddedWebsiteManager; + private loader: Loader; constructor(private room: Room, MapUrlFile: string, customKey?: string | undefined) { super({ @@ -221,6 +222,7 @@ export class GameScene extends DirtyScene { this.connectionAnswerPromise = new Promise((resolve, reject): void => { this.connectionAnswerPromiseResolve = resolve; }); + this.loader = new Loader(this); } //hook preload scene @@ -297,7 +299,7 @@ export class GameScene extends DirtyScene { //if SpriteSheetFile (WOKA file) don't display error and give an access for user if (this.preloading && !(file instanceof SpriteSheetFile)) { //remove loader in progress - removeLoader(this); + this.loader.removeLoader(); //display an error scene this.scene.start(ErrorSceneName, { @@ -331,7 +333,7 @@ export class GameScene extends DirtyScene { }); //this function must stay at the end of preload function - addLoader(this); + this.loader.addLoader(); } // FIXME: we need to put a "unknown" instead of a "any" and validate the structure of the JSON we are receiving. @@ -1832,6 +1834,8 @@ ${escapedMessage} right: camera.scrollX + camera.width, bottom: camera.scrollY + camera.height, }); + + this.loader.resize(); } private getObjectLayerData(objectName: string): ITiledMapObject | undefined { for (const layer of this.mapFile.layers) { diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts index 8cb82ba6..d5629c88 100644 --- a/front/src/Phaser/Login/CustomizeScene.ts +++ b/front/src/Phaser/Login/CustomizeScene.ts @@ -4,7 +4,7 @@ import { loadAllLayers } from "../Entity/PlayerTexturesLoadingManager"; import Sprite = Phaser.GameObjects.Sprite; import { gameManager } from "../Game/GameManager"; import { localUserStore } from "../../Connexion/LocalUserStore"; -import { addLoader } from "../Components/Loader"; +import { Loader } from "../Components/Loader"; import type { BodyResourceDescriptionInterface } from "../Entity/PlayerTextures"; import { AbstractCharacterScene } from "./AbstractCharacterScene"; import { areCharacterLayersValid } from "../../Connexion/LocalUser"; @@ -30,10 +30,13 @@ export class CustomizeScene extends AbstractCharacterScene { private moveHorizontally: number = 0; private moveVertically: number = 0; + private loader: Loader; + constructor() { super({ key: CustomizeSceneName, }); + this.loader = new Loader(this); } preload() { @@ -55,7 +58,7 @@ export class CustomizeScene extends AbstractCharacterScene { this.lazyloadingAttempt = false; //this function must stay at the end of preload function - addLoader(this); + this.loader.addLoader(); } create() { diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts index 1f1eb3ce..d9861b20 100644 --- a/front/src/Phaser/Login/SelectCharacterScene.ts +++ b/front/src/Phaser/Login/SelectCharacterScene.ts @@ -4,7 +4,7 @@ import { EnableCameraSceneName } from "./EnableCameraScene"; import { CustomizeSceneName } from "./CustomizeScene"; import { localUserStore } from "../../Connexion/LocalUserStore"; import { loadAllDefaultModels } from "../Entity/PlayerTexturesLoadingManager"; -import { addLoader } from "../Components/Loader"; +import { Loader} from "../Components/Loader"; import type { BodyResourceDescriptionInterface } from "../Entity/PlayerTextures"; import { AbstractCharacterScene } from "./AbstractCharacterScene"; import { areCharacterLayersValid } from "../../Connexion/LocalUser"; @@ -31,11 +31,13 @@ export class SelectCharacterScene extends AbstractCharacterScene { protected pointerTimer: number = 0; protected lazyloadingAttempt = true; //permit to update texture loaded after renderer + private loader: Loader; constructor() { super({ key: SelectCharacterSceneName, }); + this.loader = new Loader(this); } preload() { @@ -49,7 +51,7 @@ export class SelectCharacterScene extends AbstractCharacterScene { this.lazyloadingAttempt = false; //this function must stay at the end of preload function - addLoader(this); + this.loader.addLoader(); } create() { diff --git a/front/src/Phaser/Login/SelectCompanionScene.ts b/front/src/Phaser/Login/SelectCompanionScene.ts index 46ad6361..615ac4b3 100644 --- a/front/src/Phaser/Login/SelectCompanionScene.ts +++ b/front/src/Phaser/Login/SelectCompanionScene.ts @@ -1,4 +1,4 @@ -import { addLoader } from "../Components/Loader"; +import { Loader } from "../Components/Loader"; import { gameManager } from "../Game/GameManager"; import { ResizableScene } from "./ResizableScene"; import { EnableCameraSceneName } from "./EnableCameraScene"; @@ -22,11 +22,13 @@ export class SelectCompanionScene extends ResizableScene { private currentCompanion = 0; private pointerClicked: boolean = false; private pointerTimer: number = 0; + private loader: Loader; constructor() { super({ key: SelectCompanionSceneName, }); + this.loader = new Loader(this); } preload() { @@ -35,7 +37,7 @@ export class SelectCompanionScene extends ResizableScene { }); //this function must stay at the end of preload function - addLoader(this); + this.loader.addLoader(); } create() {